2nd/10_Wiki/Topics/DevOps_and_Security/Figma-to-Code-Workflow.md

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

// 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

// 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

// 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)

// 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)

// .mcp.json
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@figma/mcp-server", "--file", "FILE_KEY"],
      "env": { "FIGMA_TOKEN": "${FIGMA_TOKEN}" }
    }
  }
}

CI: token drift detection

# .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