The studio runs a tight Figma-to-code workflow built around design tokens and component parity. The goal: a design change on a single token (a colour, a radius, a spacing step) propagates to every product without manual hunting.
Tokens flow one way
Figma Variables are the source of truth for colour, spacing, radii, typography and motion tokens. The official Figma MCP server exposes them; a small script reads them and writes CSS custom properties into src/index.css. The reverse direction is manual paste — there's no API to write Figma Variables programmatically yet.
Components map 1:1
Every component that ships to a partner project exists in both the Figma library and the code library, with matching names and matching props. A "Button — Large — Brand" in Figma is exactly a "<Button size='lg' variant='brand'>" in code. This is the highest-leverage habit the studio has — onboarding new designers or engineers is much faster when the two surfaces agree.
How a screen gets built
- Designer drafts in Figma using existing components and tokens
- Engineer opens the frame via Figma Dev Mode in Claude Code
- The figma-new-screen skill scaffolds the React route + reuses existing components
- Anything new gets a Figma component + a code component in the same PR
- Visual regression catches drift between design and code
What we don't do
No pixel-perfect handoff tools. No "export to React" plugins. Both produce code the engineer immediately throws away. Tokens + parity + judgment do the work that automated handoff promises.
Why we do not use "Figma to code" export tools
Plugins that promise to turn a Figma frame into production React produce code an engineer immediately deletes — absolutely-positioned divs, magic numbers, no component reuse. The output looks like a shortcut and is actually a liability. Our workflow does the opposite: design in components that already map to coded components, sync tokens one way, and let a human translate layout with judgment. The tokens carry the precision; the engineer carries the structure.
The one habit that pays for itself
Component parity — a "Button / Large / Brand" in Figma is exactly a coded Button with those props — is the highest-leverage discipline we keep. It means a token change propagates everywhere without a hunt, a new designer or engineer onboards against a shared vocabulary, and design review compares like with like. It costs discipline to maintain and saves that cost back on every single screen after the first.