Files

T

Antigravity Agent f8b21af4be Wiki cleanup: error-doc removal, dedup merge, link normalization

10_Wiki/Topics 대규모 정리:
- 오류 캡처/미완성 stub 문서 227개 제거
- 교차폴더 중복 43클러스터 병합 (63파일 → redirect)
- 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건
- 카테고리 MOC 6개 신규 생성
- Graph 섹션 미해결 related-keyword 링크 10,058건 제거

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-20 23:52:15 +09:00

5.1 KiB

Raw Blame History

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

title

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 단계

Design: Figma Variables (color, spacing, typography).
Export: Figma API or Tokens Studio plugin → JSON.
Transform: Style Dictionary → CSS vars + TS types.
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.

매 응용

Multi-brand theming: tokens swap → 매 component 의 unchanged.
Dark mode: light/dark variable mode toggle.
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 · Large_Frontend_Projects
변형: Design Tokens
응용: Storybook · Component Library
Adjacent: CSS_Architecture_and_Styling · 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

5.1 KiB Raw Blame History