Skip to content
Back to Build Tutorials

Figma to Code

Convert Figma frames into React components without losing the design intent.

Why

The gap between a Figma file and shipped code is where design details die — spacing gets rounded to the nearest 4px, hover states are forgotten, and responsive behavior is guessed. A disciplined figma-to-code pipeline preserves the designer's intent by using the same tokens (color, spacing, radius) in both worlds, so a design change is a token change that propagates to code automatically. Without this, every component is a lossy translation that drifts further from the design with each PR, and designers stop trusting the product. The goal is not auto-generating code from Figma (that produces unmaintainable output) but making the handoff a mechanical, reviewable step.

When

When a designer hands off the first screen. Takes 1-2 h to set up the token bridge. Skip for developer-designed internal tools.

How

1. Install the Figma Dev Mode / Figma Tokens plugin and export tokens as JSON
   - Map Figma styles to CSS custom properties or Tailwind config
   - Use Style Dictionary or token-transformer to convert to your format

2. Establish a component mapping: Figma component → React component
   - Document in a shared spreadsheet or Figma page: "Button" → <Button>
   - Name Figma components with the same name as the React component

3. Copy structure from Figma Dev Mode, then refactor to your components
   - Dev Mode gives you the layout (flex, gap, padding) — paste as a starting point
   - Replace raw divs with your design-system components (Button, Card, Input)

4. Verify in a side-by-side: Figma in one window, Storybook in the other
   - Pixel-diff the spacing, color, and typography; fix discrepancies
   - Use the Figma "Dev Mode" measurements, not eyeballing

5. Add a visual regression test (Chromatic, Percy) to catch drift
   - Snapshot the component in Storybook; CI fails if it changes without a PR

Example

// tokens.json (from Figma Tokens plugin)
{ "color": { "primary": { "500": "#6366f1" } }, "spacing": { "4": "1rem" } }

// tailwind.config.ts — tokens flow into Tailwind
import tokens from "./tokens.json";
export default {
  theme: {
    extend: {
      colors: { spark: { 500: tokens.color.primary[500] } },
      spacing: { 4: tokens.spacing[4] },
    },
  },
};

// Component — uses tokens, not hardcoded values
export function Button({ children }: { children: React.ReactNode }) {
  return <button className="bg-spark-500 px-4 py-2 rounded-lg text-white">{children}</button>;
}

Common Problems

  • ⚠Hardcoding hex values from Figma instead of using tokens, so a brand color change requires editing 200 files.
  • ⚠Eyeballing spacing instead of using Figma's measurements, so everything is off by 1-2px and looks 'almost right'.
  • ⚠Building auto-layout from scratch instead of copying Figma's flex properties, so responsive behavior differs.
  • ⚠No visual regression test, so a refactor 'accidentally' changes the button radius and nobody notices for a month.

Best Practices

  • ✓Keep a single source of truth for tokens (Figma or a tokens.json), and generate all other formats from it.
  • ✓Use Figma's Dev Mode MCP server in your IDE to pull measurements without context-switching.
  • ✓Review design-to-code PRs with the designer present — they catch intent loss that a dev reviewer misses.
  • ✓Snapshot every component variant in Storybook so the visual regression covers all states, not just default.