Orbit Design System: From Figma to Live
From Figma tokens to live React components, what actually happened when a designer learned to ship
Role
UX/UI Designer
Industry
Figma, Claude Code, React, TypeScript, Tailwind CSS, Vercel
Duration
1 week
Why Shipping a Design System Needed?
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.
Claude Code made it possible. Orbit is not a design system built because there was a problem. It is one built because I wanted to see how far a designer could go when the tools finally let them go all the way.
Started With the Foundation
Before any component was designed, the building blocks needed to exist.
Three layers of tokens were set up in Figma:
Base tokens are the raw ingredients. Every colour in every shade. The font. The spacing numbers. Just a complete pantry of values with no opinions attached.
Semantic tokens give those ingredients a job. A dark grey stops being a dark grey and becomes the colour for primary text. White becomes the default background. Values get names that describe what they do, not what they look like.
Component tokens are the final layer. Each component owns its own slice. The Button knows its background. The Input knows its border when focused. Everything traces back to the layers above.
Why this matters: when dark mode flips, only the semantic layer changes. One update and everything adapts. No hunting through files. No fixing components one by one.
From Figma to Code, With Claude Code
The Figma file was ready. Now came the part I had never done before.
First, I connected the Figma MCP server to Claude Code. This meant Claude could read the design file directly. Token values, component specs, spacing, sizing. No manual copy pasting. Claude could just see what I had designed.
Then I gave Claude a skills file. A briefing document describing the project structure, the tech stack, and the rules for how everything should be built. Before writing a single component, Claude knew exactly what system it was building into.
From there the build started. Token pipeline first, converting the Figma token files into CSS custom properties. Then the app shell, the landing page, the foundations pages, and then the components one by one.
The problems were real. Node modules committed from Windows broke the Vercel deployment entirely. TypeScript errors blocked the production build. Each one solved in the same place it was caught, inside Claude Code, in the same conversation.
That was the whole point.
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.
And dark mode across everything, out of the box.
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.
The answer was yes. 10 components. A three layer token architecture. A documentation site and Storybook both live on Vercel, auto deploying on every push.
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/