Figma to Storybook
A pipeline I designed and built with AI that carries designs from Figma into tokenised code and a generated Storybook, the single source of truth for design and engineering, then proves on every build that the code still matches.
About the tool
Pipeline · Built with AI · Design systems- Why
- The design system was well drawn and widely used, but nothing could tell whether what shipped matched it. Every route from design to code went through someone reading a picture: a gap measured off a screenshot, a component rebuilt by hand, a colour that looked right in light mode and was never checked in dark.
- Built by me
- I designed the pipeline, set the rules it works to and directed an AI-assisted build with Claude Code. My part was deciding what to measure, catching what the machine got wrong, and checking every result by eye.
- Starts in Figma
- Components are designed in Figma. The pipeline reads measurable facts straight from the Figma file: colour, spacing, radius, border, type, shadow and opacity, for every component, variant and state, in light and dark.
- Tokens for engineering
- Every value becomes a design token. Generated stylesheets replace hard-coded values, so engineering gets padding, radius, type and both colour modes measured rather than estimated, and composite components arrive as working markup.
- Storybook is the source of truth
- Storybook is the one place design and engineering both build from. When a component lands, its page is generated automatically: every variant, every state, its accessibility behaviour and a short description of what it does. Nobody keeps it by hand, so it can't drift.
- Proof on every build
- The output is rendered in a real browser and measured against Storybook, the source of truth. If anything drifts, the build fails and a pull request names the value that moved, for a developer to review.
- Accessibility measured
- Contrast is checked on every component against its own background, in light and dark. Known exceptions are pinned by name, so a new one can't hide among them.
- What it fixed
- Because the code is checked against Storybook on every build, faults that had slipped through unnoticed were caught and fixed: shadows restored on cards, panels and menus, disabled buttons that now clearly look disabled, and text with readable contrast in both light and dark. Each fix is now held in place by a check, so it can't quietly come back.
- The rules
- Every rule is a measurement, not a guess. Every check is broken on purpose before it's trusted. Anything the pipeline can't carry is named, not dropped. And a person looks at the result, in both modes, every time.
- What I learned
- A check once passed on a rating control with five empty stars, because it only looked one level deep. The dangerous checks aren't the ones that fail. They're the ones that pass while measuring less than you think.
Screens
Get in touch
Looking for a product and UX/UI designer for a contract role? I'd like to hear about it.
Start a conversation- Connect
LinkedIn