Figma-Context-MCP（Framelink Figma MCPサーバー）徹底解説と使い方


# 1. はじめに

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

https://github.com/GLips/Figma-Context-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を使うためのセットアップ手順です。

**セットアップの全体像**

```mermaid
graph TD
    A[Figmaで個人アクセストークン発行] --> B[トークンをコピー&保管]
    B --> C{MCPサーバーの準備・起動}
    C -- 方法A: npxでクイック起動 --> D[ターミナルでコマンド実行]
    C -- 方法B: リポジトリクローン --> E[git clone & pnpm install]
    E --> F[.env設定 & pnpm run dev]
    D --> G[MCPサーバー起動 （localhost:3333）]
    F --> G
    G --> H[AIツール（Cursor等）でMCPサーバー登録]
    H --> I[接続確認 （緑のドット）]
    I --> J[🎉 セットアップ完了！]
```

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

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

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

> **⚠️ 重要：トークンの管理**
> * トークンは**絶対に公開・共有しない**でください。
> * 流出疑い時は、Figma設定から **すぐにRevoke（無効化）** を。

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

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

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

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

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

https://socket.dev/npm/package/figma-developer-mcp

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

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

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

1.  **リポジトリをクローン:**
    ```bash
    git clone https://github.com/GLips/Figma-Context-MCP.git
    cd Figma-Context-MCP
    ```
2.  **依存パッケージをインストール:** (pnpm推奨)
    ```bash
    pnpm install
    ```
    * pnpmがない場合: `npm install -g pnpm` 後に再実行。
3.  **.envファイルを作成・編集:**
    * `.env.example` を `.env` にコピー。
    * `.env` 内の `FIGMA_API_KEY=` にトークンを記入。
    * （任意）`PORT=` でポート番号変更可。

4.  **開発サーバーを起動:**
    ```bash
    pnpm run dev
    ```
    方法Aと同様にサーバーが起動します。

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

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

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

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

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

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

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

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

https://www.figma.com/community/file/1349703670794123195/figma-now-has-a-mcp-server-and-here-s-how-to-use-it

# 7. まとめ

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

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

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

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

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

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/