2nd/10_Wiki/Topics/AI_and_ML/Figma Integration.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-integration	Figma Integration	10_Wiki/Topics	verified	self	Figma API Figma plugin design tokens Figma to code Dev Mode AI Figma	none	A	0.94	applied	figma design-system design-tokens plugin dev-mode ai-design		2026-05-10	pending	language framework TypeScript / JavaScript 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)

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)

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)

{
  "name": "Token Sync",
  "id": "1234",
  "api": "1.0.0",
  "main": "code.js",
  "ui": "ui.html",
  "editorType": ["figma"]
}

Plugin script (sync tokens)

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

{
  "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)

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

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)

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)

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)

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

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

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

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