docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를 Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류. - 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로 자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거, 동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거. - 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming, Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business, Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로, 나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는 title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백). 원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지. - 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서. - 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는 지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지. - Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경. - 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,183 @@
|
||||
---
|
||||
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]] · [[Large_Frontend_Projects|Frontend Architecture]]
|
||||
- 변형: [[Design Tokens]]
|
||||
- 응용: [[Storybook]] · [[Component Library]]
|
||||
- Adjacent: [[CSS_Architecture_and_Styling|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 |
|
||||
Reference in New Issue
Block a user