figma-mcp-go

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

プラグイン経由で完全な読み取り/書き込みアクセスが可能なオープンソースのFigma MCPサーバーです。REST APIを使用せず、レート制限もありません。テキストをデザインに、デザインを実際のコードに変換できます。Cursor、Claude、GitHub Copilot、およびMCP互換のあらゆるAIツールで動作します。

ハイライト

Figma APIトークン不要
レート制限なし — 無料プランでも安心
プラグインブリッジ経由でFigmaのライブデータを読み取りおよび書き込み可能 — 合計58個のツール
完全なデザイン自動化 — スタイル、変数、コンポーネント、プロトタイプ、コンテンツ
デザイン戦略を内蔵 — read_design_strategy、design_strategy などのプロンプトを組み込み済み

https://github.com/user-attachments/assets/17bda971-0e83-4f18-8758-8ac2b8dcba62

なぜこれが必要なのか

ほとんどのFigma MCPサーバーは Figma REST API に依存しています。

それは問題ないように思えますが…以下の制限に達するまでは：

プラン	制限
Starter / View / Collab	月間6ツールコール
Pro / Org (Dev seat)	1日200ツールコール
Enterprise	1日600ツールコール

AIツールを試していると、数分でこの制限に達してしまいます。

私には高い制限料金を支払う余裕がありませんでした。そこで、APIを一切使用しないものを作成しました。

インストールとセットアップ

npx でインストールします — ビルド手順は不要です。セットアップ動画を見るか、以下の手順に従ってください。

動画を見る

1. AIツールの設定

Claude Code CLI

claude mcp add -s project figma-mcp-go -- npx -y @vkhanhqui/figma-mcp-go@latest

.mcp.json (Claudeおよびその他のMCP互換ツール)

{
  "mcpServers": {
    "figma-mcp-go": {
      "command": "npx",
      "args": ["-y", "@vkhanhqui/figma-mcp-go"]
    }
  }
}

.vscode/mcp.json (Cursor / VS Code / GitHub Copilot)

{
  "servers": {
    "figma-mcp-go": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@vkhanhqui/figma-mcp-go"
      ]
    }
  }
}

2. Figmaプラグインのインストール

Figmaデスクトップで：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ノードを再利用可能なコンポーネントに変換

書き込み — 変更

ツール	説明
`set_text`	既存のTEXTノードのテキスト内容を更新
`set_fills`	ノードの塗りつぶし色（16進数）を設定
`set_strokes`	ノードのストローク色と太さを設定
`set_opacity`	1つ以上のノードの不透明度を設定（0 = 透明、1 = 不透明）
`set_corner_radius`	角丸を設定 — 一括または角ごとに指定
`set_auto_layout`	フレームのオートレイアウト（flex）プロパティを設定または更新
`move_nodes`	ノードを絶対的なx/y位置に移動
`resize_nodes`	ノードの幅や高さを変更
`rename_node`	ノードの名前を変更
`clone_node`	ノードを複製（オプションで位置や親の変更が可能）

書き込み — 削除

ツール	説明
`delete_nodes`	1つ以上のノードを完全に削除

書き込み — プロトタイプ

ツール	説明
`set_reactions`	ノードにプロトタイプリアクション（トリガー + アクション）を設定。モードは `replace` または `append`
`remove_reactions`	ノードから0から始まるインデックスでリアクションをすべて、または特定のものだけ削除

書き込み — スタイル

ツール	説明
`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`	ローカル変数をノードプロパティにバインド
`delete_variable`	変数またはコレクション全体を削除

書き込み — コンポーネントとナビゲーション

ツール	説明
`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`	Devモードのアノテーション
`get_fonts`	現在のページで使用されているすべてのフォント（頻度順）
`get_reactions`	ノード上のプロトタイプ/インタラクションリアクション

エクスポート

ツール	説明
`get_screenshot`	ノードのBase64画像エクスポート
`save_screenshots`	ディスクへの画像エクスポート（サーバーサイド、APIコールなし）
`export_frames_to_pdf`	複数のフレームを単一の複数ページ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`	プロトタイプリアクションをインタラクションフロー図にマッピング

貢献

IssueやPRを歓迎します。

figma-mcp-go

figma-mcp-go

なぜこれが必要なのか

インストールとセットアップ

1. AIツールの設定

2. Figmaプラグインのインストール

利用可能なツール

書き込み — 作成

書き込み — 変更

書き込み — 削除

書き込み — プロトタイプ

書き込み — スタイル

書き込み — 変数

書き込み — コンポーネントとナビゲーション

読み取り — ドキュメントと選択

読み取り — スタイルと変数

エクスポート

MCPプロンプト

関連プロジェクト

貢献

Star History

Resources

Tools

Latest Blog Posts

MCP directory API