Figma MCP サーバー

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

特徴

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

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

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

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

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

Related MCP server: Figma MCP Server

はじめる

前提条件

• 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

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

プロジェクト固有の構成

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 で使用する場合:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

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

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

環境変数

建築

この MCP サーバー:

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

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

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

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

貢献

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