figma-mcp-rust について
figma-mcp-rustは、プラグインブリッジ経由でFigmaのドキュメントを読み書きするRust製のオープンソースMCPサーバーです。デザイン要素、スタイル、変数、コンポーネント、プロトタイプの操作や書き出しに対応し、REST APIは使用しません。
主な機能
- 01プラグインブリッジ経由でFigmaドキュメントを読み書き
- 02フレーム、ノード、スタイル、変数の作成と編集
- 03ページ、コンポーネント、注釈、デザインコンテキストの確認
- 04プロトタイプのリアクションとコンポーネントインスタンスの管理
- 05スクリーンショット、PDF、デザイントークンの書き出し
- 06デザイン戦略のMCPプロンプトを利用
活用シーン
- 01MCP対応AIツールからFigmaデザインを確認
- 02デザイン要素やスタイルを作成または更新
- 03変数やデザイントークンを生成または調整
- 04フレームやトークンを書き出して後続作業に利用
MCP 対応
MCP対応クライアントに73種類のツールとデザイン戦略プロンプトを提供します。REST APIではなく、Figmaプラグインブリッジを通じて接続します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
73掲載時のツール一覧 · 2 週間前に更新
このツールにパラメーターはありません。
詳細
figma-mcp-rust
**vkhanhqui/figma-mcp-go**を高性能な Rust に移植したものです。 オリジナルの設計、Figma プラグインブリッジ、ツールカタログに関する功績はすべて @vkhanhquiに帰属します。このリポジトリでは、構造化ログ、競合状態のないリクエスト相関、宣言的なツールテーブルを備えて、同じ MCP サーバーを Rust に移植しました。 詳細は、以下の「Rust での書き換えによる変更点」をご覧ください。
Figma MCP:無料、レート制限なし
プラグイン経由で完全な読み書きアクセスが可能な、オープンソースの Figma MCP サーバーです。REST API もレート制限もありません。テキストをデザインに、デザインを実際のコードに変換します。Cursor、Claude、GitHub Copilot、および MCP 対応のあらゆる AI ツールで利用できます。
主な特長
- Figma API トークンは不要です
- レート制限なし、無料プランでも安心です
- プラグインブリッジ経由で Figma のライブデータを読み書きできます。ツールは合計 73 個です
- スタイル、変数、コンポーネント、プロトタイプ、コンテンツに対応した完全なデザイン自動化
- MCP プロンプトとしてデザイン戦略を内蔵し、対応する Claude Code スキルも用意しています
これを作った理由
ほとんどの Figma MCP サーバーはFigma REST APIに依存しています。
次の制限に直面するまでは問題ないように思えます。
| プラン | 制限 |
|---|---|
| Starter / View / Collab | 月 6 回のツール呼び出し |
| Pro / Org(Dev シート) | 1 日 200 回のツール呼び出し |
| Enterprise | 1 日 600 回のツール呼び出し |
AI ツールを試していると、数分で使い切ってしまいます。
より高い制限の料金を払えるだけの余裕がありませんでした。 そこで、API をまったく使わないものを作りました。
インストールとセットアップ
npxでインストールできます。ビルド手順は不要です。
1. AI ツールを設定する
Claude Code CLI
claude mcp add -s project figma-mcp-rust -- npx -y @nntoan/figma-mcp-rust@latest
Claude Code プラグインマーケットプレイス
/plugin marketplace add nntoan/figma-mcp-rust
/plugin install figma-mcp-rust@figma-mcp-rust
プラグインをインストールすると、デザインの読み取りからトークンの生成、ブリッジのトラブルシューティングまで、以下のワークフローを網羅する 13 個のスキルも追加されます。
Codex CLI
codex mcp add figma-mcp-rust -- npx -y @nntoan/figma-mcp-rust@latest
.mcp.json(Claude およびその他の MCP 対応ツール)
{
"mcpServers": {
"figma-mcp-rust": {
"command": "npx",
"args": ["-y", "@nntoan/figma-mcp-rust"]
}
}
}
.vscode/mcp.json(Cursor / VS Code / GitHub Copilot)
{
"servers": {
"figma-mcp-rust": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@nntoan/figma-mcp-rust"
]
}
}
}
2. Figma プラグインをインストールする
- Figma Desktop で、Plugins → Development → Import plugin from manifestを選択します
- plugin.zipから
manifest.jsonを選択します - 任意の Figma ファイル内でプラグインを実行します
利用可能なツール
書き込み:作成
| ツール | 説明 |
|---|---|
create_frame | オートレイアウト、塗り、親を指定してフレームを作成します(いずれも任意) |
create_rectangle | 塗りと角丸を任意で指定して長方形を作成します |
create_ellipse | 楕円または円を作成します |
create_text | テキストノードを作成します(フォントは自動的に読み込まれます) |
import_image | Base64 画像をデコードし、長方形の塗りとして配置します |
create_component | 既存の FRAME ノードを再利用可能なコンポーネントに変換します |
create_section | ページ上のフレームを整理するための Figma Section ノードを作成します |
書き込み:変更
| ツール | 説明 |
|---|---|
set_text | 既存の TEXT ノードのテキスト内容を更新します |
set_fills | ノードに単色の塗りつぶし色(16 進数)を設定します |
set_strokes | ノードに単色のストローク色と太さを設定します |
set_opacity | 1 つ以上のノードの不透明度を設定します(0 = 透明、1 = 不透明) |
set_corner_radius | 角の半径を一律または個別に設定します |
set_auto_layout | フレームのオートレイアウト(フレックス)プロパティを設定または更新します |
set_visible | 1 つ以上のノードを表示または非表示にします |
lock_nodes | 誤編集を防ぐために 1 つ以上のノードをロックします |
unlock_nodes | 1 つ以上のノードのロックを解除します |
rotate_nodes | 1 つ以上のノードに絶対回転角度(度)を設定します |
reorder_nodes | Z オーダーを変更します:bringToFront、sendToBack、bringForward、sendBackward |
set_blend_mode | 1 つ以上のノードにブレンドモード(MULTIPLY、SCREEN、OVERLAY など)を設定します |
set_constraints | 1 つ以上のノードにレスポンシブ制約 { horizontal, vertical } を設定します |
move_nodes | ノードを絶対位置 x/y に移動します |
resize_nodes | ノードの幅および/または高さを変更します |
rename_node | ノードの名前を変更します |
clone_node | ノードを複製し、必要に応じて位置変更または親の変更を行います |
reparent_nodes | ノードを別の親フレーム、グループ、またはセクションに移動します |
batch_rename_nodes | 検索/置換、正規表現、または接頭辞/接尾辞を使ってノードの名前を一括変更します |
find_replace_text | サブツリーまたはページ内のすべての TEXT ノードを対象にテキストを検索・置換します。正規表現をサポートします |
書き込み:削除
| ツール | 説明 |
|---|---|
delete_nodes | 1 つ以上のノードを完全に削除します |
書き込み:プロトタイプ
| ツール | 説明 |
|---|---|
set_reactions | ノードにプロトタイプのリアクション(トリガー+アクション)を設定します。モードは replace または append です |
remove_reactions | ノードからすべてのリアクション、またはゼロ始まりのインデックスで指定したリアクションを削除します |
書き込み:スタイル
| ツール | 説明 |
|---|---|
set_effects | ノードにドロップシャドウ/ぼかし効果を直接適用します(スタイルは不要です) |
create_paint_style | 単色を使った名前付きペイントスタイルを作成します |
create_text_style | フォント、サイズ、間隔を指定した名前付きテキストスタイルを作成します |
create_effect_style | 名前付きエフェクトスタイル(ドロップシャドウ、内側のシャドウ、ぼかし)を作成します |
create_grid_style | 名前付きレイアウトグリッドスタイル(列、行、またはグリッド)を作成します |
update_paint_style | 既存のペイントスタイルの名前または色を変更します |
apply_style_to_node | 既存のローカルスタイルをノードに適用し、そのスタイルにリンクします |
delete_style | ID を指定して任意のスタイル(ペイント、テキスト、エフェクト、またはグリッド)を削除します |
書き込み:変数
| ツール | 説明 |
|---|---|
create_variable_collection | 必要に応じて初期モードを指定し、新しいローカル変数コレクションを作成します |
add_variable_mode | 既存のコレクションに新しいモード(例:ライト/ダーク)を追加します |
create_variable | コレクションに変数(COLOR/FLOAT/STRING/BOOLEAN)を作成します |
set_variable_value | 特定のモードに対して変数の値を設定します |
bind_variable_to_node | 変数をノードのプロパティにバインドします。fillColor、strokeColor、visible、opacity、rotation、width、height、角の半径、間隔などをサポートします |
delete_variable | 変数またはコレクション全体を削除します |
書き込み:ページ
| ツール | 説明 |
|---|---|
add_page | ドキュメントに新しいページを追加します(名前とインデックスは任意です) |
delete_page | ID または名前でページを削除します(唯一のページは削除できません) |
rename_page | ID または現在の名前でページの名前を変更します |
書き込み:コンポーネントとナビゲーション
| ツール | 説明 |
|---|---|
navigate_to_page | ID または名前でアクティブな Figma ページに切り替えます |
group_nodes | 2 つ以上のノードを GROUP にまとめます |
ungroup_nodes | GROUP ノードをグループ解除し、子ノードを親に移動します |
swap_component | INSTANCE ノードのメインコンポーネントを入れ替えます |
detach_instance | コンポーネントインスタンスを切り離し、通常のフレームに変換します |
読み取り:ドキュメントと選択範囲
| ツール | 説明 |
|---|---|
get_document | 現在のページツリー全体 |
get_metadata | ファイル名、ページ数、現在のページ |
get_pages | すべてのページ(ID+名前)。軽量で、ツリーを読み込みません |
get_selection | 現在選択されているノード |
get_node | IDで指定した単一のノード |
get_nodes_info | IDで指定した複数のノード |
get_design_context | detail レベル(minimal/compact/full)で深さを制限したツリー |
search_nodes | サブツリー内で、名前の部分一致やタイプを使ってノードを検索 |
scan_text_nodes | サブツリー内のすべてのテキストノード |
scan_nodes_by_types | 指定したタイプの一覧に一致するノード |
get_viewport | 現在のビューポートの中心、ズーム、表示範囲 |
読み取り:スタイルと変数
| ツール | 説明 |
|---|---|
get_styles | ペイント、テキスト、エフェクト、グリッドのスタイル |
get_variable_defs | 変数コレクションと値 |
get_local_components | バリアントプロパティを含む、すべてのコンポーネントとコンポーネントセット |
get_annotations | 開発モードの注釈 |
get_fonts | 現在のページで使われているすべてのフォント。使用頻度順 |
get_reactions | ノード上のプロトタイプ/インタラクションのリアクション |
エクスポート
| ツール | 説明 |
|---|---|
get_screenshot | 任意のノードをBase64画像としてエクスポート |
save_screenshots | 画像をディスクにエクスポート(サーバー側で処理され、API呼び出しは不要) |
export_frames_to_pdf | 複数のフレームを1つの複数ページPDFファイルとしてエクスポートし、ディスクに保存 |
export_tokens | デザイントークン(変数+ペイントスタイル)をJSONまたはCSSとしてエクスポート |
MCP プロンプト
| プロンプト | 説明 |
|---|---|
read_design_strategy | Figmaのデザインを読み取るためのベストプラクティス |
design_strategy | デザインの作成と変更に関するベストプラクティス |
text_replacement_strategy | デザイン全体のテキストを分割して置換する方法 |
annotation_conversion_strategy | 手動の注釈をFigmaネイティブの注釈に変換 |
swap_overrides_instances | コンポーネントインスタンス間でオーバーライドを引き継ぐ |
reaction_to_connector_strategy | プロトタイプのリアクションをインタラクションフロー図に対応付ける |
style_audit_strategy | リンクされたスタイルや変数ではなく、生の値を使用しているノードを特定 |
bulk_rename_strategy | 一貫した命名規則に従ってノードの名前を変更 |
design_token_generation_strategy | 既存のデザインから変数とスタイルのトークンシステムを構築 |
generate_color_palette | 基本となる色階調と、変数としてのセマンティックエイリアスを作成 |
generate_type_scale | テキストスタイルとして、完全なタイポグラフィスケールを作成 |
generate_component_variants | コンポーネントを複製し、サイズ、テーマ、状態、またはダークモードのバリアントを作成 |
各プロンプトは、プラグインマーケットプレイス経由でサーバーをインストールすると、接続の問題に対応する bridge-troubleshooting スキルとともに、Claude Codeのスキルとしても利用できます。
関連プロジェクト
- vkhanhqui/figma-mcp-go:Go版のオリジナル
- alvinindra/figma-mcp-rust:Rustへの最初の移植版(上流プロジェクト)
- magic-spells/figma-mcp-bridge
- grab/cursor-talk-to-figma-mcp
- gethopp/figma-mcp-bridge
Rust への書き換えで変更された点
- メモリーセーフな WebSocket ブリッジ:リクエストとレスポンスの対応付けに、
sync.Onceで保護された Go のチャネルではなくtokio::sync::oneshotを使用し、クローズ済みチャネルへの送信競合を解消しました。 - 宣言的なツールテーブル:73 個すべてのツール登録を、繰り返しの多い Go ハンドラー約 700 行ではなく、単一の静的配列(
src/tools/definitions.rs)にまとめました。ツールを追加するには、エントリーを 1 つ追加し、必要に応じて JSON Schema ビルダーを追加します。 tracingによる構造化ログ:各コンポーネントが、対象ごと(bridge、leader、follower、election、node)に、調整可能なレベルでイベントを出力します。詳細なログを出力するには、FIGMA_MCP_LOG=debugを設定してください。- フォーマット済み文字列ではなく、
thiserrorベースのエラー型:呼び出し側で特定の失敗モード(NotConnected、Timeoutなど)を判定できます。 lopdfによる純粋な Rust 製 PDF 結合:外部 CLI への依存はありません。clapによる本格的な CLI:ヘルプテキストの自動生成と入力検証を備えています。
コントリビューション
Issue や PR を歓迎します。
スター履歴
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。