GitHub公式のプレビューカード
FigmaのデザインをAIが読み取り、部品編集や修正作業を手伝えるMCP連携。
#Figma#デザイン
※この説明はAIが公式READMEから自動生成したものです。内容は必ず公式ページでもご確認ください。
これは何？AIに道具を持たせる接続部品（MCP）
できること
CursorやClaude CodeからFigmaに接続し、選択中のデザイン情報を読み取ったり、テキストの一括置換や部品の上書き反映を依頼できる。
誰に効く？
Figmaを使うデザイナー
用意するもの
Figma、Bun、対応AI
時間のめやす
10〜20分
使うとこうなる
- 1bun setupを実行する→Cursor側にMCPを入れられる
- 2bun socketを起動する→Figmaとの通信口ができる
- 3Figmaプラグインを開く→AIからデザインを操作できる
作れるもの・できることの例
Figma情報読み取り、テキスト一括置換、部品設定の反映
使えるようになるまでの手順をひらく
- 対応のAIアプリ（Claude Desktop / Claude Code など）を用意
- そのアプリの設定画面（またはコマンド）でこの部品を登録
- あとはAIに日本語で「〜して」と頼むだけ。AIがこの道具を使ってくれます
こんな人には向かないかも
- MCP対応のAIアプリ（Claude等）をまだ使っていない人
- 登録やAPIキーの設定を一切やりたくない人
🔑 必要な鍵（APIキー）
Anthropic（Claude） の発行ページ↗発行は無料。APIは月額プランとは別勘定で、使った分だけの課金。※Claude Codeは月額プラン（Pro等）のログインでも使える
鍵は「合鍵」の文字列。発行→コピー→ツールの設定に貼り付け、の3手です。迷ったらAIチャットに「画面つきで教えて」と。
迷ったらこれ：いつも使っているAIチャット（ChatGPT・Claude・Geminiなど）にこのツールのGitHubリンクを貼って 「これを使いたい。私のPCでの始め方を一歩ずつ教えて」と頼むのが一番の近道です。
むずかしそう？ 同じジャンルで、もっと始めやすいのはこちら
注意点
プラグインとローカルサーバー設定が必要。
ひとことメモ
として公開されています。内容は公式ページでもご確認ください。