Figma Design System

🚀 Figma MCP サーバー

Figma APIに接続するモデルコンテキストプロトコル (MCP) サーバーです。これにより、AIツールや大規模言語モデル (LLM) があなたのFigmaデザインにアクセスし、操作することが可能です。

✨ 主な機能

• デザインデータ抽出：Figmaデザインからコンポーネント、スタイル、テキストを抽出します。
• デザインシステム分析：デザインシステムの統一性とパターンを分析します。
• UIコンテンツ管理：すべてのUIテキストコンテンツを抽出し、整理します。
• 開発引き渡し：開発者向けに包括的なドキュメントを生成します。
• シームレスなAI統合：ClaudeやCursorなどのAIツールや、その他のMCP互換クライアントにデザインを接続します。

🚀 クイックスタート

前提条件

• 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=あなたの_figma_個人アクセストークン
   API_KEY=あなたの安全な_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": "あなたの_figma_個人アクセストークン",
           "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": "あなたの安全な_api_key"
      }
    }
  }
}

プロジェクト固有の設定

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

   mkdir -p .cursor
   

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

   {
     "mcpServers": {
       "figma-mcp": {
         "url": "http://localhost:3000/sse",
         "env": {
           "API_KEY": "あなたの安全な_api_key"
         }
       }
     }
   }
   

📚 ドキュメント

利用可能なツール

利用可能なプロンプト

• analyze-design-system - デザインシステムのコンポーネントとスタイルを分析し、統一性を探します。
• extract-ui-copy - すべてのUIテキストコンテンツを抽出し、整理します。
• generate-dev-handoff - 開発引き渡しドキュメントを生成します。

🔧 技術詳細

このMCPサーバーは以下のように動作します：

1. 個人アクセストークンを使用してFigma APIに接続します。
2. モデルコンテキストプロトコルに準拠した標準インターフェースを公開します。
3. ツール、リソース、プロンプトを提供して、LLMがFigmaデザインと対話できるようにします。
4. 2種類のトランスポート方式をサポートしています：stdio（ローカル接続）とSSE（リモート接続）。

貢献

貢献を歓迎します！自由にPull Requestを送信してください。