Figma Mcp Express

figma-mcp-express

コーディングエージェント向けの、高速で、クォータ制限がなく、安定した Figma 自動化ツールです。 figma-mcp-express を使うと、Claude Code、Codex、その他のローカルエージェントが、実際に Figma Desktop で開いているファイル内で、読み取り、編集、移行、監査、スクリーンショット撮影、プロトタイプ作成を行えます。バッチ編集、複数ファイルの振り分け、大容量ファイルの読み取り、複数エージェントのアクティビティ表示、プロトタイプの接続など、本格的なデザインシステム作業のために構築されており、Figma の公式 MCP ツール呼び出しクォータを消費しません。

スクリーンショットやコメントだけでは不十分な場合にお使いください。エージェントは実際のノード、コンポーネント、変数、スタイル、フレーム、プロトタイプのリアクション、接続されたファイルを調べ、デザイナーがすでに使用しているファイルに的を絞った変更を加えられます。

デモ

デモ動画を見る

AI エージェントが Figma 内で問題を修正し、レイアウトを編集し、画面を直接デザインする様子をリアルタイムで確認できます。

チームで使われる理由

• 自動化を増やし、クォータ制限を減らします。 通常のプラグイン側の処理は、Figma 公式 MCP サーバーのシート単位のツール呼び出し制限の対象になりません。
• コンパクトなツール構成です。 vkhanhqui/figma-mcp-go@fe6cd768（この測定で使用した中間フォークのベースライン）と比較すると、デフォルトの tools/list は 73 個のツール／12,214 o200k_base トークンから 21 個のツール／3,283 トークンに減少します（73.1% 削減）。エージェントが作業を始める前に消費するコンテキストを抑えられます。
• スクリーンショットではなく、実際の Figma コンテキストを扱えます。 エージェントは、開いている Desktop ファイル内のライブノード、コンポーネント、変数、スタイル、フレーム、スクリーンショット、プロトタイプのリンクを扱います。
• デザインシステムの移行向けに構築されています。 ソースライブラリとプロダクトファイルを別々のチャンネルに振り分け、適切なコンポーネントとトークンを使って画面を再構築できます。
• 複数エージェントでの実行に対応しています。 エージェントのアクティビティをリアルタイムで確認し、特定のエージェントの編集を追跡し、チャンネルごとにファイルセッションを分離できます。
• 大容量ファイルも使いやすいままです。 大きな読み取り結果はディスクに出力されるため、モデルのコンテキストを埋め尽くすことなく、必要な部分だけを調べられます。
• プロトタイプの自動化もワークフローに含まれます。 プロトタイプのフローを読み取り、リアクションやフローの開始地点を設定できます。

機能

• Figma プラグイン内でエージェントのアクティビティをリアルタイムに確認できます。
• 組み込みの AI エージェントスキルを使って、洗練された Figma 画面を作成できます。
• 複数の開いているファイルを、別々のチャンネルに振り分けられます。
• 実際のコンポーネント、変数、スタイルを使ってデザインシステムを移行できます。
• 開いている Figma ファイル内で、プロトタイプのフローを読み取り、直接接続できます。

適した用途

• デザインシステムの移行とコンポーネントライブラリの切り替え
• 大容量ファイルの監査、整理、トークンの再バインド
• 実際のトークンやコンポーネントのコンテキストが必要なデザインからコードへの引き継ぎ
• 生のシェイプではなく、実際のライブラリを使うプロンプトから Figma へのワークフロー
• ナビゲーション、オーバーレイ、トランジション、フロー開始地点のプロトタイプ監査と接続

クイックスタート

1. サーバーをインストールする

最短の方法は、プラグインをインストールすることです。

Claude Code

claude plugin marketplace add sunhome243/figma-mcp-express
claude plugin install figma-mcp-express@figma-mcp-express

Codex

codex plugin marketplace add sunhome243/figma-mcp-express
codex plugin add figma-mcp-express@figma-mcp-express

2. Figma Desktop プラグインをインポートする

1. plugin.zip をダウンロードするか、ソースからビルドします。
2. Figma Desktop で、Plugins -> Development -> Import plugin from manifest... に移動します。
3. 解凍したプラグインフォルダー、またはこのリポジトリの plugin/ ディレクトリにある manifest.json を選択します。

3. 実行する

1. Figma Desktop で対象ファイルを開きます。
2. Plugins -> Development -> Figma MCP Express を起動します。
3. エージェントが作業している間、プラグインを実行したままにします。
4. 複数のファイルを開くと、マルチファイルのワークフロー用に各ファイルに独自のチャネル ID が割り当てられます。

重要な制限事項

• ほとんどのライブツールを使うには、プラグインを実行した状態で対象ファイルを Figma Desktop で開いておく必要があります。
• fetch_library_catalog は主な REST のみの例外であり、FIGMA_TOKEN が必要です。
• プラグインの実行は、ファイルごとに引き続きシングルスレッドです。サーバーによって競合は軽減されますが、単一ファイルが完全に並列処理されるわけではありません。
• コミュニティキットは、import_component_by_key で使用する前にライブラリとして公開する必要があります。
• リモートフォロワー（ベータ版）はプライベートな Tailnet 内でのみ利用できます。 公開 MCP URL ではありません。リーダーはループバックのみに制限し、Tailscale Serve で公開してください（Funnel は絶対に使用しないでください）。AI クライアントはフォロワーのローカル /mcp に接続します。DEV-SETUP.md を参照してください。

git clone https://github.com/sunhome243/figma-mcp-express.git
cd figma-mcp-express
make build

{
  "mcpServers": {
    "figma-mcp-express": {
      "command": "/absolute/path/to/bin/figma-mcp-express",
      "args": ["--port", "1994"]
    }
  }
}

echo 'export FIGMA_TOKEN=your_token_here' >> ~/.zshrc
source ~/.zshrc

cat <<'EOF' > .env
FIGMA_TOKEN=your_token_here
EOF

その他のドキュメント

• ツールカタログ全体については TOOLS.md を参照してください
• キュー処理、ルーティング、ディスクへの退避、復旧の動作については ARCHITECTURE.md を参照してください
• ローカルでのビルド、再ビルド、テストの手順については DEV-SETUP.md を参照してください

クレジット

このプロジェクトの基盤となるブリッジのアーキテクチャと実装は、GETHOPP LTD in gethopp/figma-mcp-bridge@82b28bc によって作成され、MIT ライセンスのもとで公開されました。

figma-mcp-express は当初、この以前の由来を知らずに、中間のフォークから作成されました。全経緯を把握した後、GETHOPP LTD の著作権表示を復元し、現在は元のプロジェクトを直接クレジットしています。健全で透明性の高いオープンソースエコシステムを大切にし、著作者と派生元を明確にすることを目指しています。

必須のサードパーティ著作権表示は LICENSE に記載されています。figma-mcp-express は MIT ライセンスであり、商用利用が可能です。