Figma MCP Bridge

🚀 Figma MCP Bridge

Model Context Protocol (MCP)サーバーです。WebSocketブリッジを介してFigmaプラグインと接続することで、ClaudeがFigmaドキュメントをリアルタイムで読み取り、操作できるようになります。

✨ 主な機能

• 62種類のFigma操作 - 図形の作成、スタイルの変更、コンポーネントの管理、アセットのエクスポートなど
• リアルタイム双方向通信 - Figma上で変更が即座に反映されます
• トークン最適化クエリ - AIとのやり取りにおいて、効率的な変数検索とノードトラバーサルが可能です
• 完全なFigma APIアクセス - スタイル、変数、自動レイアウト、ブール演算など

🔧 アーキテクチャ

Claude Code ←──stdio──→ MCP Server ←──WebSocket──→ Figma Plugin ←──→ Figma API
                        (Node.js)    localhost:3055    (runs in Figma)

🚀 クイックスタート

前提条件

• Node.js 18以上
• Figmaデスクトップアプリ
• Claude Code CLIまたはClaude Desktop

📦 インストール

オプションA: npmからインストール（推奨）

Claude Code CLIの場合:

claude mcp add figma-mcp-bridge -- npx @magic-spells/figma-mcp-bridge

Claude Desktopの場合:

設定ファイルを編集します:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma-mcp-bridge": {
      "command": "npx",
      "args": ["-y", "@magic-spells/figma-mcp-bridge"]
    }
  }
}

その後、Claude Desktopを再起動します。

Figmaプラグインのインストール:

• このリポジトリからpluginフォルダをダウンロードします
• Figmaで: Plugins → Development → Import plugin from manifest
• plugin/manifest.jsonを選択します

接続:

• Figmaファイルを開きます
• プラグインを実行します: Plugins → Development → Claude Figma Bridge
• ステータスが「Connected」と表示されれば成功です

オプションB: ソースからインストール

1. リポジトリをクローンします

   git clone https://github.com/magic-spells/figma-mcp-bridge.git
   cd figma-mcp-bridge
   npm install
   

2. Claude Codeに追加します

   claude mcp add figma-mcp-bridge node /path/to/figma-mcp-bridge/src/index.js
   

3. Figmaプラグインをインストールします

   • Figmaで: Plugins → Development → Import plugin from manifest
   • クローンしたリポジトリからplugin/manifest.jsonを選択します

4. 接続します

   • Figmaファイルを開きます
   • プラグインを実行します: Plugins → Development → Claude Figma Bridge
   • ステータスが「Connected」と表示されれば成功です

⚙️ 設定

環境変数

変数	デフォルト	説明
FIGMA_BRIDGE_PORT	3055	WebSocketサーバーのポート（ポートが使用中の場合は自動的にインクリメントされます）

Figmaツールの自動承認

.claude/settings.local.jsonに以下を追加します:

{
  "permissions": {
    "allow": ["mcp__figma-mcp-bridge__*"]
  }
}

📄 コマンドリファレンス

クエリコマンド

figma_get_context

現在のFigmaドキュメントのコンテキスト（ファイル情報、現在のページ、選択内容）を取得します。

パラメータ	タイプ	説明
(none)

figma_list_pages

現在のFigmaドキュメント内のすべてのページをリストします。

パラメータ	タイプ	説明
(none)

figma_get_nodes

特定のノードの詳細情報をIDで取得します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	ノードIDの配列（例: ["1:23", "4:56"]）
depth	string	いいえ	詳細レベル: minimal, compact, または full（デフォルト）

figma_get_local_styles

ドキュメント内で定義されたすべてのローカルスタイルをリストします。

パラメータ	タイプ	必須	説明
type	string	いいえ	フィルタ: PAINT, TEXT, EFFECT, GRID, または ALL（デフォルト）

figma_get_local_variables

すべてのローカル変数と変数コレクションを取得します。

パラメータ	タイプ	必須	説明
type	string	いいえ	フィルタ: COLOR, FLOAT, STRING, BOOLEAN, または ALL（デフォルト）

注意: 25,000以上のトークンを返すことがあります。効率的な方法としてはfigma_search_variablesを使用してください。

figma_get_children

ノードの直属の子ノードを取得します。階層を一度に1レベルずつ閲覧するのに効率的です。

パラメータ	タイプ	必須	デフォルト	説明
parentId	string	はい		子ノードを取得する親ノードのID
compact	boolean	いいえ	true	最小限のデータを返す

figma_search_nodes

特定のスコープ内で名前でノードを検索します。特定のフレーム、セクション、または要素を見つけるのに最適です。

パラメータ	タイプ	必須	デフォルト	説明
parentId	string	はい		検索するスコープ（ページ/フレーム/セクションのID）
nameContains	string	いいえ		大文字小文字を区別しない部分文字列一致
namePattern	string	いいえ		ワイルドカードを含むグロブパターン（例: *button*）
types	string[]	いいえ		ノードタイプでフィルタ: FRAME, TEXT, SECTION, COMPONENT, INSTANCE, GROUP など
maxDepth	number	いいえ	-1	検索深度（-1 = 無制限、1 = 直属の子ノード）
compact	boolean	いいえ	true	最小限のデータを返す
limit	number	いいえ	50	最大結果数

1ノードあたり約50トークンを返します。完全なノードデータでは約500トークンです。

figma_search_components

名前でローカルコンポーネントを検索します。「Button」や「Header」などの特定のコンポーネントを探すときに使用します。

パラメータ	タイプ	必須	デフォルト	説明
nameContains	string	いいえ		大文字小文字を区別しない部分文字列一致
namePattern	string	いいえ		ワイルドカードを含むグロブパターン
includeVariants	boolean	いいえ	false	コンポーネントセットから個々のバリアントを含める
compact	boolean	いいえ	true	最小限のデータを返す
limit	number	いいえ	50	最大結果数

figma_search_styles

名前でローカルスタイルを検索します。特定のスタイルを探すときはfigma_get_local_stylesよりも効率的です。

パラメータ	タイプ	必須	デフォルト	説明
nameContains	string	いいえ		大文字小文字を区別しない部分文字列一致
type	string	いいえ	"ALL"	フィルタ: PAINT, TEXT, EFFECT, GRID, ALL
compact	boolean	いいえ	true	最小限のデータを返す
limit	number	いいえ	50	最大結果数

作成コマンド

figma_create_rectangle

新しい矩形を作成します。

パラメータ	タイプ	必須	デフォルト	説明
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
width	number	いいえ	100	幅（ピクセル）
height	number	いいえ	100	高さ（ピクセル）
name	string	いいえ	"Rectangle"	ノード名
fills	color	いいえ		塗りつぶし色
parentId	string	いいえ		親ノードのID

figma_create_ellipse

楕円、円、弧、またはリングを作成します。

パラメータ	タイプ	必須	デフォルト	説明
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
width	number	いいえ	100	幅（円の場合は直径）
height	number	いいえ	100	高さ
name	string	いいえ	"Ellipse"	ノード名
fills	color	いいえ		塗りつぶし色
parentId	string	いいえ		親ノードのID
arcData.startingAngle	number	いいえ		開始角度（ラジアン）
arcData.endingAngle	number	いいえ		終了角度（ラジアン）
arcData.innerRadius	number	いいえ		リングの内半径比率（0-1）

figma_create_line

線を作成します。

パラメータ	タイプ	必須	デフォルト	説明
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
length	number	いいえ	100	線の長さ
rotation	number	いいえ	0	回転角度（度）
strokeWeight	number	いいえ	1	線の太さ
strokes	color	いいえ		線の色
strokeCap	string	いいえ	"NONE"	線の端点: NONE, ROUND, SQUARE, ARROW_LINES, ARROW_EQUILATERAL
name	string	いいえ	"Line"	ノード名
parentId	string	いいえ		親ノードのID

figma_create_frame

フレームコンテナを作成します（自動レイアウトに対応）。

パラメータ	タイプ	必須	デフォルト	説明
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
width	number	いいえ	100	幅
height	number	いいえ	100	高さ
name	string	いいえ	"Frame"	ノード名
fills	color	いいえ		塗りつぶし色
parentId	string	いいえ		親ノードのID

figma_create_text

テキストノードを作成します。

パラメータ	タイプ	必須	デフォルト	説明
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
text	string	いいえ	"Text"	テキスト内容
fontSize	number	いいえ	16	フォントサイズ
fontFamily	string	いいえ	"Inter"	フォントファミリー
fontStyle	string	いいえ	"Regular"	フォントスタイル
fills	color	いいえ		テキスト色
name	string	いいえ	"Text"	ノード名
parentId	string	いいえ		親ノードのID

figma_clone_nodes

ノードを複製します。

パラメータ	タイプ	必須	デフォルト	説明
nodeIds	string[]	はい		複製するノードのID
parentId	string	いいえ		複製先の親ノードのID
offset.x	number	いいえ	20	元のノードからのXオフセット
offset.y	number	いいえ	20	元のノードからのYオフセット

figma_create_component

再利用可能なコンポーネントを作成します。

パラメータ	タイプ	必須	デフォルト	説明
fromNodeId	string	いいえ		既存のノードをコンポーネントに変換する場合のノードID
x	number	いいえ	0	X座標
y	number	いいえ	0	Y座標
width	number	いいえ	100	幅
height	number	いいえ	100	高さ
name	string	いいえ	"Component"	コンポーネント名
fills	color	いいえ		塗りつぶし色
parentId	string	いいえ		親ノードのID
description	string	いいえ		コンポーネントの説明

figma_create_instance

コンポーネントのインスタンスを作成します。

パラメータ	タイプ	必須	説明
componentId	string	はい	インスタンス化するコンポーネントのID
x	number	いいえ
y	number	いいえ
parentId	string	いいえ
name	string	いいえ

スタイルコマンド

figma_set_fills

ノードの塗りつぶし色を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するノードのID
fills	color	はい	塗りつぶし色

色の形式:

• 16進数: { color: "#FF0000" } または { color: "#FF0000AA" }（アルファ値付き）
• RGB: { r: 1, g: 0, b: 0, a: 0.5 }
• 完全な配列: [{ type: "SOLID", color: { r, g, b }, opacity: 1 }]

figma_set_strokes

ノードの線の色を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するノードのID
strokes	color	はい	線の色
strokeWeight	number	いいえ

figma_set_text

テキストノードのテキスト内容を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するテキストノードのID
text	string	はい	新しいテキスト内容

figma_set_opacity

ノードの透明度を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するノードのID
opacity	number	はい	透明度（0-1）

figma_set_corner_radius

角の半径を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するノードのID
radius	number	いいえ
topLeft	number	いいえ
topRight	number	いいえ
bottomLeft	number	いいえ
bottomRight	number	いいえ

figma_set_effects

エフェクト（影、ぼかし）を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更するノードのID
effects	array	はい	エフェクトオブジェクトの配列

影のエフェクト:

{
  "type": "DROP_SHADOW",
  "color": { "color": "#000000" },
  "offset": { "x": 0, "y": 4 },
  "radius": 8,
  "spread": 0,
  "visible": true
}

ぼかしのエフェクト:

{
  "type": "LAYER_BLUR",
  "radius": 10,
  "visible": true
}

figma_apply_style

ローカルスタイルをノードに適用します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	スタイルを適用するノードのID
styleId	string	はい	スタイルのID
property	string	はい	プロパティ: fills, strokes, text, effects, grid

figma_set_variable

変数の値を設定するか、ノードのプロパティにバインドします。

パラメータ	タイプ	必須	説明
variableId	string	はい	変数のID
modeId	string	いいえ
value	any	いいえ
nodeId	string	いいえ
field	string	いいえ
paintIndex	number	いいえ

レイアウトコマンド

figma_set_auto_layout

フレームの自動レイアウトを設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	設定するフレームのID
layoutMode	string	いいえ	NONE, HORIZONTAL, VERTICAL
primaryAxisSizingMode	string	いいえ	FIXED, AUTO
counterAxisSizingMode	string	いいえ	FIXED, AUTO
primaryAxisAlignItems	string	いいえ	MIN, CENTER, MAX, SPACE_BETWEEN
counterAxisAlignItems	string	いいえ	MIN, CENTER, MAX, BASELINE
paddingTop	number	いいえ
paddingRight	number	いいえ
paddingBottom	number	いいえ
paddingLeft	number	いいえ
itemSpacing	number	いいえ
counterAxisSpacing	number	いいえ
layoutWrap	string	いいえ	NO_WRAP, WRAP

figma_set_layout_align

自動レイアウト内での子ノードの配置を設定します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	変更する子ノードのID
layoutAlign	string	いいえ	MIN, CENTER, MAX, STRETCH, INHERIT
layoutGrow	number	いいえ
layoutPositioning	string	いいえ	AUTO, ABSOLUTE

変形コマンド

figma_move_nodes

ノードを新しい位置に移動します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	移動するノードのID
x	number	いいえ
y	number	いいえ
relative	boolean	いいえ

figma_resize_nodes

ノードのサイズを変更します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	サイズを変更するノードのID
width	number	いいえ
height	number	いいえ

figma_delete_nodes

ノードを削除します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	削除するノードのID

figma_group_nodes

複数のノードをグループ化します。

パラメータ	タイプ	必須	デフォルト	説明
nodeIds	string[]	はい		グループ化するノードのID
name	string	いいえ	"Group"	グループ名

figma_ungroup_nodes

グループ化されたノードをグループ解除します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	グループ解除するグループノードのID

figma_rename_node

ノードの名前を変更します。

パラメータ	タイプ	必須	説明
nodeId	string	いいえ	単一のノードID
nodeIds	string[]	いいえ	バッチのノードID
name	string	はい	新しい名前

figma_reorder_node

Zオーダー（レイヤー順）を変更します。

パラメータ	タイプ	必須	説明
nodeId	string	はい	並び替えるノードのID
position	string/number	はい	"front", "back", またはインデックス番号

figma_set_constraints

リサイズ制約を設定します（自動レイアウトではないフレームのみ）。

パラメータ	タイプ	必須	説明
nodeId	string	はい	設定するノードのID
horizontal	string	いいえ	MIN, CENTER, MAX, STRETCH, SCALE
vertical	string	いいえ	MIN, CENTER, MAX, STRETCH, SCALE

ナビゲーションコマンド

figma_set_selection

現在の選択内容を設定します。

パラメータ	タイプ	必須	説明
nodeIds	string[]	はい	選択するノードのID（空の場合は選択を解除）

figma_set_current_page

別のページに切り替えます。

パラメータ	タイプ	必須	説明
pageId	string	はい	切り替えるページのID

エクスポートコマンド

figma_export_node

ノードを画像としてエクスポートします。

パラメータ	タイプ	必須	デフォルト	説明
nodeId	string	はい		エクスポートするノードのID
format	string	いいえ	"PNG"	形式: PNG, SVG, JPG, PDF
scale	number	いいえ	1	エクスポートのスケール（1 = 100%）

Base64エンコードされたデータを返します。

コンポーネントコマンド

figma_detach_instance

コンポーネントからインスタンスを切り離します（フレームに変換）。

パラメータ	タイプ	必須	説明
nodeId	string	はい	切り離すインスタンスのID

💡 トークン最適化

変数クエリ

figma_get_local_variablesの代わりにfigma_search_variablesを使用します:

// 非効率的（約25,000以上のトークン）
figma_get_local_variables({ type: 'ALL' })

// 効率的（約500トークン）
figma_search_variables({
  namePattern: 'tailwind/orange/*',
  type: 'COLOR',
  compact: true,
  limit: 50
})

figma_search_variablesのパラメータ:

パラメータ	タイプ	デフォルト	説明
namePattern	string		ワイルドカードパターン（* = 任意の文字）
type	string	"ALL"	変数タイプのフィルタ
collectionName	string		コレクション名のフィルタ
compact	boolean	true	最小限のデータ（ID、名前、値のみ）
limit	number	50	最大結果数

ノードトラバーサル

figma_get_nodesでdepthパラメータを使用します:

深度	プロパティ	使用例
minimal	~5	ツリートラバーサル、ノードの検索
compact	~10	レイアウトの検査
full	~40	詳細なノード編集

ノードの検索

完全なツリーをトラバースする代わりに検索ツールを使用します:

// ページ/フレーム内で名前でノードを検索
figma_search_nodes({
  parentId: '1:2',           // 必須のスコープ
  nameContains: 'button',    // 大文字小文字を区別しない
  types: ['FRAME', 'COMPONENT'],
  compact: true
})

// 階層を一度に1レベルずつ閲覧
figma_get_children({ parentId: '1:2' })

// 名前でコンポーネントを検索
figma_search_components({ nameContains: 'Header' })

// 名前でスタイルを検索
figma_search_styles({ nameContains: 'primary', type: 'PAINT' })

ツール	使用例	トークン効率
figma_search_nodes	名前でフレーム/要素を検索	約50トークン/ノード
figma_get_children	階層をレベルごとに閲覧	約50トークン/ノード
figma_search_components	特定のコンポーネントを検索	約50トークン/結果
figma_search_styles	特定のスタイルを検索	約30トークン/結果

⚠️ 既知の制限事項

• プラグインコードではES6のスプレッド演算子は使用できません
• ブール演算では、ノードは同じ親を持つ必要があります
• 制約は自動レイアウトの子ノードでは機能しません（layoutAlignを使用してください）
• 線の高さは0です。lengthパラメータを使用してください
• ベクトルはM、L、Q、C、Zコマンドのみサポートします（弧はサポートしていません）
• detachInstance()は祖先のインスタンスも切り離します
• すべてのコマンドには30秒のタイムアウトが設定されています

🛠️ トラブルシューティング

プラグインが接続されない場合

1. MCPサーバーが実行中であることを確認します
2. ポートを確認します。デフォルトは3055です。またはFIGMA_BRIDGE_PORTを設定してください
3. Figmaでプラグインを再起動します
4. プラグインのUIで「Reconnect」をクリックします

ポートが既に使用中の場合

サーバーは自動的に3055 - 3070のポートを試します。特定のポートを使用するには:

FIGMA_BRIDGE_PORT=3057 node src/index.js

複数のClaude Codeインスタンスを使用する場合

各Claude Codeインスタンスは異なるポートを使用することで、異なるFigmaファイルと連携できます:

1. 最初のインスタンス: デフォルトのポート3055を使用します
2. 2番目のインスタンス: FIGMA_BRIDGE_PORT=3056を設定します
3. Figmaプラグインで: プラグインのUIでポート番号を変更して、対応するMCPサーバーに接続します

プラグインのUIにはポート入力フィールドがあります。これを変更することで、異なるMCPサーバーに接続できます。

コマンドがタイムアウトする場合

• コマンドには30秒のタイムアウトが設定されています
• 大きなエクスポートはタイムアウトすることがあります。小さいスケールで試してください
• プラグインがまだ接続されていることを確認します（緑色のステータス）

フォントエラーの場合

テキスト操作にはフォントの読み込みが必要です。プラグインは自動的にこれを処理しますが、インストールされていないフォントを使用すると失敗します。システムで利用可能なフォントを使用してください。

📄 ライセンス

MIT