From Figma tokens to live React components, built end to end with Claude Code

From Figma tokens to live React components, what actually happened when a designerwhat happens when a designer takes the system all the way

Role

Design Engineer

Industry

Figma, Claude Code, React, TypeScript, Tailwind CSS, Vercel

Duration

3 weeks

Challenges: Chaos Before Orbit

I can build a design system in Figma. That part was never the challenge.

Shipping it was. Taking it from a Figma token to a live React component without handing it off and hoping nothing got lost in the middle.

Without a shared design system, collaboration between designers and developers becomes inefficient, leading to delays and misalignment.

Auditing Exisiting Inconsistencies

Before building anything, the file had to be honest about itself.

Every colour in use was pulled and compared. Duplicates surfaced immediately. Shades that looked identical had hex values that were off by a digit or two. Components that were supposed to be the same had quietly drifted. The button on one page and the button on another differed by 2px radius and 4px padding. Neither wrong on its own. Together, a system silently breaking.

Typography had no scale. Spacing came from memory. Nothing had a name that described what it did.

Every gap the audit found became a decision Orbit had to make once, name properly, and never revisit again.

Orbit : Designed a System to fix it

After auditing the inconsistencies across pages, it became clear that without a connected token system, every new screen would repeat the same problems.

This led to the decision to build Orbit from the ground up. A system where every colour, component, and spacing decision is defined once in Figma and flows directly into working code, with no interpretation required in between.

Process

The process was built around one constraint: every decision made in Figma had to flow directly into code without any interpretation in between. It started with auditing what existed, defining the token architecture, and locking the foundation before a single component was touched.

With the token structure established, components were designed in Figma with full variants and states, then built live using Claude Code with the Figma MCP connection keeping both sides in sync throughout.

A Strong System Starts With Strong Foundation

Colours

12 palettes, semantic roles, light and dark mode ready.

Colours

12 palettes, semantic roles, light and dark mode ready.

Colours

12 palettes, semantic roles, light and dark mode ready.

Typography

Manrope across six headings and three body sizes, each with a defined role.

Typography

Manrope across six headings and three body sizes, each with a defined role.

Typography

Manrope across six headings and three body sizes, each with a defined role.

Spacing

21-step scale from 0 to 80px, every value named.

Spacing

21-step scale from 0 to 80px, every value named.

Spacing

21-step scale from 0 to 80px, every value named.

Corner Radius

Eleven steps from sharp to full circle, all tokenised.

Corner Radius

Eleven steps from sharp to full circle, all tokenised.

Corner Radius

Eleven steps from sharp to full circle, all tokenised.

Three Tier System.

As the system grew, it became clear that a flat token structure would not scale. Changing one value needed to update predictably everywhere, and theming for light and dark mode needed to work without touching individual components.

That is why Orbit uses a three tier token system.

Three Tier System

That is why Orbit uses a three tier token system.

Seamless Mode Switching with Tokens

Design ↔ Dev Token Pipeline

Design tokens — colours, typography, spacing, corner radius, and shadows — are first defined in Figma Variables across three collections. From there they are exported as JSON, version-controlled via GitHub, and transformed using Style Dictionary into CSS custom properties for the web.

From that point Claude Code takes over. Connected to Figma through the MCP server, it reads component specs directly from the design file and uses the generated CSS variables to build React components. The same token names that exist in Figma exist in the code. No translation. No interpretation.

The result is two live deployments from one repository: the Orbit documentation site and Storybook, both on Vercel, both updating automatically on every push.

Three Tier System

That is why Orbit uses a three tier token system.

What Got Built

10 components, each with a live playground, a usage guide covering when to use it and when not to, and a Storybook story for developers to work with directly.

5 foundation pages covering every visual decision in the system: colour, typography, spacing, corner radius, and shadows.

A How to Use section walking both designers and developers through the setup, the token structure, and how dark mode works.

Impact & Learnings

Orbit is a learning project. The metric that mattered most was simple: could a designer take a system from a Figma token all the way to a live deployed component without handing it off to anyone.

But the bigger output was the shift in thinking.

Tokens are not a Figma feature. They are a shared language between design and code. Documentation is not the last step, it is part of the component. And a designer who can ship is not doing two jobs. They are just closing a gap that should not have existed in the first place.

Live Links

Design System - https://orbit-design-system-eight.vercel.app/
Storybook - https://orbit-storybook.vercel.app/

Created with ❤️ by Moutrisha Chakraborty