Figma is where design decisions get made. The product is what ships in the browser. The gap between those two — the handoff, the token sync, the component mapping — is where most design system implementations break. Figma's Variables, Dev Mode, and REST API narrow that gap, but they don't close it.
Auto layout is Figma's flexbox. It makes frames responsive — children stack, wrap, and distribute with padding, gap, and alignment controls. If your Figma file doesn't use auto layout, it's a picture, not a design. Engineers can't translate fixed-position rectangles into responsive components.
Variables replaced the old "styles" system for colour, spacing, and sizing. They support modes — light/dark, brand A/brand B — so a single design file can represent multiple themes without duplicating frames. Variables are the Figma-side representation of design tokens.
Dev Mode shows engineers the CSS, spacing values, and component properties for any selected element. It's the handoff layer — better than inspecting with a third-party plugin, but still not a substitute for a shared token file that both Figma and code consume.
The Figma REST API lets you read a file's structure, styles, and variables programmatically. This is how you bridge the Figma-to-code gap without manual copy-paste.
# Extract variables (tokens) from a Figma file via REST API # GET /v1/files/:file_key/variables/local curl -H "X-Figma-Token: YOUR_TOKEN" \ "https://api.figma.com/v1/files/FILE_KEY/variables/local" # Response shape (simplified): { "status": 200, "meta": { "variableCollections": { "VariableCollectionId:123": { "name": "Primitives", "modes": [ { "modeId": "1:0", "name": "Light" }, { "modeId": "1:1", "name": "Dark" } ] } }, "variables": { "VariableId:456": { "name": "color/blue/500", "resolvedType": "COLOR", "valuesByMode": { "1:0": { "r": 0.231, "g": 0.510, "b": 0.965, "a": 1 }, "1:1": { "r": 0.231, "g": 0.510, "b": 0.965, "a": 1 } } } } } }
// Figma plugin scaffold — runs inside Figma's sandbox // manifest.json { "name": "Token Exporter", "id": "your-plugin-id", "api": "1.0.0", "main": "code.js", "editorType": ["figma"] } // code.ts — runs in Figma's plugin sandbox const collections = await figma.variables .getLocalVariableCollectionsAsync(); for (const collection of collections) { const variables = collection.variableIds.map( id => figma.variables.getVariableById(id) ); const tokens = variables.map(v => ({ name: v.name, type: v.resolvedType, values: Object.fromEntries( collection.modes.map(mode => [ mode.name, v.valuesByMode[mode.modeId] ]) ), })); console.log(JSON.stringify(tokens, null, 2)); }
Dev Mode generates CSS from the visual properties of a frame. It doesn't know about your tokens, your Tailwind config, or your component API. Treat it as a reference, not as copy-paste production code.
The REST API lets you read variables but not write them. The sync is one-way: Figma to code. If your tokens change in code, you need a plugin or manual update to push them back into Figma.
A component that uses fixed positioning looks correct in Figma but tells engineers nothing about how it should behave at different sizes. Always use auto layout for any component that will be implemented as a responsive element.
Figma Variables (modes, collections) require a Professional plan or higher. Free plan users can view but not create variables. Factor this into budget planning before committing to a Figma-native token workflow.