Figma MCP Server With Chunking

🚀 フィグマMCPサーバー（チャンク機能付き）

Figma APIと相互作用するModel Context Protocol (MCP)サーバーで、メモリ効率の高いチャンク分割とページング機能が組み込まれており、大きなファイルの処理に最適です。

🚀 クイックスタート

このドキュメントでは、「チャンク機能付きのFigma MCPサーバー」（以下「サーバー」と呼びます）の使用方法を説明します。これには、インストール、設定、ツールの使用、メモリ管理、その他関連ガイドが含まれます。

✨ 主な機能

• メモリ効率の高いチャンク分割とページング機能を備え、大きなファイルの処理に最適。
• 複数のツールを提供し、Figmaファイルのデータ取得や一覧表示が可能。
• メモリ使用状況をリアルタイムで監視し、自動調整が可能。

📦 インストール

1. Smitheryを通じたインストール

# 以下のコマンドを使用してインストールします：
figma-mcp-server --install

2. 手動インストール（オプション）

# リポジトリをクローンします：
git clone https://github.com/your-repository.git
cd figma-mcp-server

# 依存関係をインストールします：
npm install

# サーバーを起動します：
node index.js

📚 ドキュメント

設定ガイド

1. 環境変数の設定

サーバーの動作を設定するには、以下の環境変数を設定します：

• FIGMA_ACCESS_TOKEN: Figmaアクセストークン
• MAX_MEMORY_MB: 最大許容メモリ（単位：MB）
• DEFAULT_CHUNK_SIZE: デフォルトのチャンクサイズ（単位：ノード）

2. 設定ファイルの読み込み

config.jsonファイルを作成または変更し、以下の内容を追加します：

{
  "accessToken": "your-figma-token",
  "maxMemory": 512,
  "chunkSize": 100
}

ツールの使用ガイド

1. ファイルデータ取得ツール (get_file_data)

機能説明

• 入力: fileKey と accessToken
• 出力: 指定されたファイルのデータチャンクを返し、ページングとフィルタリングをサポートします。

使用例

# リクエストパラメータ：
{
  "tool": "get_file_data",
  "arguments": {
    "fileKey": "abc123",
    "nodeTypes": ["rectangle", "ellipse"]
  }
}

# 返却データ：
{
  "data": {
    "nodes": [ ... ],
    " pageInfo": { "hasNext": true, "cursor": "xyz456" }
  },
  "metadata": {
    "memoryUsage": 256,
    "responseTime": 500
  }
}

2. ファイル一覧表示ツール (list_files)

機能説明

• 入力: accessToken
• 出力: ユーザーのすべてのFigmaファイルのリストを返します。

使用例

# リクエストパラメータ：
{
  "tool": "list_files",
  "arguments": {
    "accessToken": "your-figma-token"
  }
}

# 返却データ：
{
  "data": { "files": [...] },
  "metadata": {}
}

メモリ管理戦略

チャンク分割処理

• チャンクサイズ: デフォルトは100ノードで、設定可能です。
• メモリ監視: 使用状況をリアルタイムで追跡します。
• 自動調整: 負荷に応じて動的に調整します。
• 進捗追跡: 各チャンクに詳細なログがあります。

ベストプラクティス

1. 初期の提案: 小さなチャンク（50 - 100ノード）から始め、徐々に最適化します。
2. メモリ使用状況を監視し、レスポンスのメタデータで確認します。
3. できるだけノードタイプのフィルタリングを使用して負荷を軽減します。
4. 大きなデータセットの場合、ページングを実施します。
5. 大きなファイルを処理する場合は、続きからのアップロード機能を使用します。

デバッグログ

出力例

[MCP デバッグ] config.jsonから設定を読み込みました
[MCP デバッグ] アクセストークンを見つけました：xxxxxxx...
[MCP デバッグ] リクエスト { tool: 'get_file_data', arguments: {...} }
[MCP デバッグ] レスポンスサイズは2.5 MBです

エラー処理

一般的なエラーメッセージ

• メモリ制限： "レスポンスが大きすぎます。より小さい深度値を使用するか、node_idを指定してみてください。"

• 無効なパラメータ： "必須パラメータが不足しています：fileKeyとaccessToken"

• APIエラー： "Figma APIエラー：[詳細情報]"

トラブルシューティング

一般的な問題

1. メモリエラー：

   • チャンクサイズを小さくする
   • ノードタイプのフィルタリングを使用する
   • ページングを実施する
   • 小さい深度値を指定する

2. パフォーマンス問題：

   • メモリ使用状況を監視する
   • チャンクサイズを調整する
   • 適切なノードタイプフィルターを使用する
   • 頻繁にアクセスするデータのキャッシュを実装する

3. API制限：

   • レート制限を実施する
   • ページングを使用する
   • 可能な場合はレスポンスのキャッシュを行う

デバッグモードの有効化

# デバッグ環境変数を設定します：
export DEBUG=true

その他の事項

プロジェクトリポジトリ

• アドレス: https://github.com/your-repository.git

バージョン情報

• バージョン: v1.0.0

ライセンス

• ライセンス: MIT License

注: ドキュメントの内容の著作権は著者に帰属し、許可なく転載または複製することは禁止されています。