FigmaとAIの連携設計2026

┌─────────────────────────────────────────────────────────┐
│        Figma デザイン→コード変換の3レイヤー              │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  Layer 1: コード参照     Figma Dev Mode                 │
│           (デザイン仕様をコード形式で閲覧)               │
│                ↓                                        │
│  Layer 2: コンポーネント Code Connect                   │
│           マッピング     (FigmaコンポーネントID ↔ 実装) │
│                ↓                                        │
│  Layer 3: デザインシステム Figma Variables API           │
│           トークン同期   → CSS変数/design-tokens.json   │
│                                                         │
│  [オプション] AI加速                                     │
│    Figma AI (Make) : プロトタイプ→コード直接生成         │
│    Claude Code MCP : FigmaデータをLLMプロンプトに注入   │
│                                                         │
└─────────────────────────────────────────────────────────┘

/* Dev Modeが生成するCSS（スタイル値の参照用） */
.button-primary {
  display: flex;
  padding: 12px 24px;
  background-color: #0d99ff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
}

# インストール
npm install --save-dev @figma/code-connect

# または pnpm
pnpm add -D @figma/code-connect

# Figma CLIでコンポーネント一覧を取得
figma connect create --token <FIGMA_TOKEN> <FIGMA_FILE_URL>

// src/components/Button/Button.figma.tsx
import figma from "@figma/code-connect";
import { Button } from "./Button";

figma.connect(Button, "https://www.figma.com/file/ABC123/.../Button?node-id=1-234", {
  props: {
    // Figmaのpropsと実装のpropsをマッピング
    label: figma.string("Label"),
    variant: figma.enum("Variant", {
      Primary: "primary",
      Secondary: "secondary",
      Danger: "danger",
    }),
    disabled: figma.boolean("Disabled"),
    size: figma.enum("Size", {
      Small: "sm",
      Medium: "md",
      Large: "lg",
    }),
  },
  example: ({ label, variant, disabled, size }) => (
    <Button variant={variant} disabled={disabled} size={size}>
      {label}
    </Button>
  ),
});

# CI/CD に組み込む場合
figma connect publish --token $FIGMA_TOKEN

# ドライランで確認
figma connect publish --token $FIGMA_TOKEN --dry-run

# Figma Variables APIでトークン取得
curl -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/$FILE_KEY/variables/local"

// style-dictionary.config.js
const StyleDictionary = require("style-dictionary");

module.exports = StyleDictionary.extend({
  source: ["tokens/figma-variables.json"],
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "src/styles/",
      files: [
        {
          destination: "tokens.css",
          format: "css/variables",
          options: {
            outputReferences: true,
          },
        },
      ],
    },
    js: {
      transformGroup: "js",
      buildPath: "src/",
      files: [
        {
          destination: "tokens.js",
          format: "javascript/module",
        },
      ],
    },
  },
});

# トークン変換実行
npx style-dictionary build

/* src/styles/tokens.css（自動生成） */
:root {
  --color-primary-500: #0d99ff;
  --color-neutral-100: #f5f5f5;
  --spacing-4: 16px;
  --spacing-8: 32px;
  --font-size-base: 16px;
  --radius-md: 8px;
}

// .claude/mcp_settings.json への追記例
{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["@figma/mcp-server"],
      "env": {
        "FIGMA_TOKEN": "${FIGMA_TOKEN}"
      }
    }
  }
}

Figma MCPで Button コンポーネント（node-id: 1-234）の仕様を取得し、
以下の要件で React コンポーネントを実装してください：
- TypeScript
- Tailwind CSS でスタイリング
- 既存の design-tokens.css の CSS変数を使用
- アクセシビリティ対応（aria-label, disabled状態）

# エラーになりやすいURL（URLエンコード済み）
https://www.figma.com/file/ABC123/.../Button?node-id=1%3A234

# Code Connectでは「-」区切りで指定する
https://www.figma.com/file/ABC123/.../Button?node-id=1-234

// モードを考慮したスクリプト例
async function exportTokensByMode(fileKey, token) {
  const res = await fetch(
    `https://api.figma.com/v1/files/${fileKey}/variables/local`,
    { headers: { "X-Figma-Token": token } }
  );
  const { meta } = await res.json();
  
  // モードごとに分けて出力
  const modes = Object.values(meta.variableCollections).flatMap(
    (col) => col.modes
  );
  for (const mode of modes) {
    // mode.name（"Light"/"Dark"）ごとに出力ファイルを分ける
    await writeTokensForMode(meta, mode);
  }
}

# .github/workflows/figma-code-connect.yml
name: Figma Code Connect Publish
on:
  push:
    branches: [main]
    paths: ["src/**/*.figma.tsx"]
jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm install
      - run: pnpm figma connect publish --token ${{ secrets.FIGMA_TOKEN }}

シナリオAの実装フロー:

Figma デザイン更新
  ↓ Variables変更
Figma Variables API (自動取得)
  ↓ CI定期実行
style-dictionary (CSS変数生成)
  ↓ PRで差分確認
フロントエンドコードに反映

Figma コンポーネント更新
  ↓ figma.tsx修正 + push
Code Connect publish (CI自動)
  ↓
Dev Modeのコード例更新