MCP Figma

🚀 Figma MCP サーバー

Figma MCP サーバーは、Model Context Protocol (MCP) をベースにした Figma API サーバーの実装で、Figma プラグインやウィジェットの統合をサポートしています。

✨ 主な機能

• MCP を通じて Figma API とやり取りすることができます。
• WebSocket サーバーを備えた Figma プラグインとの通信が可能です。
• 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 の機能を拡張するためのカスタムツールで、ワークフローの自動化、新機能の追加、外部サービスの統合を実現できます。以下は Figma プラグインの使用例です：

1. プラグインのインストール：Figma アカウントで必要なプラグインをダウンロードしてインストールします。
2. プラグインの設定：プラグインの要件に従って、必要なパラメーターと権限を設定します。
3. プラグインの使用：デザインプロジェクトでプラグインの機能を呼び出します。例えば、自動レイアウト、データバインディングなどです。

プラグインの開発手順

1. 新しいプラグインの作成：
   • Figma アカウントを開き、プラグイン市場にアクセスします。
   • 「プラグインを作成」ボタンをクリックして、新しいプラグインプロジェクトを開始します。
2. コードの記述：
   • JavaScript または TypeScript を使用して、プラグインのロジックを記述します。
   • イベントリスニング、データ処理などのプラグイン機能を定義します。
3. プラグインのテスト：
   • Figma でテストファイルを開き、開発中のプラグインを読み込みます。
   • すべての機能をテストし、プラグインが予期通りに動作することを確認します。
4. プラグインの公開：
   • テストが完了したら、プラグインの説明と使用方法を記入します。
   • プラグインを Figma 市場に提出し、他のユーザーがダウンロードして使用できるようにします。

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

1. Figma アプリを開き、使用するプロジェクトに移動します。
2. 右上の「プラグイン」アイコンをクリックし、「自分のコンピューターから読み込む」または「URL から読み込む」を選択します。
3. ダウンロードしたプラグインファイルを選択するか、プラグインのリンクを入力し、「開く」をクリックします。

開発

ウィジェットとプラグインのビルド

# ウィジェットのビルド
bun run build-widget

# プラグインのビルド
bun run build-plugin

開発モードの実行

# ウィジェット開発サーバーの起動
bun run dev-widget

# プラグイン開発サーバーの起動
bun run dev-plugin

📄 ライセンス

このプロジェクトは MIT ライセンスの下で提供されています。