Figma MCP Server

🚀 Figma MCP サーバー

Figma API と統合されたモデルコンテキストプロトコル (MCP) サーバーです。Figma ファイル、コメント、コンポーネントなどとの対話を可能にします。

✨ 主な機能

• ファイル操作

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

• コメント管理

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

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

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

• Webhook管理

  • Webhookの作成
  • 既存のWebhookの一覧表示
  • Webhookの削除

📦 インストール

Smitheryを通じたインストール

Smithery を通じて Claude Desktop 用の Figma MCP Server を自動インストールするには：

npx -y @smithery/cli install @deepsuthar496/figma-mcp-server --client claude

手動インストール

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

npm install

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

npm run build

📚 ドキュメント

設定

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

{
  "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"
}

Webhook管理

create_webhook

Webhookを作成します。

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

list_webhooks

Webhookを一覧表示します。

{
  "team_id": "string"
}

delete_webhook

Webhookを削除します。

{
  "webhook_id": "string"
}

💻 使用例

基本的な使用法

```figma
Figma クライアント ID: your_client_id_here
Figma クライアントシークレット: your_client_secret_here

ファイル情報を取得するには：

curl -X GET 'https://api.figma.com/v1/files/[file_key]'
  -H 'Authorization: Bearer [access_token]'

ファイルのバージョン履歴を取得するには：

curl -X GET 'https://api.figma.com/v1/files/[file_key]/versions'
  -H 'Authorization: Bearer [access_token]'

コメントを追加するには：

curl -X POST 'https://api.figma.com/v1/comments'
  -H 'Content-Type: application/json'
  -d '{"file_key": "your_file_key", "message": "your_message"}'

📄 ライセンス

[ライセンス内容]

🔧 貢献ガイド

このプロジェクトへの貢献を歓迎します！貢献するには以下の手順に従ってください：

1. リポジトリをクローンします。
2. 機能ブランチを作成します。
3. 変更をコミットします。
4. リモートリポジトリにプッシュします。
5. プルリクエストを送信します。

コードを提出する前にコードフォーマットを確認し、変更に適切なドキュメントを追加してください。