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 トランスポート (リモート接続) の両方をサポートします。

貢献

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