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.