Figma to Code
You already know how to design. This guide shows you how to take what you’ve built in Figma and turn it into working software — without writing code yourself.
The workflow is simple: design, extract your specs, hand them to Claude, and iterate. It’s the same back-and-forth you’d have with a developer, except Claude responds in seconds.
Step 1: Design in Figma
Design your screen or component in Figma the way you normally would. There’s nothing special to do differently — but a few habits will make the handoff smoother:
- Name your layers. Claude doesn’t see your Figma file directly, but when you describe your layout, named layers help you communicate clearly. “The
hero-sectionframe has aheadlineand acta-button” is easier to work with than “the big box at the top.” - Use auto layout. It maps naturally to how code handles layout (flexbox, stacks), so your design will translate more accurately.
- Don’t stress about pixel perfection. A rough layout with correct spacing, colors, and hierarchy is enough. You’ll refine in code, which is faster than you think.
Step 2: Extract Your Design Tokens
Open Figma’s Inspect panel (or Dev Mode if you have it) and pull out the values that define your design’s character:
- Colors — hex codes for backgrounds, text, accents, borders
- Typography — font families, sizes, weights, line heights
- Spacing — padding, margins, gaps between elements
- Details — border radius, shadows, specific dimensions that matter
You don’t need every value. Focus on the ones that make your design look like your design. The accent color matters. The exact width of a divider probably doesn’t.
If you use Tokens Studio or a similar Figma plugin, you can export tokens in a structured format — which makes this step even faster.
Step 3: Share Your Specs with Claude
Give Claude your design tokens in plain language. Structure helps, but you don’t need a formal spec — just be clear about what matters.
Here’s an example prompt:
Build this layout. Here are my design specs:
Colors:
- Background: #1A1A2E
- Card background: #16213E
- Accent: #0F3460
- Text: #E4E4E4
Typography:
- Headings: Inter, 24px, semibold
- Body: Inter, 16px, regular
Spacing:
- Card padding: 24px
- Gap between cards: 16px
- Page margins: 48px
The layout is a grid of cards, 3 columns on desktop,
single column on mobile. Each card has a title, description,
and a small icon in the top right.The more specific you are about values, the closer Claude gets on the first pass. Vague descriptions like “some padding” lead to guesswork. Exact numbers like “24px padding” lead to accuracy.
Step 4: Share Screenshots
You can paste screenshots directly into Claude Code. This is powerful — Claude can look at your Figma design and match the overall feel, layout proportions, and visual hierarchy.
The best workflow combines both approaches:
- Specs give Claude precision — exact colors, sizes, spacing
- Screenshots give Claude context — the overall composition and feel
Share both. Paste your screenshot and include your design tokens in the same prompt. Claude uses the image to understand what you’re going for and the specs to get the details right.
Step 5: Iterate
Claude’s first output will be close, but rarely perfect. That’s expected — and this is where your design eye matters most.
Compare the output to your design and call out specific differences:
- “The card corners should be more rounded — use 12px border radius”
- “The spacing between the title and description is too tight — should be 12px”
- “The accent color is right but it needs to be used on the button background, not the border”
Be direct and specific. This is the same design review process you’d do with a developer — you’re just doing it faster because Claude can make the change and show you the result in seconds instead of waiting for the next sprint.
Keep going until it matches. Two or three rounds usually gets you there.
Where to Go Next
Once you have your designs translating into code, you’ll want to systematize the process:
- Theming — Turn your one-off design tokens into a reusable theme system so every screen stays consistent automatically.
- Responsive Design — Handle how your layouts adapt across screen sizes, from the phone in your pocket to a wide desktop monitor.
The goal isn’t just to build one screen from Figma. It’s to build a workflow where your designs and your code stay in sync — and where shipping the next screen is faster than the last one.