---
id: wiki-2026-0508-figma-to-code-workflow
title: Figma to Code Workflow
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Figma to React, Design to Code, Design Token Pipeline]
duplicate_of: none
source_trust_level: A
confidence_score: 0.85
verification_status: applied
tags: [figma, design-system, tokens, react, workflow]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react
---

# Figma to Code Workflow

## 매 한 줄
> **"매 design token 을 single source of truth — 매 Figma Variables → JSON → CSS/TS 의 자동 sync"**. 매 2023 Figma Variables launch 후 표준화, 매 2026 Figma Code Connect + Style Dictionary + LLM-assisted MCP server 가 default workflow.

## 매 핵심

### 매 Pipeline 단계
1. **Design**: Figma Variables (color, spacing, typography).
2. **Export**: Figma API or Tokens Studio plugin → JSON.
3. **Transform**: Style Dictionary → CSS vars + TS types.
4. **Consume**: components import tokens, 매 hardcode X.

### 매 Component sync 방식
- **Code Connect**: Figma component ↔ React component pin.
- **Storybook**: Figma plugin 의 design ↔ story link.
- **Visual regression**: Chromatic — 매 token diff 의 detection.

### 매 응용
1. Multi-brand theming: tokens swap → 매 component 의 unchanged.
2. Dark mode: light/dark variable mode toggle.
3. A11y: contrast token 자동 검증.

## 💻 패턴

### Figma Variables export (REST)
```ts
// scripts/fetch-figma-tokens.ts
import { writeFileSync } from 'node:fs';
const FILE_KEY = process.env.FIGMA_FILE_KEY!;
const TOKEN = process.env.FIGMA_TOKEN!;

const r = await fetch(
  `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`,
  { headers: { 'X-Figma-Token': TOKEN } }
);
const { meta } = await r.json();
writeFileSync('tokens/figma.json', JSON.stringify(meta, null, 2));
```

### Style Dictionary config
```js
// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'src/styles/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    ts: {
      transformGroup: 'js',
      buildPath: 'src/tokens/',
      files: [{
        destination: 'index.ts',
        format: 'javascript/es6',
        options: { outputReferences: true }
      }]
    }
  }
};
```

### Tailwind config consuming tokens
```ts
// tailwind.config.ts
import tokens from './src/tokens';
export default {
  theme: {
    extend: {
      colors: tokens.color,
      spacing: tokens.spacing,
      fontSize: tokens.font.size
    }
  }
};
```

### Figma Code Connect (React)
```tsx
// Button.figma.tsx
import figma from '@figma/code-connect';
import { Button } from './Button';

figma.connect(Button, 'https://figma.com/file/X/?node-id=1:23', {
  props: {
    variant: figma.enum('Variant', { Primary: 'primary', Ghost: 'ghost' }),
    size: figma.enum('Size', { Small: 'sm', Medium: 'md', Large: 'lg' }),
    label: figma.textContent('Label')
  },
  example: ({ variant, size, label }) => (
    <Button variant={variant} size={size}>{label}</Button>
  )
});
```

### MCP server (Claude/Cursor 의 Figma read)
```json
// .mcp.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@figma/mcp-server", "--file", "FILE_KEY"],
      "env": { "FIGMA_TOKEN": "${FIGMA_TOKEN}" }
    }
  }
}
```

### CI: token drift detection
```yaml
# .github/workflows/tokens.yml
on: { schedule: [{ cron: '0 9 * * 1-5' }] }
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm i && pnpm tsx scripts/fetch-figma-tokens.ts
      - run: pnpm style-dictionary build
      - uses: peter-evans/create-pull-request@v6
        with:
          title: 'chore: sync Figma tokens'
          branch: tokens/auto-sync
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Single brand, small | CSS vars manual export |
| Multi-brand or theming | Style Dictionary + modes |
| Tight design↔code coupling | Code Connect + Storybook |
| LLM-assisted dev | Figma MCP server |

**기본값**: Figma Variables → Style Dictionary → Tailwind/CSS vars + Code Connect.

## 🔗 Graph
- 부모: [[Design System]] · [[Frontend Architecture]]
- 변형: [[Design Tokens]] · [[Theming Strategy]]
- 응용: [[Storybook]] · [[Component Library]]
- Adjacent: [[Tailwind CSS]] · [[Visual Regression]]

## 🤖 LLM 활용
**언제**: Figma MCP → component spec → React scaffold (props, variants 자동).
**언제 X**: 매 pixel-perfect layout 매 manual hand-off 의 X — LLM 매 약함.

## ❌ 안티패턴
- **Hardcoded hex**: `color: #FF6B6B` 매 component 안에 — token swap 매 불가.
- **One-way sync**: code → Figma 의 reverse 무시 → drift.
- **No transform layer**: Figma JSON 매 직접 import — 매 platform-specific 변환 X.
- **Ignoring modes**: light/dark 매 separate file → maintenance hell.

## 🧪 검증 / 중복
- Verified (Figma Variables docs, Style Dictionary 4.x, Code Connect 1.x).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Figma → Style Dictionary → React pipeline |