Figma Expert

Figma is the industry-standard design tool, but most teams use only a fraction of its capabilities. The gap between novice and expert Figma usage is mostly in three areas: mastering Auto Layout for responsive, engineer-friendly components; building a proper component architecture that scales with your product; and using Variables to create a true design token system that syncs with code. This skill covers all three plus the workflow practices that separate design-at-scale teams from the rest.

Core Mental Model

Think of Figma as a component-based UI system, not a drawing canvas. Every element should either be a component instance, a token-driven style, or a layout primitive. If you're nudging things pixel-by-pixel or eyeballing spacing, you're fighting the tool.

The design → code pipeline is: Variables (tokens) → Styles → Components → Frames/Pages. Each layer depends on the one below. Design token changes should cascade automatically up the chain, just like CSS custom properties cascade in code.

Auto Layout is the Figma equivalent of Flexbox — learn it deeply. A component built with Auto Layout naturally communicates its layout intent to engineers and responds predictably to content changes.

Auto Layout Mastery

Auto Layout is the most important Figma feature. Use it for almost everything.

Sizing Modes

Mode

Equivalent

When to use

Hug	fit-content	Container sizes to its children
Fill	flex: 1	Element grows to fill available space
Fixed	width: 200px	Explicit size, content may overflow

Pattern: Outer container = Fixed or Fill
         Inner elements = Hug or Fill
         Never: Fixed on elements that should adapt to content

Nested Auto Layout for Complex Components

Card Component (Vertical AL, Hug height, Fixed 320px width)
├── Image (Fixed height 180px, Fill width)
├── Content (Vertical AL, Hug, Fill width, padding 16px)
│   ├── Badge (Horizontal AL, Hug)
│   ├── Title (Hug, Fill width)         ← text wraps
│   └── Footer (Horizontal AL, Fill width)
│       ├── Author (Horizontal AL, Hug)
│       └── Date (Hug)                  ← pushed right by Fill spacer

Spacing and Padding

• Always use Spacing Between (auto distribution) for equal gaps
• Use Gap values that match your spacing scale (4, 8, 12, 16, 24, 32px)
• Prefer consistent padding: 16px for compact components, 24px for cards, 32px for page sections
• Use Absolute positioning (within AL frame) only for overlays, badges, decorative elements

Direction and Wrapping

Horizontal AL → flex-direction: row
Vertical AL   → flex-direction: column
Wrap enabled  → flex-wrap: wrap (use for tag groups, grid-like layouts)

Component Architecture

The hierarchy: Base Component → Variants → Composition

Base Component → Variants (Component Sets)

Figma's Component Sets organize variants cleanly. Think of the = in variant names as CSS modifiers.

Button (Component Set)
├── Type=Primary, Size=SM, State=Default
├── Type=Primary, Size=SM, State=Hover
├── Type=Primary, Size=SM, State=Disabled
├── Type=Primary, Size=MD, State=Default
├── Type=Secondary, Size=MD, State=Default
└── ... (all combinations)

Naming convention for variants:

• Property names: PascalCase (Type, Size, State, Has Icon)


• Property values: PascalCase (Primary, Default, True/False)


• Boolean props: Has Icon = True | False (not With Icon / Without Icon)

Component Naming Convention

/ (slash) = folder hierarchy in Assets panel

atoms/Button
atoms/Input
atoms/Badge
molecules/Card
molecules/Dropdown
organisms/Navbar
organisms/DataTable
templates/Dashboard

Nested Components and Overrides

Keep components composable. A Card uses Button, Badge, Avatar as nested instances — not flattened copies.

✅ Card
   └── uses Button instance → engineer can swap variant via props

❌ Card  
   └── flattened Button group → engineer has to figure out the styles

Slot Pattern for Flexible Layouts

Use Expose Properties to bubble nested component props to the parent:

1. Select nested Button inside Card
2. Right-click → "Expose Properties" → expose Type, Label
3. Now Card instances show Button props in the right panel without drilling into layers

Design Tokens with Variables

Figma Variables (2023+) replace Styles for token-based theming. Use collections to mirror your code token architecture.

Token Architecture (3 layers)

Primitive (raw values) → Semantic (intent) → Component (specific usage)

Primitive: color/blue/500 = #3B82F6
Semantic:  color/action/primary = {color/blue/500}
Component: button/background/primary = {color/action/primary}

Variable Collections Setup

Collection: "Primitives"
├── color/neutral/0     = #FFFFFF
├── color/neutral/50    = #F9FAFB
├── color/neutral/900   = #111827
├── color/brand/500     = #3B82F6
├── spacing/1           = 4
├── spacing/2           = 8
└── radius/sm           = 4

Collection: "Semantic" (references Primitives)
├── Mode: Light
│   ├── color/background/base      → color/neutral/0
│   ├── color/background/surface   → color/neutral/50
│   ├── color/text/primary         → color/neutral/900
│   └── color/action/default       → color/brand/500
└── Mode: Dark
    ├── color/background/base      → color/neutral/950
    ├── color/background/surface   → color/neutral/900
    └── color/text/primary         → color/neutral/50

Collection: "Component" (references Semantic)
├── button/background/primary     → color/action/default
├── input/border/default          → color/border/subtle
└── card/background               → color/background/surface

Token Studio Plugin (for code sync)

Token Studio exports tokens as JSON compatible with Style Dictionary, W3C Design Token format, and Theo.

// tokens.json exported from Token Studio
{
  "color": {
    "brand": {
      "500": { "value": "#3B82F6", "type": "color" }
    },
    "action": {
      "primary": { "value": "{color.brand.500}", "type": "color" }
    }
  },
  "spacing": {
    "4": { "value": "16", "type": "spacing" }
  }
}

Prototyping for User Testing

Smart Animate

Use Smart Animate for smooth state transitions. Requirements:

1. Layer names must match between frames
2. Layer types must match (don't animate group → frame)
3. Use for: accordions, tabs, modal open/close, hover states

Frame: Dashboard (closed sidebar)
  └── Sidebar (x: -240, opacity: 0)

Frame: Dashboard (open sidebar)  
  └── Sidebar (x: 0, opacity: 1)

Connection: Trigger="On Click" Animation="Smart Animate" Duration=300ms Easing=Ease Out

Component Interactions (without leaving component editor)

Set interactions directly in component variants to create interactive component prototypes:

• While Pressed → switch to Pressed variant
• While Hovering → switch to Hover variant
• On Click → switch to Active variant

Overlay Patterns

• Modals: Open overlay, position centered, background: darken
• Tooltips: Open overlay, position manual, close on click outside
• Dropdowns: Open overlay, position below trigger, close on click outside

Developer Handoff Best Practices

Annotation Frame

Every page delivered to engineering should have a companion Annotation frame:

Annotation Frame contents:
├── Spacing callouts (dimensioned arrows)
├── Color tokens used (not hex values — token names)
├── Interaction notes ("Focus state: ring-2 brand-500")
├── Responsive behavior notes
├── Edge cases documented (empty state, error, loading)
└── Links to spec pages (Notion, Confluence)

Asset Export Settings

Icons: SVG (optimize for web, no artboard)
Illustrations: SVG or PNG @2x
Photos: JPG @2x (80% quality)
App icons: PNG at all required sizes, or SVG
Lottie animations: Export from After Effects, link in annotations

Redline Specs — What to call out

1. Spacing values — use 8px grid tokens, not pixel measurements
2. Color tokens — color.action.primary not #3B82F6
3. Typography tokens — text.body.md not 16px/24px Inter
4. Component states — every interactive element needs Default, Hover, Focus, Active, Disabled, Error
5. Motion — duration, easing function, what triggers it

Design System Governance

Figma Branching (Design System Updates)

For teams using Figma's branching feature:

main branch:           Published, production design system
feature/nav-redesign:  Branch from main, design changes, review, merge

PR-style review process:

1. Branch from main


2. Make changes in branch (components, tokens)


3. Review with design systems team


4. Run QA against usage in product files (check branch references)


5. Merge → all instances update via Publish

Naming Convention Standards

❌ Button_Primary_Large_v3_FINAL
✅ Button / Primary / Large

❌ Blue_2 | Old Blue | Blue new
✅ color/brand/500

❌ #3B82F6 (raw hex in annotations)  
✅ color.action.primary

Component Library Governance

• Change freeze policy: announce breaking changes 2 sprints ahead
• Deprecation pattern: add [DEPRECATED] prefix, 1 sprint grace period
• Version changelog: maintain in a Figma page titled Changelog
• Consumer notification: notify via Slack #design-system when major components change

Key Plugins

Plugin

Use case

Stark	Color contrast WCAG 2.1 checking, vision simulation
Content Reel	Realistic dummy data (names, avatars, text)
Token Studio	Design tokens with JSON export, multi-theme support
Batch Styler	Bulk update styles across components
Super Tidy	Auto-align and rename layers
Figma to Code	HTML/CSS/React/Tailwind export (verify output always)
VariaFonts	Variable font axis control
Lottie Files	Embed Lottie animations in prototypes

Anti-Patterns

❌ Detached components everywhere — if you Detach an instance, you've lost the design system connection. Create a new variant instead.

❌ Frames as groups — groups don't support Auto Layout. Convert groups to frames (Ctrl/Cmd+Alt+G).

❌ Hard-coded colors instead of variables — any hex value typed directly means it won't update when you retheme.

❌ Inconsistent naming — Button, button, btn, BTN in the same file creates search chaos and breaks token references.

❌ Designing in too much detail before validating — rough wireframes → user test → hi-fi. Don't spend days polishing a flow no one will use.

❌ Not using constraints — elements inside fixed frames without constraints break at different screen sizes. Set horizontal/vertical constraints on every layer.

❌ Component sets with too many variants — 200+ variants means maintenance hell. Use component properties + instance swap instead.

Quick Reference

Auto Layout Cheat Sheet

Hug content:   The frame wraps its children — use for buttons, tags, chips
Fill container: The element stretches — use for inputs, content areas, flex children
Fixed:          Explicit size — use for images, icons, containers with known dimensions

Gap between items: Spacing → Gap value
Padding:           Spacing → Padding (T/R/B/L or vertical/horizontal)
Alignment:         Main axis (row: left/center/right) + Cross axis (top/middle/bottom)

Keyboard Shortcuts

Shift+A → Add Auto Layout to selection
Ctrl/Cmd+G → Group
Ctrl/Cmd+Alt+G → Frame (better than group — supports AL)
Alt+drag → Duplicate
Ctrl/Cmd+D → Duplicate in place
R → Rectangle, T → Text, L → Line, P → Pen

Token Naming Template

{category}/{variant}/{state}

color/background/base
color/text/primary
color/border/subtle
color/action/default
color/action/hover
spacing/component/padding-sm
radius/component/card
shadow/elevation/card