Mohammeduvaiz Figma MCP Server

🚀 Figma MCP サーバー

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

✨ 主な機能

• デザインデータの抽出：Figma デザインからコンポーネント、スタイル、テキストを抽出します。
• デザインシステムの分析：デザインシステムの統一性とパターンを分析します。
• UI コンテンツ管理：デザイン内のすべての UI テキストを抽出し、整理します。
• 開発者への引き渡し：開発者が参照するための完全なドキュメントを生成します。
• AI とのスムーズな統合：MCP をサポートする AI ツール（Claude、Cursor など）にデザインを接続します。

🚀 クイックスタート

前提条件

• 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": ["/絶対パス/到/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": {
        "FIGMA_API_TOKEN": "あなたの_figma_個人用アクセストークン"
      }
    }
  }
}

プロジェクト固有の設定

プロジェクトのルートディレクトリに mcp.json ファイルを作成します：

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "FIGMA_API_TOKEN": "あなたの_figma_個人用アクセストークン"
      }
    }
  }
}

💻 使用例

基本的な使用法

{
  "tool": "figma",
  "prompt": "このページのユーザー体験をどのように最適化するかを説明してください。",
  "args": {
    "pageId": "your_page_id"
  }
}

📚 ドキュメント

利用可能なツール

以下は、サーバーが提供する主なツールです：

1. Figma ドキュメント操作

• getDocument(): 現在のドキュメントの詳細情報を取得します。
• getPageIds(): ドキュメント内のすべてのページ ID を返します。
• getPage(pageId): 指定されたページの情報を取得します。

2. ページコンテンツ管理

• getComponents(pageId): ページ内のすべてのコンポーネントを返します。
• getStyles(): ページ内のすべてのスタイルを取得します。
• getElements(): ページ内のすべての要素を返します。

環境変数

以下は、サーバーを実行するために必要な環境変数です：

🔧 技術詳細

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

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

📄 ライセンス

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