Design Systems

The promise of Figma-to-code tools is seductive: design a button, export React, ship instantly. Anima, Locofy, Zeroheight, and Penpot's code generator all sell the dream. The reality: you get a 50KB JavaScript export with inline styles, hardcoded hex values, dead CSS, and no type safety. You paste it into your repo, run the build, and then spend six hours refactoring because the generated component won't work with your design system. By the time you've cleaned it up, you've spent more time than hand-coding would have. The dream dies fast.

The winning strategy isn't code generation — it's token sync. Lock your design decisions (colors, spacing, typography, shadows) as Figma Variables in a single source of truth, export them via Tokens Studio to JSON, and consume that JSON in brand.json. Then hand-build your components on shadcn. Your designers stay in Figma, your engineers stay in code, and the bridge between them is a five-minute token sync, not a broken code generator. This is how Aidxn ships production design systems in 2026.

Why Code Generation Fails (And Why It Always Will)

Figma is a design tool. React is a programming language. Bridging them requires solving problems that don't have algorithmic answers. Example: a Figma button with a shadow, a border, and a hover state. Do you export that as a component, an inline style, or a Tailwind class? Do you hardcode the colors or reference CSS variables? Do you assume the consumer has React installed, or should the export be vanilla HTML? Do you ship TypeScript or JavaScript? What about accessibility — do you add ARIA attributes?

Figma doesn't know. So tools like Anima make guesses. They export the shadow as `box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1)` hardcoded into the component. They export the color as `#6366F1` instead of `var(--primary)`. They assume you want React, so they generate JSX with prop drilling that only works if you accept their exact structure. You export a Figma design, get React code, and realize the colors don't match your brand, the styles are inline, and the markup is bloated with unused divs.

Then you refactor. You pull out the inline styles, convert them to Tailwind classes, replace hardcoded colors with CSS variables, add TypeScript, remove dead divs, fix the accessibility. You've now spent three hours regenerating a component that took the tool thirty seconds. And when the designer updates the Figma file? You can't run the export again — you've diverged too far. The sync is one-way, broken, and useless. You're back to copy-pasting by hand.

The Real Solution — Token Sync, Not Code Gen

The working pipeline is boring: get tokens out of Figma, drop them into code, hand-build components. Here's the workflow:

Step 1: Lock tokens in Figma Variables. In Figma, create a Variables library with your design system: primary color, secondary color, spacing scale (8px, 16px, 24px, etc.), typography (font size, line height, weight), shadows, border radius. These aren't components — they're variables. Every button uses the "primary-color" variable, so when marketing says "make the brand color teal", you change one variable and every Figma design updates instantly. No manual recolor. No inconsistency.

Step 2: Export via Tokens Studio (or similar). Tokens Studio (Design Tokens, formerly Figma Tokens) is a Figma plugin that reads your Variables and exports them to JSON. One click: you get a file with all your tokens in a portable format. It looks like this:

{
  "color": {
    "primary": { "value": "#6366F1", "type": "color" },
    "secondary": { "value": "#1E293B", "type": "color" },
    "accent": { "value": "#FCD34D", "type": "color" }
  },
  "spacing": {
    "xs": { "value": "8px", "type": "dimension" },
    "sm": { "value": "16px", "type": "dimension" },
    "md": { "value": "24px", "type": "dimension" }
  }
}

Step 3: Consume in brand.json. In your codebase, save that export as `brand.json` (or vendor it into your CSS variables system). Your components reference the tokens, not hardcoded hex values. When you port the design to a new brand, you swap brand.json, and every component updates. Velocity X does this across HailHero, Staff Operations Dashboard, and Rebuild Relief — same components, different tokens.

Step 4: Hand-build components on shadcn. Don't generate. Design the component in Figma, then code it by hand on top of shadcn/ui. You own the component source, the accessibility is guaranteed by Radix, the styling comes from Tailwind + CSS variables, and the types are TypeScript-strict. When the designer tweaks the Figma button, you make a three-line change to the component. No regeneration needed. No merge conflicts. No refactoring tax.

Three Patterns That Work

Pattern 1: Figma Variables → CSS Custom Properties

Export your Figma Variables directly to CSS custom properties. Your global stylesheet (or Tailwind config) reads the variables:

// globals.css
:root {
  --color-primary: #6366F1;
  --color-secondary: #1E293B;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --font-size-base: 16px;
  --font-size-lg: 20px;
}

// Then in components:
<button style={{ backgroundColor: `var(--color-primary)` }}>
  Click me
</button>

When Tokens Studio exports an update, you paste it into globals.css, commit, and ship. Every component automatically inherits the new values. No rebuild, no regeneration, no sync tool overhead.

Pattern 2: Tokens Studio → brand.json

Larger projects use a typed brand.json. Tokens Studio exports to JSON, you validate it with TypeScript, and your components consume it:

// brand.json
{
  "colors": {
    "primary": "#6366F1",
    "secondary": "#1E293B"
  },
  "spacing": [8, 16, 24, 32, 48, 64]
}

// src/lib/brand.ts
import brand from '../brand.json';

export const getPrimaryColor = () => brand.colors.primary;
export const getSpacing = (index: number) => `${brand.spacing[index]}px`;

Components import from `@/lib/brand`, so when you onboard a new client, you drop in a new brand.json and the entire system rebrands. Used by Aidxn for multi-tenant dashboards.

Pattern 3: Figma Variables → Tailwind Config

Tailwind supports extending the config with custom values. Automate the export:

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
      },
      spacing: {
        xs: 'var(--spacing-xs)',
        sm: 'var(--spacing-sm)',
      }
    }
  }
}

// Use in components:
<button className="bg-primary px-sm py-xs">
  Click me
</button>

Your Figma Variables map to Tailwind utilities, and the CSS custom properties stay in globals.css. One source of truth for both design and code.

When to Hire vs. Automate

The question isn't "should I auto-generate code?" It's "what should I automate, and what should I build by hand?" Here's the matrix:

Automate (token sync): colors, spacing, typography, shadows, border radius, animation timing. These are values, not logic. Export them once, use them forever. Regenerating on every designer update costs five seconds, saves days of manual recolor.

Hand-build (components): buttons, inputs, dialogs, menus, cards. These are logic + styling + accessibility. Figma shows the design; code brings it to life with keyboard nav, focus management, type safety, and ARIA. Automating this step costs more than it saves.

Never automate: business logic, state management, API integration, form validation. No code-gen tool understands your data model or your users.

Example: HailHero redesign. Token sync took four hours (export variables, update brand.json, commit). Component refactoring took two weeks (shadcn upgrade, new button variants, custom form inputs). We didn't regenerate a single React export. We read the Figma design, hand-coded the components, and referenced the tokens. The result: maintainable, typed, accessible, and shipped on time.

Six FAQs

Isn't hand-coding slower than Figma-to-code?

No. Figma-to-code saves hours upfront but costs days in refactoring. Hand-coding a component takes 15 minutes if you use shadcn (primitives are done for you). Refactoring generated code takes three hours. The break-even point is around component five. By component fifty, hand-coding has saved you 150+ hours.

What if the designer and engineer disagree on the implementation?

You have Figma as the spec and code as the executable. The designer says "button should be X", the engineer codes it, and Figma is the proof. No generated code between them, no interpretation errors. The designer can inspect the live site and say "I want the shadow slightly darker" — engineer makes a one-line change. Done.

Does Tokens Studio work with all design tools?

Tokens Studio is a Figma plugin, so it lives in Figma. For other tools, check whether they export Variables natively (Penpot does, Sketch doesn't). Or use the JSON export, parse it yourself, and load it into brand.json. Most of the major tools support some form of token export now.

How do I keep brand.json in sync if the designer forgets to export?

Make it part of the design handoff checklist. "Here's the Figma file, here's the Tokens Studio export, here's the updated brand.json." Or automate it: use Tokens Studio's CI/CD integration to auto-export on a schedule and open a PR. Five-minute setup, saves weekly sync calls.

Should I use a code-gen tool for ONE-OFF designs?

Maybe, if the one-off is truly isolated and you'll never touch it again. But most "one-offs" become the foundation for the next feature. Build it with tokens and hand-coded components, and you've built a foundation that scales. It takes 20 minutes longer than code-gen, but saves 10 hours later.

What about animated components? Figma handles motion better than code.

Figma shows the motion; Framer Motion (or GSAP) codes it. Export the token (animation timing, easing), hand-code the component with Framer Motion, and you've got animated components that are fully maintainable and can respond to user input. Figma is for design, code is for interaction. Don't let code-gen try to bridge them.

The Bottom Line

Figma-to-code tools are a trap. They're fast at first, costly at scale. The real pipeline is tokens + hand-building. Lock your design tokens (colors, spacing, typography, shadows) in Figma Variables, export them via Tokens Studio to a portable JSON format, consume them in brand.json, and hand-build your components on shadcn. Your designer stays in Figma, your engineer stays in code, and the gap between them is a five-minute sync, not a broken code generator. Scale from V0 to V100 with a design system that's actually maintainable. For the full pattern, see how we build production design systems with shadcn and Radix, then ship across multiple brands from a single codebase.