Figma MCP Server

Figma MCP Server

Figma の API に接続する Model Context Protocol（MCP）サーバーです。AI ツールや LLM から Figma のデザインにアクセスし、操作できるようにします。

機能

• デザインデータの抽出：Figma のデザインからコンポーネント、スタイル、テキストを抽出します
• デザインシステムの分析：デザインシステムの一貫性やパターンを分析します
• UI コンテンツの管理：デザインからすべての UI コピーを抽出して整理します
• 開発への引き継ぎ：開発者向けの包括的なドキュメントを生成します
• シームレスな AI 連携：デザインを Claude、Cursor などの AI ツールや、MCP 対応クライアントに接続します

はじめに

前提条件

• Node.js 16 以降
• Figma Personal Access Token（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
   

クライアントへの接続

Claude for Desktop

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 for Desktop を再起動します

Cursor

グローバル設定

Cursor の 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"
         }
       }
     }
   }
   

利用可能なツール

ツール	説明
get-file-info	Figma ファイルの基本情報を取得します
get-nodes	Figma ファイルから指定したノードを取得します
get-components	Figma ファイルのコンポーネント情報を取得します
get-styles	Figma ファイルのスタイル情報を取得します
get-comments	Figma ファイルのコメントを取得します
search-file	種類や名前などを指定して、Figma ファイル内の要素を検索します
extract-text	Figma ファイルからすべてのテキスト要素を抽出します

利用可能なプロンプト

• 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.

Cursor で使用する場合：

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

環境変数

変数	説明	デフォルト
FIGMA_API_TOKEN	Figma Personal Access Token	（必須）
API_KEY	API 認証用のセキュリティキー	（必須）
TRANSPORT_TYPE	トランスポート方式（stdio または sse）	stdio
PORT	SSE トランスポート用のポート	3000

アーキテクチャ

この MCP サーバーは次の処理を行います：

1. 個人用アクセストークンを使用して Figma API に接続します
2. Model Context Protocol に準拠する標準化されたインターフェースを提供します
3. LLM が Figma のデザインを操作するために使用できるツール、リソース、プロンプトを提供します
4. stdio トランスポート（ローカル接続）と SSE トランスポート（リモート接続）の両方をサポートします

コントリビューション

コントリビューションを歓迎します！お気軽に Pull Request を送信してください。