Figma MCP Server

Figma MCP サーバー

Model Context Protocol（MCP）に基づく Figma API サーバーの実装で、Figma プラグインおよびウィジェットとの連携をサポートします。

機能

• MCP を通じて Figma API とやり取りします
• Figma プラグイン通信用の WebSocket サーバー
• Figma ウィジェットの開発をサポートします
• コマンドライン引数による環境変数の設定
• 豊富な Figma 操作ツール

インストール

1. リポジトリをクローンします。

git clone <repository-url>
cd figma-mcp

2. 依存関係をインストールします。

bun install

設定

環境変数

.env ファイルを作成し、次の環境変数を設定します。

FIGMA_PERSONAL_ACCESS_TOKEN=your_figma_token
PORT=3001
NODE_ENV=development

Figma アクセストークンの取得

1. Figma にログインします
2. 「アカウント設定」>「個人用アクセストークン」に移動します
3. 新しいアクセストークンを作成します
4. トークンを .env ファイルにコピーするか、コマンドライン引数で渡します

使用方法

プロジェクトのビルド

bun run build

開発サーバーの起動

bun run dev

コマンドライン引数の使用

-e パラメーターを使用して環境変数を設定できます。

bun --watch src/index.ts -e FIGMA_PERSONAL_ACCESS_TOKEN=your_token -e PORT=6000

専用のトークンパラメーターも使用できます。

bun --watch src/index.ts --token your_token

または、その短縮形を使用できます。

bun --watch src/index.ts -t your_token

Cursor での MCP の設定

.cursor/mcp.json ファイルに追加します。

{
  "Figma MCP": {
    "command": "bun",
    "args": [
      "--watch",
      "/path/to/figma-mcp/src/index.ts",
      "-e",
      "FIGMA_PERSONAL_ACCESS_TOKEN=your_token_here",
      "-e",
      "PORT=6000"
    ]
  }
}

利用可能なツール

サーバーは、次の Figma 操作ツールを提供します。

• ファイル操作：ファイルやバージョンなどを取得します。
• ノード操作：Figma ノードを取得、操作します
• コメント操作：Figma ファイル内のコメントを管理します
• 画像操作：Figma の要素を画像としてエクスポートします
• 検索機能：Figma ファイル内のコンテンツを検索します
• コンポーネント操作：Figma コンポーネントを管理します
• キャンバス操作：長方形、円、テキストなどを作成します
• ウィジェット操作：Figma ウィジェットを管理します

Figma プラグインの開発

プラグインの概要

Figma プラグインは、Figma の機能を拡張するカスタマイズ可能なツールです。ワークフローの自動化、新機能の追加、外部サービスとの連携が可能になります。この MCP サーバーを使うと、Figma プラグインを簡単に開発、テスト、デプロイできます。

ビルドとテスト

プラグインをビルドします。

bun run build:plugin

開発モードで実行します。

bun run dev:plugin

Figma でのプラグインの読み込み

1. Figma で右クリックしてメニューを開き、Plugins -> Development -> Import plugin from manifest... を選択します
2. プラグインの manifest.json ファイルを選択します
3. プラグインが Figma のプラグインメニューに表示されます

プラグインと MCP サーバーの連携

プラグインは WebSocket を介して MCP サーバーと通信し、次のことを実現できます。

• 複雑なデータ処理
• 外部 API との連携
• セッションをまたいだデータの永続化
• AI 機能との連携

開発

ウィジェットのビルド

bun run build:widget

プラグインのビルド

bun run build:plugin

開発モード

bun run dev:widget  # Widget development mode
bun run dev:plugin  # Plugin development mode

ライセンス

MIT