Figma MCP Server

🚀 Figma MCP（モデルコンテキストプロトコル）

Model Context Protocolを使用して、Cursor Agent経由でFigma内でデザインを作成および修正するための包括的なソリューションです。

ブログ: https://xflux.us/2025/04/06/ai-powered-design-automation-building-a-figma-mcp-with-cursor/

🚀 クイックスタート

1. MCPサーバーの設定

cd figma-mcp-server
cp .env.example .env  # このファイルを編集して、あなたのFigmaトークンを追加します
bun install
bun run index.ts

2. Figmaプラグインの設定

cd figma-plugin
npm install
npm run build

その後、Figmaでプラグインをインポートします。

1. Figmaを開きます。
2. 「Plugins」>「Development」>「manifestからプラグインをインポート」に移動します。
3. figma-plugin/manifest.jsonファイルを選択します。

3. Cursor Agentへの接続

Cursorで以下の操作を行います。

1. 「Settings」>「Agent」>「MCPサーバー」に移動します。
2. 新しいサーバーを追加し、URLをhttp://localhost:3000/api/mcp/schemaに設定します。

✨ 主な機能

このプロジェクトにより、AIが自然言語の指示を通じてFigma内でデザインを作成できるようになります。主なコンポーネントは以下の通りです。

1. MCPサーバー：Bun + TypeScriptベースのサーバーで、モデルコンテキストプロトコルを実装し、WebSocketを介してFigmaプラグインと通信します。
2. Figmaプラグイン：Figma内で動作するプラグインで、MCPサーバーからの指示に基づいてデザイン操作を実行します。

この統合により、自然言語を使用して以下の操作が可能です。

• 基本的なデザイン要素（形状、テキストなど）を作成する。
• 複数の部分から構成される完全なページレイアウトを設計する。
• 既存のデザインを修正する。

📦 インストール

リポジトリ構造

• figma-mcp-server/：MCPサーバーの実装
• figma-plugin/：Figma内で動作する、デザイン操作を実行するためのプラグイン

💻 使用例

基本的な使用法

設定が完了したら、Cursor Agentを使用して以下のような指示でデザインを作成できます。

見出し、「当社の製品」というサブタイトル付きのヒーローセクション、機能セクションに3つの機能、および連絡先情報を含むフッターを持つランディングページを作成します。

📚 ドキュメント

詳細な説明については、以下を参照してください。

• MCPサーバーREADME
• Figmaプラグインインストールガイド

🔧 技術詳細

1. Cursor Agentが自然言語の指示を受け取ります。
2. 構造化されたリクエストをMCPサーバーに送信します。
3. MCPサーバーがリクエストを処理し、WebSocketを介してFigmaプラグインに指示を送信します。
4. FigmaプラグインがFigma内でデザイン操作を実行します。

📄 ライセンス

MIT