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" */}
Plugin API: Reading Variables
Pull local variables from inside a running Figma plugin, not just the REST API.
javascript
// code.js (Figma plugin, runs in the Figma sandbox)const collections = figma.variables.getLocalVariableCollectionsAsync ? await figma.variables.getLocalVariableCollectionsAsync() : figma.variables.getLocalVariableCollections();for (const collection of collections) { for (const variableId of collection.variableIds) { const variable = await figma.variables.getVariableByIdAsync(variableId); console.log(variable.name, variable.valuesByMode); }}figma.ui.postMessage({ type: 'tokens-extracted', collections });
Code Connect: Mapping a Component
Bind a Figma component to its real source so Dev Mode shows the actual prop API, not generic CSS.
typescript
// Button.figma.tsximport figma from '@figma/code-connect';import { Button } from './Button';figma.connect(Button, 'https://www.figma.com/file/FILE_KEY/Design?node-id=1-23', { props: { variant: figma.enum('Variant', { Primary: 'primary', Secondary: 'secondary', Danger: 'danger', }), label: figma.string('Label'), isDisabled: figma.boolean('Disabled'), }, example: ({ variant, label, isDisabled }) => ( <Button variant={variant} isDisabled={isDisabled}>{label}</Button> ),});
Automating Sync with Webhooks
React to file changes instead of polling the REST API on a timer.
javascript
// Register a webhook (once, via REST API)// POST https://api.figma.com/v2/webhooks// { "event_type": "FILE_VERSION_UPDATE", "team_id": "...", "endpoint": "https://ci.example.com/figma-hook", "passcode": "..." }// Express handler that triggers a token re-export on every published versionapp.post('/figma-hook', (req, res) => { const { event_type, file_key, passcode } = req.body; if (passcode !== process.env.FIGMA_WEBHOOK_PASSCODE) return res.sendStatus(401); if (event_type === 'FILE_VERSION_UPDATE') { triggerTokenExportPipeline(file_key); } res.sendStatus(200);});
Component Properties Deep Dive
The four property types behind every Figma component's config panel, and their code equivalent.
- Variant- A fixed enum property (size: sm/md/lg); maps to a TS union type or CSS modifier class
- Boolean- Toggles a layer's visibility (e.g. show icon); maps to a conditional render, not a variant branch
- Instance swap- Lets a nested slot accept any component of a set (e.g. swap the icon); maps to a children/slot prop
- Text- An editable string bound to a layer's content; maps directly to a string prop like label or children
- Nested instance overrides- Properties exposed from a component nested inside another; maps to prop drilling or a compound API
Tokens Studio -> Style Dictionary Pipeline
Automate the path from a designer-edited tokens.json to built platform assets on every push.
yaml
# .github/workflows/sync-tokens.ymlname: Sync Design Tokenson: push: paths: ['tokens.json'] # exported by the Tokens Studio Figma pluginjobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: 20 } - run: npm ci - run: npx style-dictionary build - run: | git config user.name "tokens-bot" git add build/ git commit -m "chore: rebuild tokens" || echo "no changes" git push
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?
Explore Topics
#FigmaToCodeWorkflow#FigmaToCodeWorkflowCheatSheet#WebDevelopment#Beginner#KeyFigmaConceptsForDevs#Dev#Mode#CSS#APIs#CheatSheet#SkillVeris
