Figma to code · Build
Getting Figma changes into code without copying hex values
Design tokens go from Figma into one place in your code, automated where possible, so nobody copies hex values by hand. Our own system imports them over MCP.
EngagementHourly · remote
Hours9–18 CET · 4 h overlap
StackFigma · Figma MCP · design tokens
Proof3 case studies
The service in 4 parts
01 · Who it’s for
The design file says one thing and the code another, and the only connection between them is a person copying hex values.
02 · What we’ve built
- Our current design system takes palettes, scales and theme values from Figma automatically, over an MCP server.Case study 01 →
- A thirty-brand library in 2022, where a plugin exported the tokens from Figma to JSON and the JSON was generated into SCSS. It was automated, but it worked in one direction only and easily fell behind the design file.Case study 02 →
- A team of twelve at a US marketplace for truck services, where by 2026 design was connected to Figma and the team used Claude Code every day.Case study 03 →
03 · How we work
01 · ONE WAY INTokens feed a core package, and the core feeds the components. A value changed in Figma is updated in one place and reaches every component from there.
02 · A MANUAL PATHNext to the automatic import we keep a manual one, for times when the connection to Figma isn’t available.
04 · Stack
FigmaFigma MCPdesign tokensJSONSCSSTypeScriptpnpm workspaces
Proof
Where we’ve done this before
Case study 01 · Platforms74 / 678Our current design system takes palettes, scales and theme values from Figma automatically, over an MCP server.Read the case study →Case study 02 · Platforms~100 / 30+A thirty-brand library in 2022, where a plugin exported the tokens from Figma to JSON and the JSON was generated into SCSS. It was automated, but it worked in one direction only and easily fell behind the design file.Read the case study →Case study 03 · Platforms~50%A team of twelve at a US marketplace for truck services, where by 2026 design was connected to Figma and the team used Claude Code every day.Read the case study →
FAQ
Questions about this service
No. We take palettes, scales and theme values from Figma, and the components are written in code on top of them.
Design and code change on different schedules. Without something linking them, the Figma file and the code match only by accident, and it is hard to tell which of the two is correct.
That depends on how the file is structured, which is the first thing we look at.
Then each brand gets its own set of token values. The design tokens and multi-brand theming page explains how that works.
Next step
Describe the problem and we’ll come back with three options.
The first call takes 30 minutes, and you’re under no obligation.