1. はじめに

Figma-Context-MCPは、Figmaのデザイン情報をCursorなどのAIコーディング支援ツールに伝える橋渡し役となる、オープンソースのMCPサーバーです。

従来のデザインからのコーディングは、スクショを貼ったり、手作業で情報を確認したりと、時間と手間がかかる作業でした。

Figma-Context-MCPを使えば、AIがFigma上のレイアウト、スタイル、テキスト情報などを直接理解。
その結果、「このFigmaデザインをReactにして」と指示するだけで、驚くほど忠実なコード生成が期待できます。

2. Figma-Context-MCPで何ができる？（目的と概要）

Figma-Context-MCPの目的は、デザインとコーディングのギャップを埋め、開発プロセスを効率化することです。
具体的には以下の機能を提供します。

Figmaデザイン情報のAI提供: 特定要素のレイアウト、スタイル、テキスト等をAIが理解できる形式で提供。
コード自動生成: 提供された情報に基づき、HTML/CSSやReact等のコードを自動生成。コーディング時間を大幅削減。
デザインに関する質問応答: 「このボタンの色は？」といった質問に、Figma情報を基に回答。
Figmaコメント操作: コメントの読み取りやAIによる書き込みも可能（※トークン権限による）。

これを支えるのがMCP (Model Context Protocol)。AIと外部データソース（Figma等）が対話するための標準ルールです。
Figma-Context-MCPはこのルールに準拠しているため、Cursor以外にも対応AIツール（Windsurf、Cline等）で利用できます。

特徴は、Figma APIから得た膨大な情報から必要な情報だけを抽出・整理してAIに渡す点。
これにより、AIはノイズに惑わされず、より正確な応答が可能になります。

要するに、Figma-Context-MCPは：

FigmaとAIを繋ぐオープンソースの無料サーバー
MCP準拠で複数ツールに対応
Figmaデザインを高精度でコード化
必要な情報だけを効率的にAIへ提供
デザインとコーディングの垣根を下げる画期的なツールです。

3. 使う前に：必要な知識と準備

導入前に、以下のスキルや環境を確認しましょう。

Figma基本操作:
- ファイル開封、要素選択。
- 要素へのリンクコピー (右クリック > Copy/Paste as > Copy link to selection)。
- アカウント設定へのアクセス（トークン発行のため）。
Figma API基礎知識（推奨）:
- Personal Access Tokenとは何か（Figmaデータへのアクセスキー）。
- REST APIの基本概念。
- 注意: 個人トークンは読み取り専用。Figmaファイルの直接編集は不可。
基本開発環境:
- Node.js (v18以上推奨) と npm/pnpm。
- ターミナルでの基本コマンド操作 (git clone, npm/pnpm install, npx など)。
- pnpmがない場合: npm install -g pnpmで導入。
AIコーディングツール基本:
- Cursor等、MCP対応ツールの基本操作知識。
MCP概要理解（推奨）:
- 「AIと外部ツール連携の共通ルール」程度の認識。

これらが準備できていれば、セットアップはスムーズです。

4. セットアップ方法：アクセストークン取得からツール連携まで

Figma-Context-MCPを使うためのセットアップ手順です。

セットアップの全体像

ステップ1：Figma個人アクセストークンの発行

MCPサーバーがFigmaデータにアクセスするための個人アクセストークンを取得します。

Figma設定画面 (Settings) を開く (左上プロフィール > Settings)。
「Account」 タブ等にある 「Personal access tokens」 セクションへ移動。
「Generate new token」 をクリック。
トークン名を入力 (例: Figma_MCP_Token)。
権限は 「File content: Read-only」 を確認。
有効期限を設定 (期限設定推奨)。
「Generate token」後、表示されるトークン文字列を必ずコピーし、安全な場所に保管（一度しか表示されません）。

⚠️ 重要：トークンの管理

トークンは絶対に公開・共有しないでください。

流出疑い時は、Figma設定から すぐにRevoke（無効化） を。

ステップ2：MCPサーバーのインストールと起動

あなたのPC上でMCPサーバーを起動します。
2つの方法があります。

方法A：npxを使ったクイック起動（簡単！）

ターミナルで以下を実行（Node.jsが必要）。

npx figma-developer-mcp --figma-api-key=【ここにコピーしたFigmaトークン】

HTTP server listening on port 3333 のようなログが出れば成功。
デフォルトは http://localhost:3333 で起動します。
（安全のため、トークンは方法Bの.envファイル利用も検討を。）

方法B：リポジトリをクローンしてローカルでセットアップ

ソースコードを見たい、カスタマイズしたい場合。

リポジトリをクローン:

git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCP

依存パッケージをインストール: (pnpm推奨)
```
pnpm install
```
- pnpmがない場合: npm install -g pnpm 後に再実行。
.envファイルを作成・編集:
- .env.example を .env にコピー。
- .env 内の FIGMA_API_KEY= にトークンを記入。
- （任意）PORT= でポート番号変更可。
開発サーバーを起動:
```
pnpm run dev
```
方法Aと同様にサーバーが起動します。

💡 設定の優先順位
コマンドライン引数 > .env ファイル > 環境変数
--stdio オプションで標準入出力モード起動も可能。
https://socket.dev/npm/package/figma-developer-mcp

ステップ3：AIツール（Cursorなど）への登録

起動したサーバーをAIツールに認識させます (Cursor例)。

Cursorの設定 (Settings) を開く。
「MCP」 セクションへ移動。
「Add New MCP Server」 をクリック。
「Server Name」 を入力 (例: My Figma Server)。
「Connection Type」 で 「SSE (Server-Sent Events)」 を選択。
「Server URL」 にサーバーURLを入力 (デフォルト: http://localhost:3333)。
保存。

サーバー名の横に緑色のドットが表示されれば接続成功です！

5. 実践！Figmaのデザインをコード化する手順

セットアップ完了後、実際にデザインをコード化してみましょう (Cursor例)。

Figmaで要素リンクをコピー:
- コード化したいフレームやグループを選択（特定要素の選択が重要）。
- 右クリック > Copy/Paste as > Copy link to selection (ショートカット: Ctrl/Cmd+L)。
- https://www.figma.com/file/...node-id=... 形式のURLをコピー。
Cursorでリンク貼り付け & 指示:
- Cursorのチャット画面を開く。
- コピーしたFigmaリンクを貼り付け。
- 続けて具体的な指示を入力。例:
  - 「このFigmaデザインをReactコンポーネントにして」
  - 「Implement this using HTML and Tailwind CSS.」
  - 「この要素のCSSを生成して」
- 送信。
AIによるコード生成:
- AIがリンクを認識し、ローカルのMCPサーバー経由でFigma情報を取得。
- AIは受け取ったデザイン情報に基づき、指示された形式でコードを生成・表示。
結果確認 & 調整:
- 生成コードとFigmaデザインを比較。多くの場合、高精度なコードが出力されます。
- 必要ならAIに追加修正を依頼するか、手動で微調整。
応用:
- 「再利用可能なコンポーネントを抽出して」
- 「レイアウトの問題点を指摘して」
- 「Figmaコメントを一覧表示して」
  といった指示も可能。

この「Figmaでリンクコピー → AIにペーストして指示」の流れで、コーディング作業を大幅に効率化できます。

6. こんな時に便利！具体的な活用ユースケース

Figma-Context-MCPが役立つ具体的なシーンです。

ユースケース1: デザインカンプからの高速コーディング
- Figmaデザインからコードの「たたき台」をAIに生成させ、ゼロからの実装時間を大幅短縮。特に繰り返しパターン（カード、ナビバー等）に有効。
ユースケース2: デザインシステム連携強化
- Figma上のカラーパレットやタイポグラフィ等のデザインシステム情報をAIに読み込ませ、コード側の設定ファイル(CSS変数等)を自動生成。デザインとコードの一貫性を維持。（※ スタイル読み取りのみ可能）
ユースケース3: プロトタイピング高速化
- Figmaモックアップを即座にコード化しブラウザで確認。デザインアイデアを素早く検証し、フィードバックループを高速化。アジャイル開発に貢献。
ユースケース4: コードレビュー/品質チェック補助
- （将来的に）AIにFigmaデザインと実装コードを比較させ、スタイルの乖離などを自動チェックさせる応用も期待。
ユースケース5: デザインレビュー効率化
- Figmaコメントの要約や、デザイン内テキスト抽出による校正支援。AIによるコメント書き込み（post_comment）でデザインプロセス自体へのAI活用も。

Figma-Context-MCPは、デザインと開発の連携を多角的に強化するプラットフォームです。

7. まとめ

FigmaデザインとAIコーディングツールを繋ぐ「Figma-Context-MCP」を解説しました。

このツールで、デザインからのコード変換作業を劇的に効率化し、より創造的な開発に集中できます。

セットアップは簡単
使い方もシンプル (リンクコピー → AIへ指示)
高速コーディング、デザインシステム連携、プロトタイピング等に活用可
オープンソース

まだ発展途上ながら、デザインと開発の未来を示すエキサイティングなツールです。

特にFigmaとAIツールを日常使いする開発者の方は、ぜひ試してみてください。
開発プロセスがよりスムーズでクリエイティブになるはずです。