Figma Masterclass
From first frame to production-ready handoff.
The most comprehensive Figma course for working designers. Covers Auto Layout, Variables, Components, Prototyping, Dev Mode, and the full professional workflow — from first frame to engineering handoff.
LEARNING OUTCOMES
- 01 Master Auto Layout for responsive component design
- 02 Use Variables and Modes for design tokens in Figma
- 03 Build a production-ready component library
- 04 Create interactive prototypes with advanced transitions
- 05 Hand off designs to developers using Dev Mode
- 06 Organize and manage large-scale design files efficiently
Auto Layout transforms static frames into responsive containers. Before Auto Layout, a button's text and padding were separate, manually positioned objects — change the text, and you'd manually adjust the frame. Auto Layout eliminates this entirely.
The Three Sizing Modes:
- Hug: The frame shrinks to fit its content. Use for buttons, tags, chips — anything that should wrap tightly around what it contains.
- Fill: The child expands to fill available space in the parent. Use for text areas in cards, flexible list items.
- Fixed: The frame has a set dimension regardless of content. Use when you need a specific size constraint.
Spacing: Gap (space between items) and Padding (space from frame edge to content) are the two controls. You can set Auto and Fixed gap values. For evenly spaced navigation items or button groups, Auto gap is invaluable.
Direction: Horizontal (row) or Vertical (column) — mapping directly to Flexbox flex-direction.
Nesting: Auto Layout can be nested. A card component (vertical Auto Layout) containing a header area (horizontal Auto Layout) containing an icon and text (also horizontal Auto Layout). This is how real UI components are built.
- Auto Layout = Flexbox in Figma (main axis, cross axis, fill/hug/fixed)
- Hug wraps content; Fill expands to parent; Fixed ignores content
- Nest Auto Layouts to build complex responsive components
- Absolute position inside Auto Layout: use for overlays, badges, decorative elements
- 01 Rebuild a Card Component 45 min
Take any card component from your current project (or find one on Figma Community). Rebuild it from scratch using only Auto Layout — no fixed sizes except where truly necessary. The card should resize gracefully when you change the title text length.
- 02 Navigation Bar 30 min
Build a responsive navigation bar with Auto Layout. It should: (1) hug the logo, (2) have fill-width nav links that space evenly, (3) have a fixed-size CTA button. Test by changing the frame width.
Component Rebuild Challenge
Practical ProjectTake an existing UI component in your project that uses manual positioning. Rebuild it entirely with Auto Layout. Document: what changed, what broke, what improved. The rebuilt component should handle 3 content variations without any manual adjustment.
- website
- website
Variables in Figma (introduced in 2023) are named containers for reusable values. Think of them as named cells in a spreadsheet that components reference instead of storing their own values.
Variable Types:
- Color: Store colour values. These are your colour tokens.
- Number: Store numeric values for spacing, radii, typography scales.
- String: Store text values — useful for localisation mockups.
- Boolean: Store true/false — use to toggle component states or variants.
Scoping controls which properties can use a variable. A spacing variable shouldn't appear as an option when you're filling a rectangle's colour. Scoping keeps the token picker clean.
Modes are the most powerful feature. A single variable collection can have multiple modes — Light and Dark, or Mobile and Desktop, or Brand A and Brand B. Switch the mode at the frame level and every variable resolves to its mode-specific value. This is how design systems implement theming.
- Variables store values; components reference variables (not values directly)
- Modes enable theming — one variable collection, multiple value sets
- Scope variables to avoid token picker noise
- Variable collections map to design token categories
- 01 Build a Token System 1 hour
Create a Variables collection with: (1) 10 primitive colour tokens (the raw colours), (2) 8 semantic tokens (background, surface, text-primary, text-secondary, border, brand, error, success), (3) spacing scale (4, 8, 12, 16, 24, 32, 48, 64). Apply semantic tokens to 3 components.
- 02 Light/Dark Modes 45 min
Add a Dark mode to your colour token collection. For each semantic token, set the light mode value and dark mode value. Apply to a complete screen and test the mode switch.
- website Variables in Figma — Official Documentation
- website Design Tokens Community Group — W3C
- Main component defines the contract
- Variants are states, not separate components
- Instance swapping is the most underused Figma feature
- Text styles are semantic, not visual
- Line height and letter spacing are as important as size
- Responsive type: clamp() in code, manual steps in Figma
- Prototype fidelity should match the question being tested
- Smart Animate is for demonstrating, not testing
- Overlay + conditional flows for realistic prototypes
- Use 4px base grid everywhere
- Column grids for layout; row grids for vertical rhythm
- Figma's responsive design: min-width and max-width constraints
- Libraries are shared component sources
- Branching for safe iteration
- Publish, subscribe, update workflow
- Variable modes for interactive state
- Conditional component swaps
- Multi-directional scroll prototypes
- Clean file structure = faster dev mode navigation
- Annotate spacing decisions, not just measurements
- CSS and iOS code generation: useful as a starting point, not gospel
- Content Reel, Unsplash, Iconify: the essential trio
- Variables Bridge for token export
- AutoFlow for user journey diagrams
- Cover frames for every file
- Page structure: Cover / Design / Components / Archive
- Naming conventions that survive team growth
- Presentation mode: full-screen prototype
- Client-ready frames vs working frames
- Presenting flows vs presenting screens
- Make designs for AI generation: use real content, real constraints
- AI prototyping: faster hypothesis testing
- The floor rises, the ceiling stays — AI raises baseline quality but cannot replace design judgement