MCPサーバーを経由してFigmaとClaudeを接続する方法があると聞きました。どうやるのでしょうか?
FigmaはDevモードが利用できる必要があります。プロフェッショナルプラン以上のライセンス(フルまたはDev)が必要です。
FigmaとClaudeをMCPを利用して接続する手順を紹介します。
WebブラウザでClaudeのチャット画面を表示します。
プロンプト入力テキストボックス左下の[+]ボタン(ファイルやコネクタなどを追加 /)をクリックします。
ドロップダウンメニューが表示されますので、[コネクタを追加]の項目をクリックします。
コネクタのダイアログが表示されます。
[Figma]のタイルの右側の[+]ボタン(連携/連携させる)をクリックします。
[Figmaへのアクセスを許可]のダイアログが表示されます。
Webブラウザが開き、下図のページが表示されます。[同意してアクセスを許可する]ボタンをクリックします。
接続ができると、プロンプト入力テキストボックス左下の[+]ボタンクリック時のドロップダウンメニューに[Figmaから追加]の項目が表示されます。
またFigma側では、プロフィールのアイコンをクリックし、ドロップダウンの[設定]の項目をクリックします。
設定画面のダイアログが表示されます。
[セキュリティ]のタブをクリックします。一番下に[接続しているアプリ]の欄があり、[Claude]が接続アプリとして追加されています。
Figmaのデスクトップアプリをインストールします。手順はこちらの記事を参照してください。
Figmaのデスクトップアプリを起動し、デザインファイルを作成します。作成後画面下部のツールバーで[Dev Mode]に切り替えます。
初回は[Dev Modeへようこそ]ダイアログが表示されます。ダイアログを閉じます。
ウィンドウ右側に[MCP]のパネルが表示されています。
[MCP]パネルの[デスクチップMCPサーバーを有効にする]ボタンをクリックします。
下図のダイアログが表示され、MCPサーバーのセットアップ手順が表示されます。
今回はClaude Codeと連携しますので、左側のメニューの[Claude Code]の項目をクリックします。
説明が表示されるので確認します。
セットアップ手順のローカルMCPサーバーのURLを確認します。下図のhttp://127.0.0.1:3845/mcpの部分です。
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcpclaude mcp listclaude mcp get my-serverclaude mcp remove my-server
設定ファイルを変更します。以下のファイルを編集します。ファイルがない場合は作成します。
(現在ログインしているユーザーディレクトリ)\.claude\settings.json
デフォルトの設定であれば以下のディレクトリです。
C:\Users\(現在のユーザー)\.claude\settings.json
setting.jsonに以下の内容を追記します。urlの値は先に確認したFigmaのローカルMCPサーバーのURLです。
{
"mcpServers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
{
"env": {
"CLAUDE_CODE_GIT_BASH_PATH": "C:\\Program Files\\Git\\bin\\bash.exe"
},
"mcpServers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
setting.jsonファイル変更後に、Claude デスクトップアプリを再起動します。再起動後、Claude Codeの画面で、次のプロンプトを実行します。
接続できていれば、接続が確認できた旨と、下図の結果が表示されます。
Claude CodeでリモートMCPサーバーを利用してFigmaと接続する場合の設定です。
以下の設定ファイルを作成します。
(現在ログインしているユーザーディレクトリ)\.claude\settings.json
settings.jsonファイルに以下の内容を追記します。
{
"mcpServers": {
"figma-remote": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}
ローカルMCPと共存できるため、以下の記述でも良いです。
{
"env": {
"CLAUDE_CODE_GIT_BASH_PATH": "C:\\Program Files\\Git\\bin\\bash.exe"
},
"mcpServers": {
"figma-desktop": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
},
"figma": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}
