AIを使ったデザイン作業をもっと効率化したい方へ。この記事では、デザインツール「Figma」とAIコーディングツール「Claude Code」を連携させる方法を、初心者向けにわかりやすく解説します。
今回使うのはコミュニティ製のMCPツール「claude-talk-to-figma-mcp」です。Figmaの公式連携は無料プランだと月6回しか使えませんが、この方法なら無料プランのまま制限なく使えます。
MCPとは？（難しくないです）
MCP（Model Context Protocol）とは、AIツールと外部アプリを繋ぐ「橋渡し役」のような仕組みです。これを使うことで、Claude CodeがFigmaのデザインデータを直接読んだり操作したりできるようになります。難しい知識は不要で、手順通りに進めるだけでOKです。
用意するもの
- Windows PC
- Node.js（LTS版）
- Claude Code（インストール済みであること）
- Figmaデスクトップアプリ（無料アカウントでOK）
- Git（リポジトリのクローンに使用）
初回セットアップ手順
最初に一度だけ行う設定です。次回以降は不要です。
ステップ1：PowerShellのスクリプト実行を許可する
Windowsのデフォルト設定ではスクリプトの実行がブロックされています。まずこれを解除します。
スタートメニューで「PowerShell」を検索し、右クリック →「管理者として実行」で開いてください。
以下のコマンドを実行し、Yを押してEnterで確定します。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser※この設定は「インターネットからダウンロードしたスクリプトには署名を要求する」という内容で、セキュリティ的にも安全な設定です。元に戻したい場合は以下を実行してください。
Set-ExecutionPolicy -ExecutionPolicy Restricted -Scope CurrentUserステップ2：bunをインストールする
このツールの実行に必要な「bun」というJavaScript実行環境をインストールします。
npm install -g bunステップ3：リポジトリをクローンしてビルドする
作業フォルダに移動してツールをダウンロードします。
cd C:\Users\（あなたのユーザー名）\任意のフォルダ
git clone https://github.com/arinspunk/claude-talk-to-figma-mcp
cd claude-talk-to-figma-mcp
npm install
npm run build※npm run buildの際にDTSのエラーが出ることがありますが、JSファイルのビルドが成功していれば問題ありません。
ステップ4：Claude CodeにMCPサーバーを登録する
プロジェクトのフォルダに移動してから、以下のコマンドを実行します。
cd C:\Users\（あなたのユーザー名）\任意のフォルダ
claude mcp add ClaudeTalkToFigma --transport stdio -- bun run C:\Users\（あなたのユーザー名）\任意のフォルダ\claude-talk-to-figma-mcp\src\talk_to_figma_mcp\server.tsステップ5：FigmaにプラグインをImportする
- Figmaデスクトップアプリでデザインファイルを開く
- キャンバス上で右クリック → Plugins → Development → Import plugin from manifest
- 以下のファイルを選択する：
（クローンしたフォルダ）\claude-talk-to-figma-mcp\src\claude_mcp_plugin\manifest.json
これで初回セットアップは完了です！
毎回の接続手順（次回以降はここから）
2回目以降は以下の5ステップだけです。慣れれば1〜2分で完了します。
① ソケットサーバーを起動する
PowerShellを開いて以下を実行します。このウィンドウは作業中ずっと開いたままにしてください。
cd （クローンしたフォルダ）\claude-talk-to-figma-mcp
npm run socket② Figmaでデザインファイルを開く
Figmaデスクトップアプリを起動し、作業したいデザインファイルを開きます。
③ プラグインを起動してチャンネルIDを確認する
- キャンバス上で右クリック
- Plugins → Development → Claude Talk to Figma をクリック
- プラグイン画面に表示されるチャンネルIDをメモする
※チャンネルIDは起動するたびに変わります。
④ Claude Codeを起動する
別のPowerShellウィンドウを開いて以下を実行します。
cd （プロジェクトのフォルダ）
claude⑤ チャンネルに接続する
Claude Codeのチャット画面で以下のように入力します。
Connect to Figma, channel （チャンネルID）「Connected to Figma」のようなメッセージが返ってきたら接続成功です！あとはClaude Codeに自然な日本語でFigmaの操作を指示できます。
接続後にできること（例）
- 「このFigmaのデザインをReactコンポーネントに変換して」
- 「選択中のフレームのカラーを変更して」
- 「このデザインのHTMLとCSSを生成して」
まとめ
今回の手順をまとめると：
| 作業 | 頻度 |
|---|---|
| Node.js・bunのインストール、リポジトリのクローン、MCPの登録、プラグインのImport | 初回のみ |
| ソケットサーバー起動 → Figmaファイルを開く → プラグイン起動 → Claude Code起動 → チャンネル接続 | 毎回 |
最初のセットアップは少し手間がかかりますが、一度設定してしまえば次回以降はとてもスムーズです。Figmaの無料プランのままAIとの連携を楽しんでみてください！
コメント