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 폴더 제거.
2026-07-05 00:33:48 +09:00
parent 1cfd3bbb56
commit 9148c358d0
6455 changed files with 1 additions and 86875 deletions
@@ -0,0 +1,262 @@
+---
+id: wiki-2026-0508-figma-integration
+title: Figma Integration
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Figma API, Figma plugin, design tokens, Figma to code, Dev Mode, AI Figma]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.94
+verification_status: applied
+tags: [figma, design-system, design-tokens, plugin, dev-mode, ai-design]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: TypeScript / JavaScript
+  framework: Figma Plugin API / REST API / Dev Mode
+---
+
+# Figma Integration
+
+## 매 한 줄
+> **"매 Figma 의 의 의 design 의 code / system 의 connect"**. 매 REST API + 매 Plugin API + 매 Dev Mode + 매 Variables (design tokens). 매 modern: 매 AI 매 (Anima, Builder.io, Locofy) figma → React.
+
+## 매 핵심
+
+### 매 API surface
+- **REST**: 매 read file structure.
+- **Plugin API**: 매 in-Figma scripting.
+- **Webhook**: 매 file 의 변화 의 react.
+- **Variables API** (2024+): 매 design tokens.
+- **Dev Mode**: 매 inspection + token reference.
+
+### 매 응용
+1. **Design tokens**: 매 Figma → CSS / Tailwind.
+2. **Code generation**: 매 React / SwiftUI.
+3. **Documentation**: 매 component → Storybook.
+4. **Localization**: 매 string export.
+5. **Asset export**: 매 SVG / PNG / icons.
+6. **AI prompt**: 매 design → spec.
+
+### 매 modern AI tool
+- **Anima**: 매 figma → React/Vue.
+- **Builder.io Visual Copilot**: 매 figma + AI.
+- **Locofy.ai**.
+- **FigJam AI**.
+- **Magic Patterns**: 매 design → component.
+
+## 💻 패턴
+
+### REST API (read file)
+```typescript
+async function getFigmaFile(fileKey: string, token: string) {
+  const r = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
+    headers: { 'X-Figma-Token': token },
+  });
+  return r.json();
+}
+```
+
+### Variables API (design tokens)
+```typescript
+async function getVariables(fileKey: string, token: string) {
+  const r = await fetch(`https://api.figma.com/v1/files/${fileKey}/variables/local`, {
+    headers: { 'X-Figma-Token': token },
+  });
+  return r.json();
+}
+
+// 매 transform → CSS variables
+function variablesToCss(variables: any[]): string {
+  return variables.map(v => `--${v.name}: ${v.value};`).join('\n');
+}
+```
+
+### Plugin (TS, manifest.json)
+```json
+{
+  "name": "Token Sync",
+  "id": "1234",
+  "api": "1.0.0",
+  "main": "code.js",
+  "ui": "ui.html",
+  "editorType": ["figma"]
+}
+```
+
+### Plugin script (sync tokens)
+```typescript
+// 매 code.ts
+figma.showUI(__html__, { width: 320, height: 480 });
+
+figma.ui.onmessage = async msg => {
+  if (msg.type === 'export-tokens') {
+    const collections = await figma.variables.getLocalVariableCollectionsAsync();
+    const tokens: any = {};
+    for (const c of collections) {
+      tokens[c.name] = {};
+      for (const id of c.variableIds) {
+        const v = await figma.variables.getVariableByIdAsync(id);
+        tokens[c.name][v.name] = v.valuesByMode;
+      }
+    }
+    figma.ui.postMessage({ type: 'tokens', data: tokens });
+  }
+};
+```
+
+### Token JSON (design tokens W3C)
+```json
+{
+  "color": {
+    "primary": { "$value": "#3b82f6", "$type": "color" },
+    "danger": { "$value": "#ef4444", "$type": "color" }
+  },
+  "spacing": {
+    "sm": { "$value": "8px", "$type": "dimension" },
+    "md": { "$value": "16px", "$type": "dimension" }
+  }
+}
+```
+
+### Style Dictionary (Amazon)
+```javascript
+// 매 figma → JSON → all platforms
+const StyleDictionary = require('style-dictionary').extend({
+  source: ['tokens.json'],
+  platforms: {
+    css: { transformGroup: 'css', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
+    ios: { transformGroup: 'ios-swift', files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }] },
+    android: { transformGroup: 'android', files: [{ destination: 'colors.xml', format: 'android/colors' }] },
+  },
+});
+StyleDictionary.buildAllPlatforms();
+```
+
+### Figma to React (Anima-style)
+```python
+def figma_to_react(figma_node):
+    """매 simplified."""
+    if figma_node.type == 'FRAME':
+        return f"<div style={{{node_to_style(figma_node)}}}>{children_jsx(figma_node)}</div>"
+    if figma_node.type == 'TEXT':
+        return f"<span>{figma_node.characters}</span>"
+    # ...
+```
+
+### Webhook (file update)
+```typescript
+app.post('/figma-webhook', (req, res) => {
+  const { event_type, file_key } = req.body;
+  if (event_type === 'FILE_VERSION_UPDATE') {
+    syncTokens(file_key);
+  }
+  res.sendStatus(200);
+});
+```
+
+### Dev Mode plugin (code connect)
+```typescript
+import { figma } from '@figma/code-connect';
+import { Button } from './Button';
+
+figma.connect(Button, '<figma-component-url>', {
+  props: {
+    label: figma.string('Label'),
+    variant: figma.enum('Variant', { Primary: 'primary', Secondary: 'secondary' }),
+    disabled: figma.boolean('Disabled'),
+  },
+  example: ({ label, variant, disabled }) => (
+    <Button variant={variant} disabled={disabled}>{label}</Button>
+  ),
+});
+```
+
+### Asset export (SVG)
+```typescript
+async function exportSvg(fileKey: string, nodeId: string, token: string) {
+  const r = await fetch(`https://api.figma.com/v1/images/${fileKey}?ids=${nodeId}&format=svg`, {
+    headers: { 'X-Figma-Token': token },
+  });
+  const { images } = await r.json();
+  return fetch(images[nodeId]).then(r => r.text());
+}
+```
+
+### Component prop sync
+```typescript
+// 매 figma component property → typescript prop
+function syncComponentProps(figmaComponent: any) {
+  const props = figmaComponent.componentPropertyDefinitions;
+  return Object.entries(props).map(([key, def]: [string, any]) => ({
+    name: key,
+    type: def.type === 'BOOLEAN' ? 'boolean' : 'string',
+    default: def.defaultValue,
+  }));
+}
+```
+
+### LLM-aided figma → spec
+```python
+def llm_design_spec(figma_node, llm):
+    prompt = f"""You are a UX engineer. Given this Figma frame structure:
+{json.dumps(figma_node, indent=2)}
+
+Generate:
+1. React component spec (props + behavior)
+2. Accessibility checklist
+3. Edge cases (empty, error, loading)"""
+    return llm.generate(prompt)
+```
+
+### Variables → Tailwind config
+```javascript
+const figmaTokens = require('./tokens.json');
+module.exports = {
+  theme: {
+    colors: Object.fromEntries(Object.entries(figmaTokens.color).map(([k, v]) => [k, v.$value])),
+    spacing: Object.fromEntries(Object.entries(figmaTokens.spacing).map(([k, v]) => [k, v.$value])),
+  },
+};
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Tokens sync | Variables API + Style Dictionary |
+| Code gen | Anima / Builder.io / manual |
+| Asset export | REST images endpoint |
+| Live sync | Webhook + plugin |
+| Component-level | Code Connect (Dev Mode) |
+| AI augment | Visual Copilot |
+
+**기본값**: 매 Variables (tokens) + 매 Style Dictionary + 매 Code Connect + 매 manual code (no auto-codegen) + 매 webhook for sync.
+
+## 🔗 Graph
+- 부모: [[Design-System]]
+- 변형: [[Design-Tokens]]
+- 응용: [[Storybook]] · [[Style Dictionary]] · [[Tailwind]]
+- Adjacent: [[Web-Components]]
+
+## 🤖 LLM 활용
+**언제**: 매 design system. 매 design-to-code workflow.
+**언제 X**: 매 one-off design.
+
+## ❌ 안티패턴
+- **Manual token copy**: 매 drift.
+- **Auto-generated 의 ship**: 매 quality 의 review X.
+- **No webhook**: 매 stale tokens.
+- **Pixel-perfect codegen**: 매 component fail.
+- **Asset embed in JS bundle**: 매 size.
+
+## 🧪 검증 / 중복
+- Verified (Figma API docs, Code Connect, Style Dictionary).
+- 신뢰도 A.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — REST + plugin + tokens + Code Connect + AI codegen |