📐

Figma Essentials Lecture Notes by Dan Scott

Jul 18, 2024

Figma Essentials Lecture Notes by Dan Scott

Introduction

  • Instructor: Dan Scott
  • Course: Figma Essentials
  • Objective: Learn UI/UX design using Figma to create beautiful interfaces and prototypes
  • Target Audience: New to design/User eXperience (UX) design

Course Outline

  1. Brief and UX Persona
  2. Wireframes
  3. Hi-Fidelity Mock-ups
  4. Fonts for Web and Mobile Apps
  5. Creating UI Components
  6. Understanding Components, Constraints, Variances
  7. Using UI Kits and Plugins
  8. Building Style Guides
  9. Micro-Interactions, Page Transitions, Animations
  10. User Testing and File Exporting
  11. Assignments and Projects

Key Topics

Getting Started with Figma

  • Download exercise files and shortcut sheets
  • Figma Versions: Browser vs. Desktop (no difference, personal preference)
  • Adjust Playback Speed: If the pace is too fast
  • Free vs. Paid Version: Mainly using the free version
    • Covers almost all essentials
    • Few exclusive features in the paid version
  • Updates in Figma: Frequently happening, check comments for changes

What is Figma For?

  • Main Usage: Rapid prototyping for websites and apps
  • What It Can Do: Create wireframes, hi-fidelity mock-ups, interactive prototypes
  • What It Can't Do: Doesn't code the final site or app, hands off assets to developers
  • Additional Uses: Digital graphic design like social media campaigns; not optimal for print

UI vs UX

  • UI (User Interface): Focuses on the look of the design (buttons, visual elements)
  • UX (User Experience): Focuses on how the design works, usability testing, and user interactions
  • Combining UI and UX: Creating designs that are both visually appealing and user-friendly

Task Flow and User Flow

  • Task Flow: Linear steps users follow to achieve a goal
  • User Flow: More complex, multi-path routes users might take
  • Example: Designing multi-step processes like signing up, checking out, etc.

Practical Exercises

Creating a Figma Project

  • Frame Tool: F for frames/artboards
  • Designing for Different Devices: Mobile, tablet, desktop sizes
  • Naming Frames: Keep organized, name them according to their functionality
  • Setting Defaults: Set preferred sizes, colors, rounded corners for consistency
  • Drawing Basics: Rectangles, circles, buttons, etc.
  • Wireframes vs Hi-Fidelity Mock-ups: Start with basic wireframes, move to detailed designs

Plugins and Community Resources

  • Iconify Plugin: For easy access to multiple icon libraries
  • Using Community Files: Access and duplicate shared Figma resources
  • SVG vs PNG: Prefer SVG for scalable, easily editable icons

Prototyping and Testing

  • Basic Prototyping: Linking frames for navigation
  • Animations and Transitions: Eases, push, slide, smart animate
  • Figma Mirror: Test prototypes on actual devices
  • User Testing Feedback: Iterate based on feedback from real user interactions

Collaborating and Sharing

  • Share Options: Send with view-only or comment access
  • Live Collaboration: View edits in real-time, useful for client and team feedback
  • Comments: Specific feedback on elements, resolving comments to keep track
  • Team Projects: For collaborative work, necessary for sharing editing access

Summary

  • Purpose: Equip users to confidently create and test designs using Figma
  • Resource Utilization: Exercise files, community, plugins for efficient workflow
  • Assignments: Regular projects to reinforce learning and building portfolio-worthy designs

Next Steps

  • Explore the full course for advanced techniques and projects
  • Continue hands-on practice to gain proficiency in Figma

Full transcript