← Back

Design systems

A design system built page by page from Figma, with AI-assisted workflows carrying it from design into code.

The UX and UI teams needed one source of truth that matched the live product, and AI tools needed clean, named components to build from.

Role
Designer, builder
Scope
Tokens · Components · AI workflows
Pillar
Design systems · AI
Figma design system colour tokens for backgrounds, text and borders, each shown in light and dark themes.

My role

Designer and builder of the system, and owner of the Figma side of the AI workflows around it.

Approach

  1. Two-tier tokens driving light and dark theming.
  2. Every component audited for fidelity and coverage against the Figma source.
  3. A token audit and checklist: every colour, spacing and size in the codebase scanned, mapped to a proposed scale and sorted into decisions. See the tools.
  4. Figma to code: designs start in Figma, and a pipeline carries each change into tokenised, accessible Storybook components, the source of truth, raising a pull request for a developer to review.
  5. Automated checks on AI-generated code for visual fidelity and token coverage, with fixes pushed back into Figma.
  6. Published as one source of truth for the internal UX and UI teams and the wider product.

Figma to code

Design systems · AI

AI-generated code for a page came back structurally wrong. The fix wasn't the page, it was the system the page was built from. So I made Storybook the source of truth, fed from Figma, and built the route from design into code around how the teams already worked.

The pipeline
Figma designs carried into tokenised, accessible components, with accessibility built in at token level.
The test
A three-week test of Claude Code with the Figma connector against an Angular and Storybook repo, with one success test: a Figma change flows through to a correctly tokenised Storybook component.
The key
Code Connect mappings are what turn generic markup into component-specific output.
Into Storybook
Paste a Figma link and the tooling updates Storybook and raises a pull request for a developer to review, with a full audit trail. People make every final call.
My role
Owner of the Figma side, working with engineering, who own the production code.
Result
Handover went from meetings to minutes, and the integration is part of the UI team's daily workflow.

Handover in Figma

Outcome

One checked set of components and tokens that everyone can design from, and that AI tools can build from.

Research, iteration and delivery

Researched
AI-generated code for a page came back structurally wrong, which pointed at the system rather than the page. I audited every component against its Figma source for fidelity and coverage, and scanned the codebase for how colours, spacing and sizes were really used.
Iterated
A three-week test of Claude Code with the Figma connector, against a real Angular and Storybook repo, with one success test: a Figma change reaching a correctly tokenised component. It showed that Code Connect mappings are what turn generic markup into the right component. Tokens moved to two tiers to drive light and dark themes.
Delivered
One checked source of truth for the UX and UI teams, and a Figma to Storybook route that raises a pull request for a developer to review. Handover went from meetings to minutes, and the integration is part of the UI team's daily workflow.
In short
The system became something people and AI tools can both build from, with Storybook as the single source of truth.

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