Figma to Code Workflow Cheat Sheet

Covers key Figma concepts like Auto Layout and Variants, Dev Mode CSS output, the Figma API, and a practical developer handoff checklist.

2 PagesBeginnerMar 10, 2026

Key Figma Concepts for Devs

Design-file vocabulary that maps to code concepts.

Auto Layout- Figma's flex-like layout system; maps almost directly to CSS Flexbox (direction, gap, padding)
Components & Instances- A Component is the source definition; Instances inherit its structure and override properties
Variants- Multiple states/sizes of a component grouped into one set, similar to a props matrix
Styles- Reusable color, text, and effect definitions; the design equivalent of design tokens
Dev Mode- Figma mode that generates CSS/iOS/Android snippets and measurements for a selected layer
Constraints- Rules controlling how a layer resizes/repositions when its parent frame is resized

Dev Mode CSS Output

Typical inspector output for an Auto Layout frame.

css

.card {  display: flex;  flex-direction: column;  align-items: flex-start;  padding: 24px;  gap: 16px;  border-radius: 12px;  background: #FFFFFF;  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);}

Figma REST API

Pull file structure and variables programmatically.

bash

# Fetch a file's node tree via the Figma REST APIcurl -H "X-Figma-Token: $FIGMA_TOKEN" \  "https://api.figma.com/v1/files/FILE_KEY"# Fetch local variables/styles (design tokens) for a filecurl -H "X-Figma-Token: $FIGMA_TOKEN" \  "https://api.figma.com/v1/files/FILE_KEY/variables/local"

Handoff Checklist

What to confirm before you start building.

Export tokens first- Sync colors/spacing/type as variables/styles before building components, not after
Confirm breakpoints- Agree on exact pixel widths where the layout changes; Figma frames are static
Check every state- Ask for hover/focus/disabled/error states; mockups often only show the default
Verify with real content- Test with long strings, empty states, loading states, not just ideal-length text
Match spacing to a scale- Snap ad-hoc pixel values to your spacing scale (8/16/24px) instead of copying exactly

Auto Layout to Flexbox Mapping

Direct translation table with a working example.

css

/* Figma Auto Layout property   -> CSS equivalent   Direction: Vertical           -> flex-direction: column   Direction: Horizontal         -> flex-direction: row   Spacing between items         -> gap   Padding                       -> padding   Resizing: Hug contents        -> width/height: fit-content   Resizing: Fill container      -> flex: 1 (or width/height: 100%)   Alignment                     -> justify-content / align-items*/.stack {  display: flex;  flex-direction: column; /* Auto Layout "Vertical" */  gap: 12px;               /* Auto Layout "Spacing between items" */  padding: 16px;  align-items: stretch;    /* Auto Layout "Alignment" */}

Pro Tip

Ask designers to use Auto Layout with real spacing/padding values, not manual positioning, before you start building — it makes the Dev Mode CSS output nearly 1:1 with Flexbox, turning handoff from pixel-guessing into copy-and-adjust.

Was this cheat sheet helpful?

Design Systems Cheat Sheet

PostgreSQL Cheat Sheet