My Figma-to-code workflow in 2024
Variables, Code Connect, and the missing middle layer between design tokens and production CSS.
The handoff problem hasn't been solved
Everyone says Figma solved design-to-code handoff. It hasn't. Inspect panel gives you measurements. Code Connect gives you component mappings. But the middle layer — the semantic meaning of tokens — still lives in someone's head.
How I set it up
My workflow: Figma Variables → JSON export (via Figmakos plugin) → TypeScript token file → CSS custom properties → Tailwind theme. Every token has a name, a semantic purpose, and a value that can be changed in one place.
The missing piece: documentation at the token level
The biggest gap isn't tooling — it's that tokens lack context. "color/surface/default: #141414" means nothing without knowing it's the card background, not the page background. I add a "description" field to every token definition. It ends up in the JSON. Engineers actually read it.
Code Connect: what it's actually good for
Code Connect is good for one thing: showing engineers the exact component import for what they see in Figma. It doesn't replace documentation. It doesn't replace design decisions. It removes the question "what's this component called in code" — which is a smaller problem than people think, but still a real one.
What I'd change
If I were starting fresh: define tokens first, design second. Start with a semantic layer (surface, interactive, feedback) before picking any hex values. Most projects get this backwards.