mcpField
F
figma-mcp-rust

figma-mcp-rust

ローカル
github.com/nntoanメディア・デザイン04 週間前に更新

figma-mcp-rust について

figma-mcp-rustは、プラグインブリッジ経由でFigmaのドキュメントを読み書きするRust製のオープンソースMCPサーバーです。デザイン要素、スタイル、変数、コンポーネント、プロトタイプの操作や書き出しに対応し、REST APIは使用しません。

主な機能

  1. 01プラグインブリッジ経由でFigmaドキュメントを読み書き
  2. 02フレーム、ノード、スタイル、変数の作成と編集
  3. 03ページ、コンポーネント、注釈、デザインコンテキストの確認
  4. 04プロトタイプのリアクションとコンポーネントインスタンスの管理
  5. 05スクリーンショット、PDF、デザイントークンの書き出し
  6. 06デザイン戦略のMCPプロンプトを利用

活用シーン

  1. 01MCP対応AIツールからFigmaデザインを確認
  2. 02デザイン要素やスタイルを作成または更新
  3. 03変数やデザイントークンを生成または調整
  4. 04フレームやトークンを書き出して後続作業に利用

MCP 対応

MCP対応クライアントに73種類のツールとデザイン戦略プロンプトを提供します。REST APIではなく、Figmaプラグインブリッジを通じて接続します。

設定

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

mcp.json · 共通設定
{
"mcpServers": {
"nntoan-figma-mcp-rust": {
"command": "npx",
"args": [
"-y",
"@nntoan/figma-mcp-rust"
]
}
}
}
起動コマンドnpx -y @nntoan/figma-mcp-rust

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

パッケージ
npm@nntoan/figma-mcp-rust0.1.0

ツール

73

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

このツールにパラメーターはありません。

詳細

figma-mcp-rust

**vkhanhqui/figma-mcp-go**を高性能な Rust に移植したものです。 オリジナルの設計、Figma プラグインブリッジ、ツールカタログに関する功績はすべて @vkhanhquiに帰属します。このリポジトリでは、構造化ログ、競合状態のないリクエスト相関、宣言的なツールテーブルを備えて、同じ MCP サーバーを Rust に移植しました。 詳細は、以下の「Rust での書き換えによる変更点」をご覧ください。

Figma MCP:無料、レート制限なし

npm バージョン MCP レジストリ ライセンス:MIT GitHub スター数

プラグイン経由で完全な読み書きアクセスが可能な、オープンソースの 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 回のツール呼び出し
Enterprise1 日 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 プラグインをインストールする
  1. Figma Desktop で、Plugins → Development → Import plugin from manifestを選択します
  2. plugin.zipからmanifest.jsonを選択します
  3. 任意の Figma ファイル内でプラグインを実行します

利用可能なツール

書き込み:作成
ツール説明
create_frameオートレイアウト、塗り、親を指定してフレームを作成します(いずれも任意)
create_rectangle塗りと角丸を任意で指定して長方形を作成します
create_ellipse楕円または円を作成します
create_textテキストノードを作成します(フォントは自動的に読み込まれます)
import_imageBase64 画像をデコードし、長方形の塗りとして配置します
create_component既存の FRAME ノードを再利用可能なコンポーネントに変換します
create_sectionページ上のフレームを整理するための Figma Section ノードを作成します
書き込み:変更
ツール説明
set_text既存の TEXT ノードのテキスト内容を更新します
set_fillsノードに単色の塗りつぶし色(16 進数)を設定します
set_strokesノードに単色のストローク色と太さを設定します
set_opacity1 つ以上のノードの不透明度を設定します(0 = 透明、1 = 不透明)
set_corner_radius角の半径を一律または個別に設定します
set_auto_layoutフレームのオートレイアウト(フレックス)プロパティを設定または更新します
set_visible1 つ以上のノードを表示または非表示にします
lock_nodes誤編集を防ぐために 1 つ以上のノードをロックします
unlock_nodes1 つ以上のノードのロックを解除します
rotate_nodes1 つ以上のノードに絶対回転角度(度)を設定します
reorder_nodesZ オーダーを変更します:bringToFront、sendToBack、bringForward、sendBackward
set_blend_mode1 つ以上のノードにブレンドモード(MULTIPLY、SCREEN、OVERLAY など)を設定します
set_constraints1 つ以上のノードにレスポンシブ制約 { horizontal, vertical } を設定します
move_nodesノードを絶対位置 x/y に移動します
resize_nodesノードの幅および/または高さを変更します
rename_nodeノードの名前を変更します
clone_nodeノードを複製し、必要に応じて位置変更または親の変更を行います
reparent_nodesノードを別の親フレーム、グループ、またはセクションに移動します
batch_rename_nodes検索/置換、正規表現、または接頭辞/接尾辞を使ってノードの名前を一括変更します
find_replace_textサブツリーまたはページ内のすべての TEXT ノードを対象にテキストを検索・置換します。正規表現をサポートします
書き込み:削除
ツール説明
delete_nodes1 つ以上のノードを完全に削除します
書き込み:プロトタイプ
ツール説明
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_styleID を指定して任意のスタイル(ペイント、テキスト、エフェクト、またはグリッド)を削除します
書き込み:変数
ツール説明
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_pageID または名前でページを削除します(唯一のページは削除できません)
rename_pageID または現在の名前でページの名前を変更します
書き込み:コンポーネントとナビゲーション
ツール説明
navigate_to_pageID または名前でアクティブな Figma ページに切り替えます
group_nodes2 つ以上のノードを GROUP にまとめます
ungroup_nodesGROUP ノードをグループ解除し、子ノードを親に移動します
swap_componentINSTANCE ノードのメインコンポーネントを入れ替えます
detach_instanceコンポーネントインスタンスを切り離し、通常のフレームに変換します
読み取り:ドキュメントと選択範囲
ツール説明
get_document現在のページツリー全体
get_metadataファイル名、ページ数、現在のページ
get_pagesすべてのページ(ID+名前)。軽量で、ツリーを読み込みません
get_selection現在選択されているノード
get_nodeIDで指定した単一のノード
get_nodes_infoIDで指定した複数のノード
get_design_contextdetail レベル(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_strategyFigmaのデザインを読み取るためのベストプラクティス
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のスキルとしても利用できます。


関連プロジェクト


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 を歓迎します。

スター履歴

スター履歴グラフ

コメント

MCP は初めてですか?

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

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