Figma to React Workflow: Variables, Auto Layout, Code Export

Figma to React Is Still Broken for Most Teams

Honestly, the Figma-to-React handoff is still a mess for most dev teams — even in 2026. Design says "just inspect it," engineering says "the spacing is off," and somewhere in between you lose two hours arguing about whether that gap is 8px or 12px.

The good news is Figma Variables (stable since late 2023, widely adopted by 2025) combined with a disciplined Auto Layout strategy can cut that friction by a lot. Not eliminate it. But a lot.

This guide walks through the workflow we actually use — from setting up Variables in Figma, to exporting tokens, to wiring them into Tailwind v4.0.2 with CSS custom properties. No magic plugins that half-work. Just the boring stuff that actually sticks.

Figma Variables vs Styles: What You Should Actually Be Using

Figma Styles (color styles, text styles) are the old way. They work, but they don't map cleanly to the CSS custom property model that modern React + Tailwind projects use. Variables do. A Variable in Figma is essentially a named token with a value — exactly like --color-primary: #6366f1 in your CSS.

You can create Variables in the "Local Variables" panel. Group them by type: color/brand/primary, spacing/base, radius/card. That slash-delimited naming convention matters because it's what most token export tools (like Tokens Studio or the built-in REST API) will use to generate nested token objects.

The other thing Variables give you that Styles don't: modes. One collection can have a Light mode and a Dark mode, and switching at the frame level instantly swaps every bound token. If you've been building a theme toggle in React and wondering why your Figma source of truth keeps drifting from production, Variables with modes is the answer.

Setting Up Auto Layout for Clean React Component Mapping

Auto Layout in Figma is the design-side equivalent of CSS Flexbox. If your designer is still using absolute positioning for internal component spacing, push them toward Auto Layout — every frame becomes a flexbox container you can read with confidence.

The values that matter most for developers: direction (row vs column), gap (the gap property in Tailwind, e.g. gap-2 = 8px gap), padding, and alignment. When a frame has Auto Layout with horizontal direction, 16px padding on all sides, and 8px gap between children, you can translate that directly to flex flex-row gap-2 p-4 without guessing.

The trap is nested Auto Layout frames. Three layers deep and the Inspect panel becomes an archaeology project. The rule we follow: if a frame has Auto Layout, name it with what it maps to — CardBody (flex-col gap-3), ButtonGroup (flex-row gap-2 items-center). Verbose, yes. Helpful when someone else touches it six months later, absolutely.

Exporting Design Tokens from Figma Variables

The Figma REST API exposes Variables via /v1/files/{key}/variables/local. You can poll this endpoint, transform the output, and write a JSON token file automatically in CI. That's the ideal setup for large teams. For smaller projects, the Tokens Studio plugin (free tier is fine) exports a tokens.json that you can pipe through Style Dictionary.

Here's a minimal Style Dictionary config that takes Figma-exported tokens and produces both a CSS custom properties file and a Tailwind-compatible JS object:

// style-dictionary.config.js
const StyleDictionary = require('style-dictionary');

module.exports = {
  source: ['tokens/tokens.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      prefix: 'empire',
      buildPath: 'src/styles/',
      files: [
        {
          destination: 'tokens.css',
          format: 'css/variables',
          options: { outputReferences: true },
        },
      ],
    },
    js: {
      transformGroup: 'js',
      buildPath: 'src/tokens/',
      files: [
        {
          destination: 'tokens.js',
          format: 'javascript/es6',
        },
      ],
    },
  },
};

Run style-dictionary build and you get tokens.css with --empire-color-brand-primary: #6366f1 and a JS object you can spread into tailwind.config.js under theme.extend. The output stays in sync with Figma as long as someone remembers to re-export before a sprint — which is the actual weak link in the chain, not the tooling.

Writing React Components That Respect the Token Layer

Once your tokens are in Tailwind, the component side is straightforward. The mistake most devs make is reaching for hardcoded values (bg-indigo-500) when the token class exists (bg-brand-primary). Six months later you change the brand color in Figma, regenerate tokens, and half your components don't update because someone hardcoded it.

Here's a button component written against the token layer, using Tailwind v4.0.2 class names generated from a Style Dictionary output:

// components/Button.tsx
import { cn } from '@/lib/utils';

type ButtonProps = {
  variant?: 'primary' | 'ghost';
  size?: 'sm' | 'md';
  children: React.ReactNode;
  className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export function Button({
  variant = 'primary',
  size = 'md',
  children,
  className,
  ...props
}: ButtonProps) {
  return (
    <button
      className={cn(
        // base
        'inline-flex items-center justify-center font-medium rounded-[var(--empire-radius-button)] transition-colors',
        // size
        size === 'sm' && 'h-8 px-3 text-sm gap-1.5',
        size === 'md' && 'h-10 px-4 text-sm gap-2',
        // variant
        variant === 'primary' &&
          'bg-[var(--empire-color-brand-primary)] text-white hover:opacity-90',
        variant === 'ghost' &&
          'bg-transparent text-[var(--empire-color-brand-primary)] hover:bg-[rgba(99,102,241,0.08)]',
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
}

The var(--empire-radius-button) reference means if the design team rounds the button from 6px to 8px in Figma and re-exports, your CSS updates and every component picks it up without a code change. That's the whole point of the token layer.

Figma Dev Mode Code Export: What's Worth Using

Figma's Dev Mode (the feature with the </> icon, available on paid plans) generates code snippets when you click a layer. It's fine for a quick sanity check on spacing values. It's not a replacement for writing components by hand.

What it gets right: pixel values, font sizes, line heights, border radii. What it gets wrong: it has no concept of your token layer, it often generates inline styles instead of classes, and the React output is essentially just div soup with no component structure. Use it to confirm a value, not to ship code.

The one Figma-to-code path that does work well is the combination of Variables + a plugin like Figma to Tailwind that reads your actual Variable collection and maps values to Tailwind class names. If your token names match your Tailwind config keys exactly, you'll get output like bg-brand-primary gap-2 rounded-card instead of background-color: #6366f1; gap: 8px;. Worth the setup time.

Handling Shadows, Gradients, and Glassmorphism Effects

Shadows and gradients are where most Figma handoffs fall apart. Figma shows you Drop Shadow: 0 4px 24px rgba(0,0,0,0.12) and you have to decide if that's shadow-md in Tailwind, a custom shadow token, or a hardcoded box-shadow property. Usually it's none of the above — it's something in between that your designer tweaked until it looked right on their Retina display.

Our approach: treat shadows and gradients as tokens too. In Figma Variables, you can't store a full box-shadow string as a variable (yet), but you can store the offset, blur, spread, and color separately as number/color variables and reference them in an Effect Style. Export those effect styles through the REST API or a plugin, then define them as CSS custom properties. Tools like our Tailwind shadows generator or the box shadow CSS guide can help you find the right values to anchor on.

For glassmorphism effects — backdrop-filter: blur(12px) plus background: rgba(255,255,255,0.15) — Figma renders them visually but the Inspect panel outputs the values inconsistently. Lock down your glass values as Variables (--empire-glass-bg: rgba(255,255,255,0.15), --empire-glass-blur: 12px) and reference them consistently. If you need a starting point, our gradient generator produces ready-to-paste CSS for layered gradient backgrounds that pair well with glass components.

Keeping Figma and Code in Sync Over Time

The hardest part of any Figma-to-React workflow isn't the initial setup. It's week eight, when the designer updates the spacing scale from 4px base to 5px base, and nobody updates the token export, and gap-2 in Tailwind no longer means what it does in Figma. Does this sound familiar?

The only real fix is automation. Add a GitHub Action that runs the Style Dictionary build step whenever your tokens.json file changes. If you're using Tokens Studio, it can push the JSON file directly to a branch on every publish. From there, a PR is opened automatically — someone reviews it, merges it, and the token changes land in production. No manual step, no drift.

What about component drift — where a component in code diverges from its Figma counterpart in ways the token layer doesn't capture? That's a people problem more than a tools problem. Visual regression testing (screenshot diffs in CI) catches it mechanically. Periodic design-dev syncs catch it socially. You need both. Pick a cadence, stick to it, and accept that some drift is inevitable in any fast-moving product.

FAQ

Read next