Figma — デザインコラボレーション・ハンドオフ

デザインからコードへ、シームレスに

Figma は世界中の数百万チームが使用する業界標準のデザインツールです。Figma MCP サーバーを使えば、AIエージェントがデザインファイルを読み取り、コンポーネントを抽出し、デザイントークンを取得し、本番向けコードを生成 — 静的なモックアップを数分で生きたアプリケーションに変換します。

• ファイル読み取り：URL で任意の Figma ファイルを解析。フレーム、コンポーネント、オートレイアウト構造を完全な忠実度で抽出。
• デザイントークン：カラー、タイポグラフィ、スペーシング、シャドウを構造化トークンとして取得し、コードベースに直接同期。
• コンポーネント抽出：再利用可能なコンポーネントを特定し、デザインにピクセルパーフェクトに一致する React/Vue/Tailwind コードを生成。
• デザインからコードへ：画面全体をレスポンシブレイアウトに変換。AIエージェントがマークアップ、スタイル、インタラクションロジックまで記述。

設定

"mcpServers": {
  "figma": {
    "command": "npx",
    "args": ["-y", "@mcp/figma-server"],
    "env": { "FIGMA_ACCESS_TOKEN": "your-personal-access-token" }
  }
}

Figma の「設定 → セキュリティ → パーソナルアクセストークン」でトークンを生成してください。

おすすめプロンプト

1. 「この Figma ファイル [URL] を読み取り、Tailwind CSS を使ったレスポンシブ React コンポーネントを生成して。」
2. 「この Figma ファイルからすべてのデザイントークンを抽出し、プロジェクトの tokens.json ファイルに書き込んで。」
3. 「Figma デザインと現在の実装を比較し、すべての視覚的違いをリストアップして。」
4. 「Figma コンポーネントライブラリを Storybook プロジェクトに変換し、各コンポーネントのドキュメントを作成して。」