mcp-figma

Claude やその他の MCP 互換 AI アシスタントで使用するために設計された、Figma API 統合用のモデル コンテキスト プロトコル (MCP) サーバー。

特徴

この MCP サーバーは、Figma API 機能へのアクセスを提供します。

• ファイル操作（ファイルの取得、ノードの取得、画像の取得）

• コメント管理

• チーム/プロジェクト管理

• コンポーネントとスタイルへのアクセス

• 永続的なAPIキーの保存

Related MCP server: Figma MCP Server

インストール

NPMのインストール

# Install globally
npm install -g mcp-figma

# Or install locally in a project
npm install mcp-figma

# Update to latest version
npm update -g mcp-figma

クロードとの使用

1. Claude 構成に mcp-figma を追加します。

"mcp-figma": {
  "command": "npx",
  "args": [
    "-y",
    "mcp-figma"
  ]
}

2. Claude を初めて使用する場合、Figma API キーを設定する必要があります。

Please use mcp-figma to set my Figma API key: figd_xxxxxxxxxxxxxxxxxxxxxxx

API キーは~/.mcp-figma/config.jsonに保存され、今後のセッションで自動的に読み込まれます。

3. API キーが設定されているかどうかは次のように確認できます。

Please use mcp-figma to check my API key status

4. 次に、利用可能な Figma API 関数のいずれかを使用します。

Please use mcp-figma to get the file with key abc123

利用可能なツール

サーバーは次のツールを提供します。

• set_api_key : Figma API 個人アクセス トークンを設定します (config に保存されます)

• check_api_key : APIキーがすでに設定されているかどうかを確認する

• get_file : キーでFigmaファイルを取得する

• get_file_nodes : Figma ファイルから特定のノードを取得する

• get_image : Figma ファイル内のノードの画像を取得する

• get_image_fills : Figma ファイルで使用されている画像の URL を取得します。

• get_comments : Figma ファイルのコメントを取得する

• post_comment : Figma ファイルにコメントを投稿する

• delete_comment : Figma ファイルからコメントを削除する

• get_team_projects : チームのプロジェクトを取得する

• get_project_files : プロジェクトのファイルを取得する

• get_team_components : チームのコンポーネントを取得する

• get_file_components : ファイルからコンポーネントを取得する

• get_component : キーでコンポーネントを取得する

• get_team_component_sets : チームのコンポーネントセットを取得する

• get_team_styles : チームのスタイルを取得する

• get_file_styles : ファイルからスタイルを取得する

• get_style : キーでスタイルを取得する

詳細な使用例については、 USAGE.md を参照してください。

ライセンス

マサチューセッツ工科大学