Chapter 04 — Figma to Code | The Designer Who Codes

Design and code are closer than you think

Here's something that would have saved a lot of designers a lot of time: the gap between Figma and CSS is almost nothing. The concepts are nearly identical. Once you see the mapping, you start designing in a way that makes code almost write itself.

Auto Layout in Figma? That's Flexbox. Figma Variables? Those are CSS variables. Figma components with variants? Those are code components with props. The tools look different, but the underlying thinking is the same. This is not a coincidence — Figma was built with the web's model in mind.

🎯 The big insight

You've been thinking in code without knowing it

Every time you used Auto Layout in Figma, you were doing Flexbox. Every time you created a component with variants, you were designing a component with props. The vocabulary is different, but the model is the same. This chapter makes the mapping explicit — and once you see it, you can't unsee it.

Auto Layout = Flexbox

Auto Layout in Figma is Figma's implementation of the same layout system that browsers use (Flexbox). They're not just similar — they're based on the same ideas.

/* FIGMA Auto Layout setting   →   CSS equivalent */

Direction: Horizontal          →   flex-direction: row
Direction: Vertical            →   flex-direction: column

Gap: 16                        →   gap: 16px

Padding: 12 24 (top/bottom left/right) → padding: 12px 24px

Align items: Center            →   align-items: center
Align items: Start             →   align-items: flex-start
Align items: End               →   align-items: flex-end

Justify: Space between         →   justify-content: space-between
Justify: Center                →   justify-content: center

Fill container                 →   flex: 1  (or width: 100%)
Hug contents                   →   (default — no width needed)

Next time you're in Figma setting up Auto Layout, consciously think about what the CSS would be. You'll get better at both simultaneously. And when Claude generates your CSS, you'll immediately recognize the layout properties because you set them in Figma.

Figma Dev Mode — your values, ready to copy

Figma has a mode called Dev Mode that switches the interface from design-focused to handoff-focused. When you select an element in Dev Mode, Figma shows you all the values a developer needs: exact pixel sizes, color hex codes, font names and weights, spacing values.

To access Dev Mode: look for the Dev Mode toggle in the top-right corner of Figma (it looks like </>). On the free plan, you can view Dev Mode information but may have limitations on inspecting certain components.

What Dev Mode shows you:

Sizes and positions — width, height, x and y position on the canvas
Colors — the exact hex or RGB value of any fill, border, or text color
Typography — font family, font size, font weight, line height, letter spacing
Spacing — padding values and gaps from Auto Layout
CSS code — Figma can generate approximate CSS for the selected element

💡 How to use this with Claude

Copy values from Dev Mode, paste into your prompt

Select your button in Figma's Dev Mode. Note the background color, padding values, border-radius, font size, and font weight. Paste those exact numbers into your Claude prompt: "Build a button with background #f5e642, padding 12px 24px, border-radius 6px, font Inter 700, font-size 15px." The more specific your values, the closer the code will match your design.

Design tokens — naming your values in Figma

If your button color is stored as a raw hex value (#f5e642), you have to hunt for it every time you use it. If it's a named color style called "Action / Primary," you can find it instantly, use it everywhere, and update it in one place when the brand changes.

In Figma, you create Color Styles (free) or Variables (paid) to name your values. This is the design-side equivalent of CSS variables (Chapter 06 goes deep on this). The connection: your Figma style named "Action / Primary" should have a matching CSS variable named --color-action-primary. Same concept, two tools.

To create a Color Style in Figma: select a layer with a color fill → in the right panel next to "Fill," click the 4-dot grid icon → "+ Create style" → give it a meaningful name.

What developers actually need from your handoff

A beautiful Figma file alone is not a complete handoff. Developers often get handed a file that shows the "happy path" — everything working perfectly, real data, good content. Then they hit reality: what does this look like on mobile? What happens when the user's name is 47 characters long? What's the empty state when there are no results?

A great handoff includes:

All states — default, hover, active, focused, disabled, loading, error, success. Every interactive element needs all of these designed.
All screen sizes — at minimum: mobile (390px), tablet (768px), desktop (1280px+). Use Figma frames at these sizes.
Edge cases — what happens with a very long name? An empty state (no items, no data)? A list with 1 item vs. 100 items?
Interaction notes — what happens when you click this button? What animates, what appears, what changes state?
Named styles — colors and text styles should be named, not raw values. Developers can work from names in a design system.

⚠️ The biggest handoff mistake

Only designing the "happy path"

If you only design what everything looks like when it works perfectly — and don't design loading states, error states, and empty states — a developer will invent those states. They'll usually do it quickly, without much thought about UX, and it usually looks bad. Designing every state is your job. It's also one of the most valuable things you can do for the final product.

Components in Figma = Components in code

In Figma, when you make something a Component (Cmd + Alt + K), you create a reusable element that can be placed anywhere. In code, components work the same way — a developer builds a Button once and uses it everywhere.

The mapping gets more precise with Variants. In Figma, a Button might have variants for Size (Small, Medium, Large) and State (Default, Hover, Disabled). In code, those variants become "props" — properties you pass to the component to change how it looks or behaves.

When your Figma variants match how a developer thinks about the component, the handoff becomes almost automatic. The developer doesn't need to guess what states exist — they're all there in your file. Chapter 10 goes much deeper on this way of thinking.

You need: Figma (free account — figma.com) VS Code Chrome

1

Open Figma and create a new file. Design a button component with 3 variants: Default (yellow background #f5e642, dark text), Hover (slightly lighter yellow, still dark text), Disabled (grey background #333, grey text #666). Use Auto Layout for all three — set the padding to 12px top/bottom, 24px left/right.
2

Select your Default button. Open Dev Mode (the </> icon in the top right). Write down: the hex color, padding values, border-radius, font size, font weight, and font name. These are the values you'll use in code.
3

Open VS Code. Create a file called button.html. Ask Claude: "Write a single HTML file with a button styled with these exact values from Figma: background #f5e642, padding 12px 24px, border-radius 6px, font Inter 700 15px, dark text (#0a0a0a). Include a hover state that lightens the yellow slightly. Also include a disabled state with grey background (#333) and grey text (#666). Show all 3 versions on the page."
4

Open the file in Chrome. Compare the result to your Figma design. Are the values matching? If something looks off, adjust the CSS values manually until they match — this is a direct exercise in reading and tweaking CSS.
5

Reflect: Notice how the Auto Layout padding in Figma (12, 24) became padding: 12px 24px in CSS. The same numbers, the same concept. This direct mapping is what makes being a designer who codes so powerful.

✦ Own your code

Can you explain every line?

Before moving on: pick any 5 lines from the code above and say out loud what each one does. Not the general idea — the specific line. If Claude ever gives you code like this, hold it to this standard before you use it. If you cannot explain a line, you cannot debug it.

Key takeaways

Auto Layout in Figma maps directly to Flexbox in CSS — direction, gap, padding, alignment are the same concepts
Figma Dev Mode shows you the exact values (colors, spacing, fonts) that go into code
A complete handoff includes all states, all screen sizes, edge cases, and interaction notes
Name your Figma colors and text styles — raw hex values are much harder to work with than named tokens
Figma component variants = code component props — align them intentionally for smoother collaboration