2nd/10_Wiki/Topics/AI_and_ML/Figma Integration.md

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