figma-edit-mcp

Name: figma-edit-mcp
Author: neozhehan

ローカル

github.com/neozhehanメディア・デザイン1412 週間前に更新

リポジトリ

figma-edit-mcp について

figma-edit-mcpは、MCP経由でAIアシスタントからFigmaのデザインを読み取り、作成・編集できるようにします。Figmaプラグインが編集範囲を選択エリアに限定し、安全規則に反する操作を拒否します。

主な機能

01ページとノードの読み取り・確認
02図形、フレーム、テキスト、コンポーネントの作成
03ノードの変形、スタイル設定、整理
04実行前の編集内容の検証
05選択したページまたはフレームへの変更制限

活用シーン

01複数レイヤーのテキストを一括置換
02コンポーネントインスタンスの一括更新
03選択したフレームのレイアウトとスタイルの調整

MCP 対応

FigmaプラグインとWebSocketブリッジで接続し、Figmaの読み取り・編集ツールをMCPクライアントに提供します。MCPリソースから操作ガイドも利用できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "neozhehan-figma-edit": {
      "command": "npx",
      "args": [
        "-y",
        "figma-edit-mcp"
      ]
    }
  }
}

起動コマンドnpx -y figma-edit-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npmfigma-edit-mcp2.3.3stdio

ツール

掲載時のツール一覧 · 2 週間前に更新

パラメーター	型	必須	説明
pageIds	array	いいえ	検査するページ ID の配列

詳細

Figma Edit MCP

Model Context Protocol を通じて AI アシスタントを Figma に接続し、デザインの読み取り、要素の作成と変更、デザインシステムのプログラムによる管理を行います。

このプラグインを使えば、AI アシスタントが Figma アシスタントとなり、人間には到底かなわないほど 安全に、きれいに、素早く デザインを更新できます。

このプラグインにより、デザイナーは創造的な意思決定だけに専念し、ミスの起こりやすい反復的な手作業による変更を自動システムに任せられます。

🏆 IDEO に紹介されました： AI の振る舞いを信用せずに、稼働中の Figma ファイルを AI に編集させる

📖 ドキュメント： neozhehan.github.io/figma-edit-mcp

このプロジェクトでできること

このプロジェクトには、安全性、整然さ、速さという3つの目標があります。

🛡️ 安全性： プラグインは、AI が要求するすべての操作を実行前にチェックします。操作によってファイルが損なわれる場合、プラグインは実行を拒否し、その理由を AI に伝えます。たとえば、レイヤーで使用中のカラー変数は削除しません。Figma は、使用中の変数を削除しても警告しません。削除すると参照が壊れ、後から見つけるのが非常に困難になります。
✨ 整然さ： ファイルを損なう操作が拒否されるため、壊れた参照や不要な値が蓄積しません。一括更新では、人が確認しようと覚えていたレイヤーだけでなく、指定に一致するすべてのレイヤーが対象になります。
⚡ 速さ： AI は数秒で、数百のレイヤーに一度に変更を適用できます。たとえば、ページ上のすべてのテキストレイヤーで製品名を置き換えたり、あるコンポーネントインスタンスのオーバーライドをほかの50個にコピーしたりできます。

これらの目標は互いに支え合っています。プラグインがミスを防ぐことでファイルの一貫性が保たれ、一貫性のあるファイルは、あなたにとっても AI にとっても扱いやすくなります。

これらの目標の背景にある考え方を読む →

AI がファイルに対してできないこと

AI アシスタントは、ときどき存在しないものを作り出します。存在しないレイヤーの名前を挙げたり、どのレイヤーを編集していたかを誤って記憶したりすることがあります。このプラグインは、AI が正しいことを前提にしていません。プラグインは Figma 内で編集をすべて独自にチェックし、チェックに通らない編集を拒否します。AI がこのチェックを回避することはできません。

プラグインが適用するルール：

AI が編集できるのは、選択した範囲だけです。 接続時に、セッションで使用するページまたはフレームを 1 つ選択します。プラグインは、その範囲外への編集を拒否します。範囲を選択しない場合、AI はファイルを読み取ることはできますが、レイヤーを編集することはできません。
すべての編集で、対象レイヤーを正確に指定する必要があります。 プラグインは、AI が指定したレイヤー名を実際のレイヤー名と照合します。名前が一致しない場合、プラグインは編集を拒否します。これにより、AI が作り出したり、誤って記憶したりしたレイヤーを編集するのを防ぎます。
一括編集で 1 つでも不正な項目があると、何も変更されません。 プラグインは、最初の項目を変更する前に、一括編集のすべての項目を検証します。検証に失敗する項目が 1 つでもある場合、プラグインは一括編集全体を拒否します。
保護されたレイヤーは保護されたままです。 プラグインは、ロックされたレイヤーと共有ライブラリのアセットへの編集を拒否します。また、コンポーネントインスタンス内でレイヤーを追加、削除、移動することも拒否します。
AI は自分の作業範囲を削除できません。 プラグインは、セッション用に割り当てられたページまたはフレームを削除したり、置き換えたりする操作を拒否します。
変数とスタイルの編集には、個別の許可が必要です。 変数またはスタイルを編集するには、プラグインで専用のチェックボックスをオンにする必要があります。どちらのチェックボックスも、デフォルトではオフになっています。許可を与えるのはユーザーであり、AI が自分で許可を与えることはできません。

正直にお伝えすると、プラグインがチェックするのは、編集が「どこで」行われるか、そして「どのレイヤー」に触れるかです。編集がユーザーの望んだものかどうかはチェックできません。すべてのルールに従った誤った編集は、そのまま実行されます。そのため、同僚の作業を確認するのと同じように、AI の作業を確認してください。

正確なルールと、それぞれのルールが適用される条件は、SAFETY.md に記載されています。このドキュメントは開発者向けです。(AI アシスタントは実行時に、figma-edit スキルまたは figma-edit://guide/* リソースを通じて、同じルールを読み込みます。)

作業の分担

このシステムに指示を出すために、Figma の機能をすべて知っている必要はありません。作業は 3 つに分かれています。

ユーザーは、デザインをどうするか決めます。変更内容を平易な言葉で説明し、結果を評価します。どの Figma のメニューやパネルで変更するかを知る必要はありません。
AI アシスタントは、依頼を具体的な Figma 操作に変換し、多数のレイヤーにまたがる反復作業を実行します。
プラグインは Figma 内で動作し、各操作をチェックして、安全でない操作を拒否します。

AI がもたらすのは作業規模です。プラグインがもたらすのは保護です。ユーザーがもたらすのは、デザインに関する判断です。

対応する AI 統合

Cursor
GitHub Copilot (VS Code)
Google Antigravity
Claude Code (VS Code & CLI)
Claude Desktop (Chat, Cowork & Code)
LM Studio

クイックスタート

Figma Edit MCP を最も手早く実行するには、NPM レジストリから直接起動します。このリポジトリをクローンする必要はありません。

1. AI アシスタントを設定する

AI アシスタントの MCP 設定にサーバーを追加します。

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}

設定ファイルの場所はホストによって異なります。下記の統合ごとのセットアップを参照してください。Bun ユーザーは npx の代わりに bunx を使用できます。どちらも同じパッケージを解決します。

2. WebSocket ブリッジを起動する

ターミナルで、MCP サーバーと Figma プラグインを接続するブリッジを起動します。このターミナルは起動したままにしてください。

npx -y --package figma-edit-mcp figma-edit-mcp-socket

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

Figma プラグインは NPM パッケージに同梱されています。まずパッケージを一度インストールして、プラグインファイルをディスク上に配置します。

# In any directory of your choosing (e.g., ~/figma-edit-mcp/)
npm install figma-edit-mcp

次に、Figma デスクトップアプリで以下を行います。

プラグイン → 開発 → マニフェストからプラグインをインポート… を開きます。
上記のディレクトリにある node_modules/figma-edit-mcp/figma_plugin/manifest.json を選択します。

これで、どの Figma ファイルでも「プラグイン → 開発」からプラグインを利用できるようになります。

4. （任意）エージェントスキルをインストールする

このパッケージには、エージェントにサーバーの安全制約、エラーからの復旧方法、ツールの選択方法を教える、ツール横断型のスキルも同梱されています。必要に応じて読み込まれるため、使用されるまではコストがほとんどかかりません。オープンな SKILL.md 標準に対応するエージェント（Claude Code、GitHub Copilot、OpenAI Codex、Cursor、Gemini CLI、Google Antigravity）は、スキルディレクトリに配置すると検出します。

# copy the skill into your agent's skills directory (path varies by host)
cp -R node_modules/figma-edit-mcp/skills/figma-edit ~/.claude/skills/

スキルに対応していないクライアントも、インストール不要で、MCP 接続を通じて figma-edit://guide/* のリソースとして同じガイダンスを利用できます。

ローカルクローンから実行していますか？コントリビューター専用の --local 開発ワークフローについては、CONTRIBUTING.md をご覧ください。

インテグレーション別のセットアップ

クイックスタートの JSON スニペットを、ホストの MCP 設定ファイルに貼り付けます。

インテグレーション	設定ファイルの場所	備考
Cursor	`~/.cursor/mcp.json`	編集後に Cursor を再起動してください
VS Code / GitHub Copilot	`~/Library/Application Support/Code/User/mcp.json`	Copilot を使用するには VS Code 1.102+ が必要です。エージェントモードを有効にしてください
Google Antigravity	`~/.gemini/antigravity/mcp_config.json`	読み込むには Antigravity を再起動してください
Claude Desktop	`~/Library/Application Support/Claude/claude_desktop_config.json`	—
Claude Code（CLI / VS Code）	`claude mcp add FigmaEdit npx figma-edit-mcp` を実行	ファイルの編集は不要です
LM Studio	Developer タブから `mcp.json` を編集	deeplink が提供されている場合は、そちらも使用できます

手動設定

ホストの MCP 設定を直接編集する場合は、該当する設定ファイルにこのスニペットを貼り付けます。

{
  "mcpServers": {
    "FigmaEdit": {
      "command": "npx",
      "args": ["-y", "figma-edit-mcp"]
    }
  }
}

インテグレーション	設定ファイルの場所
Cursor	`~/.cursor/mcp.json`
VS Code / Copilot	`~/Library/Application Support/Code/User/mcp.json`
Antigravity	`~/.gemini/antigravity/mcp_config.json`
Claude Desktop	`~/Library/Application Support/Claude/claude_desktop_config.json`
LM Studio	アプリ内エディター（Developer タブから）を使用するか、`mcp.json` を編集します

ローカルクローンから実行していますか？--local ワークフローについては、CONTRIBUTING.md をご覧ください。

コントリビューション

ローカル開発（ソースからのビルド、クローンからのブリッジの実行、--local を使った統合ワークフロー）については、CONTRIBUTING.md をご覧ください。

Windows + WSL ガイド

Windows 上で実行している Figma から、WSL 内で実行しているブリッジに接続できるようにするには、ブリッジが localhost ではなく 0.0.0.0 で待ち受ける必要があります。

npx -y --package figma-edit-mcp figma-edit-mcp-socket --host 0.0.0.0
# or via environment variable:
FIGMA_EDIT_MCP_SOCKET_HOST=0.0.0.0 npx -y --package figma-edit-mcp figma-edit-mcp-socket

次に、Figma プラグインの WebSocket アドレスに、WSL インスタンスの IP を指定します。

使用方法

WebSocket ブリッジを起動します：npx -y --package figma-edit-mcp figma-edit-mcp-socket
AI アシスタントで MCP サーバーを設定します（インテグレーション別のセットアップを参照）
Figma を開き、「プラグイン → 開発」から Figma Edit MCP プラグインを起動します
channel_join MCP ツールを使って通信を確立します
利用可能な MCP ツールを使い、AI アシスタントから Figma を操作します

MCP ツール

ツールは、アンダースコアで区切られた2階層の名前空間（group_action）に分類されています。読み取り操作には *_list / *_info を、書き込み操作には動詞を使った末尾名を使用します。ノードを変更する操作はすべて node_* に属します。

`page` — ページ

ツール	説明
`page_info`	ドキュメントのページ一覧を取得します。`pageIds` を指定すると、そのページと最上位の子要素を返します

`node` — 任意のノードの読み取り、変換、スタイル設定

ツール	説明
`node_info`	1つ以上のノードを読み取ります。`properties`、`filter`、`maxDepth` による再帰的な走査に対応しています（主要な読み取りツールで、バインドされた変数／明示的なモードも返します）
`node_transform`	絶対値の `x`／`y`／`width`／`height` を設定して、ノードを移動またはサイズ変更します
`node_rename`	ノードの名前を変更します
`node_delete`	検証済みの単一バッチで1つ以上のノードを削除します
`node_clone`	ノードを複製します。新しい位置を指定することもできます
`view_navigate`	エディターの表示をページまたはノードに移動します
`node_group`	ノードを新しいグループで囲みます
`node_ungroup`	グループを解除し、その子を上位階層に移動します
`node_flatten`	ノードとその子を単一のベクターに統合します
`node_insert_child`	ノードを新しい親の下に移動します。任意でインデックスを指定できます
`node_set_auto_layout`	フレームのオートレイアウト（モード、パディング、間隔、配置、サイズ設定）を構成します
`node_set_fill`	ノードの塗りつぶしを色または画像に設定するか、解除します
`node_set_stroke`	線の色と太さを設定します（均一または辺ごと）
`node_set_corner_radius`	角丸の半径を設定します（均一または角ごと）
`node_set_effects`	エフェクト配列（シャドウ、ぼかし）を設定します
`node_apply_style`	ノードを共有ライブラリのスタイル（ペイント／テキスト／エフェクト／グリッド）にリンクします
`node_bind_variable`	変数をノードのプロパティにバインドするか、明示的な変数モードを設定します
`node_export_visual`	ノードを画像（PNG／JPG／SVG／PDF）としてレンダリングします

`create` — 新しいノードの作成

ツール	説明
`create_shape`	任意の塗りつぶし／線を指定して、長方形、楕円、多角形、または星形（`type`）を作成します
`create_frame`	任意の塗りつぶし／線と、すべてのオートレイアウト設定を指定してフレームを作成します
`create_text`	任意のフォントサイズ／太さ／色を指定してテキストノードを作成します
`create_svg`	SVG マークアップ文字列からノードを作成します
`create_component`	既存のフレームをメインコンポーネントに変換します
`create_instance`	指定した位置にコンポーネントのインスタンスを作成します
`create_component_set`	コンポーネントをコンポーネントセット（バリアント）にまとめます

`style` — 共有スタイル

ツール	説明
`style_list`	すべてのローカルスタイル（ペイント／テキスト／エフェクト／グリッド）を一覧表示します
`style_manage`	名前付きスタイルを作成します。`styleId` が指定されている場合は更新します
`style_delete`	ID でローカルスタイルを削除します（利用側とのリンクは解除されますが、解決済みの値は維持されます）

`text` — テキストコンテンツとタイポグラフィ

ツール	説明
`text_set_content`	1つ以上のテキストノードのテキストを一括設定します
`text_set_style`	テキストノードのタイポグラフィプロパティを任意に組み合わせて設定します

`component` — コンポーネントとバリアント

ツール	説明
`component_list`	フィルタリングとスコープのオプションを指定して、コンポーネントを一覧表示します
`component_manage_property`	コンポーネントプロパティの定義（BOOLEAN／TEXT／INSTANCE_SWAP）を追加または編集します
`component_delete_property`	コンポーネントプロパティの定義を削除します

`instance` — コンポーネントインスタンス

ツール	説明
`instance_set_property`	インスタンスのプロパティを1つ設定します（切り替え、テキスト、スワップ、またはバリアント）
`instance_get_overrides`	ソースインスタンスの上書きプロパティを読み取ります
`instance_set_overrides`	コピーした上書きをターゲットインスタンスに適用します

`variable` — 変数とコレクション

ツール	説明
`variable_list`	変数／コレクションを一覧表示するか、ID で詳細を表示します。任意で利用側をスキャンできます
`variable_manage`	コレクションと変数を作成し、値／エイリアスを設定します
`variable_delete`	変数またはコレクションを削除します（使用中の場合は拒否されます）

`annotation` — Dev Mode の注釈

ツール	説明
`annotation_list`	ノードの注釈を読み取ります。任意でカテゴリーを含めることができます
`annotation_set`	ネイティブ注釈（Markdown）を一括作成または更新します

`reaction` — プロトタイプのリアクション

ツール	説明
`reaction_list`	ノードのプロトタイプリアクション（クリックフロー、オーバーレイ）を読み取ります
`reaction_update`	ノードのリアクションを新しい配列全体で置き換えます

`channel` — 接続

ツール	説明
`channel_join`	WebSocket チャネルに参加し、プラグインとの通信を確立します

MCP プロンプト

組み込みプロンプトを使うと、複雑な複数ステップのデザインタスクを進められます。

プロンプト	説明
`swap_overrides_instances`	コンポーネントインスタンスのオーバーライドを、ソースから複数のターゲットに転送します

ベストプラクティス

Figma Edit MCP を使用する際は、次の点に従ってください。

ほかのコマンドを送信する前に、必ず channel_join でチャネルに参加してください。

注意事項

ノード ID の自動正規化

Figma の URL からコピーしたノード ID はハイフン（20485-41）を使いますが、プラグイン API ではコロン（20485:41）が必要です。MCP サーバーは転送前にハイフン形式の ID を自動で変換するため、どちらの形式でも手動で変換せずに使用できます。

謝辞

sonnylazuardi と grab/cursor-talk-to-figma-mcp の貢献者による先行作業を基盤としています。このプロジェクトの土台を築いてくださった皆さまに感謝します。

以下の貢献をしてくださった @dusskapark に感謝します。

テキストコンテンツの一括置換 — 大規模なデザイン内のテキストを効率よく一括更新します。デモ動画
インスタンスのオーバーライドの伝播 — 1つのコマンドで、コンポーネントインスタンスのオーバーライドをソースから複数のターゲットに伝播し、繰り返しのデザイン作業を大幅に削減します。デモ動画

ライセンス

MIT License（MIT）

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。

figma-edit-mcp

figma-edit-mcp について

主な機能

活用シーン

MCP 対応

設定

ツール

詳細

Figma Edit MCP

このプロジェクトでできること

AI がファイルに対してできないこと

作業の分担

対応する AI 統合

クイックスタート

1. AI アシスタントを設定する

2. WebSocket ブリッジを起動する

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

4. （任意）エージェントスキルをインストールする

インテグレーション別のセットアップ

手動設定

コントリビューション

Windows + WSL ガイド

使用方法

MCP ツール

page — ページ

node — 任意のノードの読み取り、変換、スタイル設定

create — 新しいノードの作成

style — 共有スタイル

text — テキストコンテンツとタイポグラフィ

component — コンポーネントとバリアント

instance — コンポーネントインスタンス

variable — 変数とコレクション

annotation — Dev Mode の注釈

reaction — プロトタイプのリアクション

channel — 接続