Figmaの画面情報をAIコーディングツールへ渡し、デザイン再現の手戻りを減らします。
#Figma#実装支援
※この説明はAIが公式READMEから自動生成したものです。内容は必ず公式ページでもご確認ください。
これは何？AIに道具を持たせる接続部品（MCP）
できること
Figmaのデザイン情報をAIコーディングツールに渡すと、スクリーンショットだけでは伝わりにくい余白や部品構成を参照しながら、UI実装を作りやすくなる。
誰に効く？
デザイナーと開発担当
用意するもの
Figma、対応AIエディタ、設定
時間のめやす
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権限と取得範囲の管理が必要です。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。