$ npm run check
✓ check:tokens Figma ↔ code
✓ check:production 52 / 56 match
✓ check:components 35 components
! check:contrast 30 pairs < AA
Figma, code and production, checked against each other
I moved Airtm's design system from Figma into code: 35 React components, the tokens, and six checks that compare Figma, the code and what the app actually ships. Then I prototyped with it.
Airtm is a digital dollar wallet used across Latin America and other emerging markets to hold, send and receive stablecoin dollars, with local on- and off-ramps.
- Role
- Senior Product Designer. It was a design team initiative, and I drove it: getting the system from Figma into code, running Storybook, and auditing what matched Figma and what didn't. I built it with AI tools and reviewed every decision it records.
- Collaborators
- Design team, web and mobile engineers.
- North star
- Any designer should be able to ask the system what a colour or a component is, and get one answer.
In 30 seconds
- 01 · Problem
- Airtm's design lived in three places that disagreed: several Figma libraries, the production component library, and each designer's memory of both.
- 02 · Decision
- Make the code the working reference, and let scripts, not opinions, say where Figma and production drift from it.
- 03 · Result
- 35 components plus 6 prototype-kit modules, with Storybook and a docs site, six automated checks, and 52 of 56 colour primitives matching production on the first run.
The problem
Three Figma libraries still published their own Button. Two frames were called Primitives. The same token name resolved to two different whites depending on the file. Production shipped its own library, and nobody could say how far it was from Figma. Every prototype started with someone guessing.
The constraint
Nothing could stop. Figma stayed the designers' tool, production kept shipping its own library, and nobody had time for a rewrite. Whatever I built had to sit next to both, and be useful from the first week.
Why it had to be code
Two reasons. The team needed to see the system run: Storybook, every state, and an honest audit of what matched Figma. And I wanted to prototype faster, with components 100% faithful to the Figma designs. Prototypes built from real components get to value sooner, are easier to share with stakeholders, and make user tests better, because people react to the product and not to a drawing of it.
The code as the reference
I rebuilt the system in React: tokens first, then 35 components with their states, 6 prototype-kit modules, a Storybook and a docs site. Prototypes import these components instead of drawing lookalikes, so a prototype and the system can't quietly drift apart.
Checks, not opinions
Six scripts run together. They compare the tokens to Figma, the tokens to production, the components to their Figma sources, the navigation to its taxonomy, and every text and background pair to WCAG contrast in both themes. A disagreement becomes a line in a report, not a debate in a review.
Production as the third source
When the production library arrived, I added it as a snapshot and checked against it. 52 of 56 colour primitives matched on the first run. The four that didn't were real findings, including a grey that had been wrong in the printed foundations for months.
Findings go to people
The checks don't fix anything on their own. When the code and production disagree, it's a decision for the design team. The checks queued 14 of them, and each one got a record.
What I gave up
A single source of truth. There are still three: Figma for design, the code for intent, production for what users see. I stopped trying to merge them and made the differences visible instead. The cost is maintenance: someone has to keep the snapshots fresh.
Outcome
- Built
- 35 components and 6 prototype-kit modules, Storybook, a docs site, and an inventory of all 156 modules in the production library, on one page.
- Found
- 30 colour pairs under WCAG AA, the two whites behind a long-running inconsistency, and component names published twice in Figma.
- Used
- My prototypes and handoffs at Airtm were built from it, from May to September 2026. Production kept its own library; the checks measure the distance.
What I'd do next
Run the checks in CI on every design system change, and take the 30 contrast pairs through triage with the team. That list is the most direct accessibility work the system has left.