Deepsuthar496 Figma MCP Server

🚀 Figma MCP サーバー

Figma API と統合された Model Context Protocol (MCP) サーバーです。Figma のファイル、コメント、コンポーネントなどとの相互作用を可能にします。

✨ 主な機能

• ファイル操作

  • ファイル情報の取得
  • ファイルのバージョン履歴の取得
  • ファイルのコンポーネントの取得

• コメント管理

  • ファイル内のコメントの一覧表示
  • 新しいコメントの追加
  • コメントの削除

• プロジェクトとチーム機能

  • チームのプロジェクトの一覧表示
  • プロジェクトのファイルの取得
  • 公開されたスタイルの取得

• ウェブフック管理

  • ウェブフックの作成
  • 既存のウェブフックの一覧表示
  • ウェブフックの削除

📦 インストール

1. リポジトリをクローンします。
2. 依存関係をインストールします。

npm install

3. サーバーをビルドします。

npm run build

📚 ドキュメント

設定

Figma アクセストークンを使用して、MCP 設定ファイルでサーバーを設定します。

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["path/to/figma-server/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-access-token-here"
      },
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

利用可能なツール

ファイル操作

get_file

ファイル情報を取得します。

{
  "file_key": "string"
}

get_file_versions

ファイルのバージョン履歴を取得します。

{
  "file_key": "string"
}

get_file_components

ファイル内のコンポーネントを取得します。

{
  "file_key": "string"
}

コメント管理

get_file_comments

ファイル内のコメントを取得します。

{
  "file_key": "string"
}

post_comment

ファイル内にコメントを追加します。

{
  "file_key": "string",
  "message": "string"
}

delete_comment

ファイル内のコメントを削除します。

{
  "file_key": "string",
  "comment_id": "string"
}

プロジェクトとチーム機能

get_team_projects

チームのプロジェクトを取得します。

{
  "team_id": "string"
}

get_project_files

プロジェクトのファイルを取得します。

{
  "project_id": "string"
}

get_component_styles

公開されたスタイルを取得します。

{
  "team_id": "string"
}

ウェブフック管理

create_webhook

ウェブフックを作成します。

{
  "team_id": "string",
  "event_type": "string",
  "callback_url": "string"
}

get_webhooks

ウェブフックを一覧表示します。

{
  "team_id": "string"
}

delete_webhook

ウェブフックを削除します。

{
  "webhook_id": "string"
}

💻 使用例

基本的な使用法

// 例：MCP ツールを使用してファイル情報を取得する
<use_mcp_tool>
<server_name>figma</server_name>
<tool_name>get_file</tool_name>
<arguments>
{
  "file_key": "your-file-key"
}
</arguments>
</use_mcp_tool>

📄 ライセンス

MIT

🔧 貢献ガイド

1. リポジトリをフォークします。
2. 機能ブランチを作成します。
3. 変更をコミットします。
4. ブランチにプッシュします。
5. 新しい Pull Request を作成します。