デザインツール「Figma」の画面情報を、AIに直接読ませるための橋渡しです。画面の写真を貼って「これを作って」と頼むより、色・余白・文字の大きさといった実際の値が渡るので、再現の精度が上がります。Figmaのリンクを貼って頼むだけ、という使い方になります。
#Figma#実装支援
ミロンドが自分で確かめたこと
- 2026年8月23日「配布元を見る」の行き先が、今も開けることを確認しました。
- 2026年8月14日利用ルールの原文（LICENSE）を読みました。特別な条件は書かれていませんでした。
- 2026年7月31日公式の説明を読んで、開発が止まったというサインが無いことを確認しました。
- 2026年8月25日ミロンドが毎日数えている記録では、この17日間で お気に入りが113件増えました（今も使われ続けています）。
ミロンドは掲載しているすべての行き先を定期的に開いて、今も使えるかを確かめています。 利用ルールは名前だけで判断せず、原文を読んで確認しています。
「MCP」47本の中での位置
- 作ったものを仕事に使ってよいと確認できているこの分野で45本
- 黒い画面（ターミナル）の操作が要りますそうでないものが3本 →
- APIキーの用意が要りますそうでないものが28本 →
- 入れた内容は公開元に送られますそうでないものが17本 →
この数字は、ミロンドが掲載している道具を1本ずつ同じ基準で調べた結果から数えています。
これは何？AIに道具を持たせる接続部品（MCP）
できること
Figmaの画面情報の取得とAIへの受け渡し／リンクを貼るだけの操作／Cursorなど対応する開発道具からの利用
誰に効く？
Figmaのデザインをコードに起こしている人。写真を貼る方式で精度に困っていた人
用意するもの
コマンド入力と、対応するAI開発道具（Cursorなど）が必要です。Figmaの利用権限も要ります。
時間のめやす
10〜20分
使うとこうなる
- 1Figmaファイルをつなぐと→AIがデザイン情報を読める
- 2フレームを指定すると→画面構成が渡される
- 3実装を頼むと→参照情報つきでコード案が出る
作れるもの・できることの例
Figmaからの画面実装、UI部品の再現、デザイン参照つきコード生成
使えるようになるまでの手順をひらく
- 対応のAIアプリ（Claude Desktop / Claude Code など）を用意
- そのアプリの設定画面（またはコマンド）でこの部品を登録
- あとはAIに日本語で「〜して」と頼むだけ。AIがこの道具を使ってくれます
こんな人には向かないかも
- MCP対応のAIアプリ（Claude等）をまだ使っていない人
- 登録やAPIキーの設定を一切やりたくない人
🔑 必要な鍵（APIキー）— 下のどれか1社でOK
すでにどこかの鍵を持っていればそれが使えます。まだ無いなら Google（Gemini）が一番かんたんです。
Google（Gemini） の発行ページ↗Googleアカウントがあれば無料で即発行。無料枠も大きく、一番かんたん
OpenAI（ChatGPT） の発行ページ↗発行は無料。APIはChatGPT Plus（月額）とは別勘定で、使った分だけの課金。※Codex等の一部公式ツールは、キーの代わりにChatGPTの月額プランでログインして使える
Anthropic（Claude） の発行ページ↗発行は無料。APIは月額プランとは別勘定で、使った分だけの課金。※Claude Codeは月額プラン（Pro等）のログインでも使える
鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
むずかしそう？ 同じジャンルで、もっと始めやすいのはこちら
注意点
Figmaの情報を読む権限を渡すことになります。会社のFigmaを扱う場合、どのファイルまで読めるのかを確認してください。渡したデザイン情報は、使っているAIサービスに送られます。未発表の製品デザインを扱う場合は、送信範囲を先に確認してください。はMITです。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。
このツールが活躍する場所
やりたいことから探す
Figma-Context-MCPについてよくある質問
- Figma-Context-MCPは無料で使えますか？
- Figma-Context-MCP自体は無料で使えますが、動かすのに外部AIのAPIキーが必要です。そのAI側の利用料は別にかかります（無料枠があるものもあります）。
- Figma-Context-MCPを使うのに、インストールや専門知識は必要ですか？
- Claude などMCPに対応したAIアプリに接続して使います。単体では動きません。
- Figma-Context-MCPはスマホでも使えますか？
- スマホには対応していません。パソコンが必要です。
- Figma-Context-MCPは仕事（商用）で使えますか？
- ライセンスは MIT で、商用利用も認められています。ただし著作権表示を残すなどの条件が付くので、配布物に含める場合はライセンス本文を確認してください。
似ている道具との違い
同じ用途の道具と、使う前に効いてくる条件を並べました。
| 道具 | 黒い画面 | APIキー | 外部送信 | スマホ | 仕事に使える | 最終更新 |
|---|---|---|---|---|---|---|
| Figma-Context-MCP（このページ） | 要る | 要る | あり | むずかしい | 可 | 2026年8月 |
| cursor-talk-to-figma-mcp | 要る | 要る | あり | むずかしい | 可 | 2026年7月 |
| MCP Servers | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
| Context7 | 要る | いらない | あり | むずかしい | 可 | 2026年8月 |
「外部送信あり」は、入力した内容がどこかのサーバーに送られることを指します。 社外に出せない資料を扱うときは「なし」を選んでください。
MCPのほかのツール
Figma-Context-MCPが合わなかったときの、同じ用途の候補です。
cursor-talk-to-figma-mcp
AIにFigmaのデザインを読ませて、直接いじらせる
準備がいる・黒い画面（ターミナル）が要る
MCP Servers
AIに外部ツールをつなぐ公式部品集
はじめやすい・黒い画面（ターミナル）が要る
Context7
AIに最新の技術文書を読ませる接続部品
はじめやすい・黒い画面（ターミナル）が要る
Chrome DevTools MCP
AIにChromeの開発者機能を使わせる
はじめやすい・黒い画面（ターミナル）が要る
codebase-memory-mcp
巨大なプログラムをAIが必要な所だけ読めるようにする
はじめやすい・黒い画面（ターミナル）が要る
Playwright MCP
AIにブラウザ操作の腕を持たせる公式部品
はじめやすい・黒い画面（ターミナル）が要る