Figma to Code Workflow

Introduction

The gap between design and development is where inconsistencies are born. A designer creates a pixel-perfect mockup; a developer interprets it slightly differently. Multiply this across hundreds of screens and the UI diverges from design intent.

A robust Figma-to-code workflow eliminates this gap through shared design tokens, structured naming, and automation that extracts values directly from design files.

This guide covers Figma setup for developer handoff, token extraction, component mapping, and automating the sync.

Key Concepts

Figma Variables as Token Source

json

// Exported from Figma Variables or Tokens Studio
{
  "color": {
    "primitive": {
      "blue-500": { "$value": "#3B82F6", "$type": "color" },
      "gray-900": { "$value": "#111827", "$type": "color" }
    },
    "semantic": {
      "bg-primary": { "$value": "{color.primitive.white}", "$type": "color" },
      "text-primary": { "$value": "{color.primitive.gray-900}", "$type": "color" }
    }
  }
}

Component Mapping

plain

// Figma → Code mapping document
// | Figma Component      | React Component                     |
// |----------------------|-------------------------------------|
// | Button/Primary/SM    | <Button variant="primary" size="sm"> |
// | Card/Default         | <Card>                              |
// | Avatar/Circle/MD     | <Avatar shape="circle" size="md">   |
// | Input/Default        | <Input />                           |

Practical Examples

1. Token Sync Script

typescript

// scripts/sync-figma-tokens.ts
async function syncTokens() {
  const res = await fetch(`https://api.figma.com/v1/files/${FILE_ID}/variables/local`, {
    headers: { 'X-Figma-Token': process.env.FIGMA_TOKEN! },
  });
  const { meta } = await res.json();

  const tokens = {};
  for (const variable of Object.values(meta.variables)) {
    // Transform Figma variable to token format
    tokens[variable.name] = { value: variable.resolvedValue };
  }

  await fs.writeFile('tokens/figma.json', JSON.stringify(tokens, null, 2));
  console.log('Tokens synced from Figma');
}

2. Component Spec Template

markdown

# Button Component Spec

## Figma Link: [View](https://figma.com/file/xxx)

## Tokens Used
- Background: color.action.primary
- Text: color.text.on-action
- Border radius: radius.md (8px)
- Padding: spacing.3 horizontal

## States: Default, Hover, Active, Focus, Disabled, Loading

## Accessibility
- Min touch target: 44x44px
- Focus ring: 2px offset

3. Design Lint Configuration

javascript

// Enforce token usage in Figma
module.exports = {
  rules: {
    'no-hardcoded-colors': 'error',
    'no-hardcoded-spacing': 'warning',
    'text-style-required': 'error',
    'component-naming': { pattern: 'Category/Variant/Size' },
  },
};

Best Practices

✅ Use Figma Variables — they map directly to design tokens
✅ Name Figma components to match code component names and props
✅ Automate token extraction — manual sync drifts immediately
✅ Create component spec documents for complex components
✅ Use Figma Dev Mode for inspecting spacing and tokens
❌ Don't auto-generate production code from Figma — it's always worse
❌ Don't skip the mapping document — assumptions cause inconsistencies

Common Pitfalls

Designers using one-off colors instead of variables — enforce with linting
Token names mismatching between Figma and code — establish naming convention first
Assuming developers check Figma — provide tokens in code
Not including interactive states in designs — developers guess hover and focus

Design Tokens Complete Guide — Token architecture and transformation
Design Handoff Best Practices — Communication processes
Design System Documentation — Documenting the mapping
Building Component Libraries — Implementing from designs