Figma MCP サーバー

Figma の API に接続し、AI ツールと LLM が Figma デザインにアクセスして操作できるようにするモデル コンテキスト プロトコル (MCP) サーバー。

特徴

• デザインデータの抽出:Figmaのデザインからコンポーネント、スタイル、テキストを抽出します

• デザインシステム分析: デザインシステムの一貫性とパターンを分析する

• UIコンテンツ管理:デザインからすべてのUIコピーを抽出して整理します

• 開発ハンドオフ: 開発者向けの包括的なドキュメントを生成する

• シームレスなAI統合:Claude、Cursor、その他のMCP互換クライアントなどのAIツールにデザインを接続

はじめる

前提条件

• Node.js 16以上

• Figma 個人アクセストークン（Figma アカウント設定から取得）

インストール

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

   git clone https://github.com/yourusername/figma-mcp-server.git cd figma-mcp-server

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

   npm install

3. プロジェクト ルートに.envファイルを作成します。

   FIGMA_API_TOKEN=your_figma_personal_access_token API_KEY=your_secure_api_key TRANSPORT_TYPE=stdio

4. サーバーを構築します。

   npm run build

5. サーバーを起動します。

   npm start

クライアントへの接続

デスクトップ版クロード

1. Claude for Desktop 構成ファイルを開くか作成します。

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

   • Windows: %APPDATA%\Claude\claude_desktop_config.json

2. 次の構成を追加します。

   { "mcpServers": { "figma": { "command": "node", "args": ["/absolute/path/to/figma-mcp-server/build/index.js"], "env": { "FIGMA_API_TOKEN": "your_figma_personal_access_token", "TRANSPORT_TYPE": "stdio" } } } }

3. デスクトップ版のClaudeを再起動する

カーソル

グローバル構成

カーソルの MCP 構成ファイルを作成または編集します。

• macOS: ~/Library/Application Support/Cursor/mcp.json

• Windows: %APPDATA%\Cursor\mcp.json

プロジェクト固有の構成

1. プロジェクト ルートに.cursorディレクトリを作成します。

   mkdir -p .cursor

2. そのディレクトリ内にmcp.jsonファイルを作成します。

   { "mcpServers": { "figma-mcp": { "url": "http://localhost:3000/sse", "env": { "API_KEY": "your_secure_api_key" } } } }

利用可能なツール

利用可能なプロンプト

• analyze-design-system - デザインシステムのコンポーネントとスタイルの一貫性を分析する

• extract-ui-copy - デザインからすべてのUIコピーを抽出して整理します

• generate-dev-handoff - 設計に基づいて開発ハンドオフドキュメントを生成する

使用例

Claude で使用する場合:

カーソルと併用する場合:

環境変数

建築

この MCP サーバー:

1. 個人アクセストークンを使用してFigma APIに接続します

2. モデルコンテキストプロトコルに準拠した標準化されたインターフェースを公開します

3. LLM が Figma デザインを操作するために使用できるツール、リソース、プロンプトを提供します。

4. stdio トランスポート (ローカル接続) と SSE トランスポート (リモート接続) の両方をサポートします。

貢献

貢献を歓迎します！お気軽にプルリクエストを送信してください。