Figma MCP Server with Chunking

Integrations

  • Provides tools for interacting with the Figma API, including file data retrieval, file listing, version history, comment management, component and style retrieval, with memory-efficient chunking and pagination capabilities for handling large Figma files.

チャンク化機能を備えたFigma MCPサーバー

Figma API と対話するためのモデル コンテキスト プロトコル (MCP) サーバー。大規模な Figma ファイルを処理するためのメモリ効率の高いチャンク化とページ分割機能を備えています。

概要

このMCPサーバーは、メモリ管理機能を内蔵した堅牢なFigma APIインターフェースを提供します。操作を管理しやすいチャンクに分割し、必要に応じてページネーションを実装することで、大規模なFigmaファイルを効率的に処理できるように設計されています。

主な特徴

  • 設定可能な制限を備えたメモリを考慮した処理
  • 大きなファイルのチャンクデータ取得
  • すべてのリスト操作のページ区切りのサポート
  • ノードタイプのフィルタリング
  • 進捗状況の追跡
  • 設定可能なチャンクサイズ
  • 中断された操作を再開する機能
  • デバッグログ
  • 設定ファイルのサポート

インストール

Smithery経由でインストール

Smithery経由で Claude Desktop 用の Chunking 付き Figma MCP Server を自動的にインストールするには:

npx -y @smithery/cli install @ArchimedesCrypto/figma-mcp-chunked --client claude

手動インストール

# Clone the repository git clone [repository-url] cd figma-mcp-chunked # Install dependencies npm install # Build the project npm run build

構成

環境変数

  • FIGMA_ACCESS_TOKEN : Figma APIアクセストークン

設定ファイル

--configフラグを使用して JSON ファイル経由で構成を提供できます。

{ "mcpServers": { "figma": { "env": { "FIGMA_ACCESS_TOKEN": "your-access-token" } } } }

使用法:

node build/index.js --config=path/to/config.json

ツール

get_file_data(新規)

メモリ効率の高いチャンク化とページ分割を使用して Figma ファイル データを取得します。

{ "name": "get_file_data", "arguments": { "fileKey": "your-file-key", "accessToken": "your-access-token", "pageSize": 100, // Optional: nodes per chunk "maxMemoryMB": 512, // Optional: memory limit "nodeTypes": ["FRAME", "COMPONENT"], // Optional: filter by type "cursor": "next-page-token", // Optional: resume from last position "depth": 2 // Optional: traversal depth } }

応答:

{ "nodes": [...], "memoryUsage": 256.5, "nextCursor": "next-page-token", "hasMore": true }

リストファイル

ページ区切りをサポートするファイルを一覧表示します。

{ "name": "list_files", "arguments": { "project_id": "optional-project-id", "team_id": "optional-team-id" } }

ファイルバージョンの取得

バージョン履歴をチャンク単位で取得します。

{ "name": "get_file_versions", "arguments": { "file_key": "your-file-key" } }

get_file_comments

ページ区切りでコメントを取得します。

{ "name": "get_file_comments", "arguments": { "file_key": "your-file-key" } }

ファイル情報を取得する

チャンク ノード トラバーサルを使用してファイル情報を取得します。

{ "name": "get_file_info", "arguments": { "file_key": "your-file-key", "depth": 2, // Optional: traversal depth "node_id": "specific-node-id" // Optional: start from specific node } }

get_components

チャンク化をサポートするコンポーネントを取得します。

{ "name": "get_components", "arguments": { "file_key": "your-file-key" } }

get_styles

チャンク化をサポートするスタイルを取得します。

{ "name": "get_styles", "arguments": { "file_key": "your-file-key" } }

get_file_nodes

チャンク化をサポートする特定のノードを取得します。

{ "name": "get_file_nodes", "arguments": { "file_key": "your-file-key", "ids": ["node-id-1", "node-id-2"] } }

メモリ管理

サーバーは、メモリを効率的に管理するためのいくつかの戦略を実装しています。

チャンキング戦略

  • pageSizeによるチャンクサイズの設定
  • メモリ使用量の監視
  • メモリ負荷に基づく自動チャンクサイズ調整
  • チャンクごとの進捗状況の追跡
  • カーソルを使用した再開機能

ベストプラクティス

  1. 小さなチャンクサイズ(50~100ノード)から始めて、パフォーマンスに基づいて調整します。
  2. レスポンスメタデータを通じてメモリ使用量を監視する
  3. 可能な場合はノードタイプフィルタリングを使用してデータ負荷を軽減します
  4. 大規模データセットのページ区切りを実装する
  5. 非常に大きなファイルの場合は再開機能を使用する

設定オプション

  • pageSize : チャンクあたりのノード数(デフォルト: 100)
  • maxMemoryMB : 最大メモリ使用量(MB単位)(デフォルト: 512)
  • nodeTypes : 特定のノードタイプをフィルタリングする
  • depth : ネストされた構造の走査深度を制御する

デバッグログ

サーバーには包括的なデバッグ ログが含まれています。

// Debug log examples [MCP Debug] Loading config from config.json [MCP Debug] Access token found xxxxxxxx... [MCP Debug] Request { tool: 'get_file_data', arguments: {...} } [MCP Debug] Response size 2.5 MB

エラー処理

サーバーは詳細なエラー メッセージと提案を提供します。

// Memory limit error "Response size too large. Try using a smaller depth value or specifying a node_id." // Invalid parameters "Missing required parameters: fileKey and accessToken" // API errors "Figma API error: [detailed message]"

トラブルシューティング

よくある問題

  1. メモリエラー
    • チャンクサイズを減らす
    • ノードタイプフィルタリングを使用する
    • ページネーションを実装する
    • より小さい深度値を指定する
  2. パフォーマンスの問題
    • メモリ使用量を監視する
    • チャンクサイズを調整する
    • 適切なノードタイプフィルターを使用する
    • 頻繁にアクセスされるデータのキャッシュを実装する
  3. APIの制限
    • レート制限を実装する
    • ページネーションを使用する
    • 可能な場合はレスポンスをキャッシュする

デバッグモード

詳細情報を取得するには、デバッグ ログを有効にします。

# Set debug environment variable export DEBUG=true

貢献

貢献を歓迎します!貢献ガイドラインをお読みになり、リポジトリにプルリクエストを送信してください。

ライセンス

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

You must be authenticated.

A
security – no known vulnerabilities
F
license - not found
A
quality - confirmed to work

メモリを考慮したチャンク化とページ区切り機能を通じて大規模な Figma ファイルを効率的に処理する Figma API と対話するためのモデル コンテキスト プロトコル サーバー。

  1. Overview
    1. Key Features
  2. Installation
    1. Installing via Smithery
    2. Manual Installation
  3. Configuration
    1. Environment Variables
    2. Config File
  4. Tools
    1. get_file_data (New)
    2. list_files
    3. get_file_versions
    4. get_file_comments
    5. get_file_info
    6. get_components
    7. get_styles
    8. get_file_nodes
  5. Memory Management
    1. Chunking Strategy
    2. Best Practices
    3. Configuration Options
  6. Debug Logging
    1. Error Handling
      1. Troubleshooting
        1. Common Issues
        2. Debug Mode
      2. Contributing
        1. License
          ID: jjtcywbz4w