Timholden Figma MCP Server

🚀 Figma モデルコンテキストプロトコル (MCP) サーバー

このサーバーは、TypeScript で実装された Figma API のモデルコンテキストプロトコル (MCP) サーバーで、大規模言語モデル (LLM) に標準化されたコンテキストサポートを提供します。

🚀 クイックスタート

このサーバーは、MCP と互換性のある Figma リソースへのアクセスを提供し、LLM アプリケーションが Figma ファイル、コンポーネント、および変数にシームレスに統合できるようにします。

✨ 主な機能

主要機能

• MCP リソースハンドラー

  • Figma ファイルのアクセスと操作
  • 変数とコンポーネントの管理
  • カスタム URI スキーム (figma:///)

• 強力な実装

  • TypeScript を使用した型安全な実装
  • Zod スキーマを使用したリクエスト検証
  • 包括的なエラー処理
  • トークン検証と API 統合
  • バッチ操作のサポート

📦 インストール

npm install @modelcontextprotocol/sdk
npm install

📚 ドキュメント

プロジェクト構造

figma-mcp-server/
├── src/
│   ├── index.ts         # メインサーバーの実装
│   ├── types.ts         # TypeScript の型とインターフェース
│   ├── schemas.ts       # Zod 検証スキーマ
│   ├── errors.ts        # エラー処理
│   └── middleware/      # サーバーミドルウェア
├── tests/
│   └── api.test.ts      # API テスト
└── package.json

設定

1. Figma アクセストークンを設定します：

   export FIGMA_ACCESS_TOKEN=your_access_token
   

2. サーバーを設定します（オプション）：

   export MCP_SERVER_PORT=3000
   

使用方法

サーバーの起動

npm run start

MCP サーバーとしての使用

このサーバーはモデルコンテキストプロトコルを実装しており、すべての MCP クライアントと互換性があります。stdio と SSE のトランスポートをサポートしています：

stdio トランスポート

# ターミナルでサーバーを起動
npm run dev

# 別のターミナルでリクエストを送信
curl --enterpass "Content-Type: application/json" -d '{"jsonrpc":"2.0","method":"subtract","params":[19,5],"id":1}'

SSE トランスポート

# SSE をサポートするサーバーを起動
npm run sse

# ブラウザまたはツールを使用して接続
curl --enterpass "Accept: text/event-stream" http://localhost:3000

リソース URI

このサーバーは以下のエンドポイントを公開しています：

• http://localhost:3000 - stdio と SSE トランスポートをサポート
• ws://localhost:3001 - WebSocket トランスポートをサポート（近日公開）

リソース URI 構造

ファイルリソース

{
  "uri": "figma fileId.path",
  "method": "GET"
}

コンポーネントリソース

{
  "uri": "figma fileId.components.componentId",
  "method": "POST"
}

サポートされる操作

このサーバーは現在、以下の操作をサポートしています：

• ファイルの読み取り
• コンポーネントのクエリ
• 変数のアクセス
• 属性の変更

デバッグ

DEBUG 環境変数を設定することで、デバッグログを有効にすることができます：

DEBUG=figma-mcp:* npm start

エラー処理

このサーバーは標準の MCP エラーコードを実装しています：

• -32700：解析エラー
• -32600：無効なリクエスト
• -32601：メソッドが見つからない
• -32602：無効なパラメーター
• -32603：内部エラー
• 100：リソースが見つからない
• 101：リソースへのアクセスが拒否された
• 102：リソースが一時的に利用できない

📄 ライセンス

このプロジェクトは MIT ライセンスの下で公開されています - 詳細については LICENSE ファイルを参照してください。

関連リソース

• モデルコンテキストプロトコルドキュメント
• MCP 仕様
• MCP TypeScript SDK
• Figma API ドキュメント