mcpField
F
figma-comments

figma-comments

github.com/southleftデザイン・UI94127 回インストール10 週間前に更新
リポジトリ

figma-comments について

Figma REST API でコメントの閲覧、投稿、返信、削除を行うスキルです。シェルを使えるコーディング環境向けで、Figma コネクターの OAuth ログインではなく個人アクセストークンを使用します。

主な機能

  1. 01コメントスレッドと状態の一覧
  2. 02ファイルまたはノードへのコメント投稿
  3. 03既存スレッドへの返信
  4. 04コメントとスレッドの削除
  5. 05個人アクセストークンでスクリプトを実行

活用シーン

  1. 01デザインコメントと解決状況の確認
  2. 02実装に関する指摘を Figma ノードに固定
  3. 03デザイン上の議論への返信
  4. 04不要になったコメントスレッドの削除

MCP 対応

コメントには Plugin API とネイティブ Figma MCP からアクセスできないため、Figma REST API を使用します。MCP サーバーを拡張または設定するものではありません。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/southleft/figma-console-mcp-skills --skill figma-comments

インストール後、Claude Code で/figma-commentsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

scripts/
delete-comment.sh
get-comments.sh
post-comment.sh

詳細

figma-comments — Figma のコメントを読み取り、投稿、返信、削除

コメントは Figma の REST API のみで扱えます。Plugin API（use_figma）やネイティブの Figma MCP では操作できません。このスキルでは、コメントスレッドの読み取り、新しいコメントの投稿（ノードへのピン留めも可能）、既存のスレッドへの返信、コメントの削除ができます。

セットアップ — ターミナルとトークンが必要です。 このスキルはシェルコマンドを実行するため、Claude Code（Claude Desktop 内の「Code」タブを含む）、Cursor、Codex、Gemini CLI で動作します。シェルがない通常の Claude Desktop や claude.ai のチャットでは動作しません。Figma コネクタの OAuth ログインではこれらの REST 呼び出しを認証できないため、Figma の個人用アクセストークンを用意する必要があります。Figma で Settings → Security → Personal access tokens に移動し、File content: read（および Comments: read/write）のスコープを指定してトークンを生成してから、シェルで設定します：export FIGMA_TOKEN="figd_…". スクリプトは実行時に環境変数からトークンを読み込みます。トークンをスキルファイルに記載しないでください。

セットアップとスキルの境界

  • すべてのリクエストは https://api.figma.com に対して X-Figma-Token: $FIGMA_TOKEN を使います。
  • @mentions は Figma UI 専用の機能です。 メッセージに @name を記載してもプレーンテキストとして表示され、クリック可能なメンションにはなりません。また、Figma の通知も送信されません。

ファイルキーの取得

FILE_KEY=$(echo "$FILE_URL" | sed -E 's#.*/(design|file)/([A-Za-z0-9]+).*#\2#')

コメントを読む

scripts/get-comments.sh は、作成者、メッセージ、タイムスタンプ、ピン留めされたノード、解決状態を含むスレッドを一覧表示します。デフォルトでは解決済みのスレッドは除外されます。

./scripts/get-comments.sh ABC123def456                 # active comments only
./scripts/get-comments.sh ABC123def456 --include-resolved
./scripts/get-comments.sh ABC123def456 --md             # request markdown message bodies

生のエンドポイント：

curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/ABC123def456/comments?as_md=true"

コメントを投稿する

scripts/post-comment.sh は、トップレベルのコメント、ノードにピン留めされたコメント、またはスレッドへの返信を投稿します。

# Plain file-level comment
./scripts/post-comment.sh ABC123def456 "Heads up: the button radius drifted from code."

# Pinned to a node (appears on that element). x/y default to 0,0 if omitted.
./scripts/post-comment.sh ABC123def456 "Padding here should be 16, not 12." --node 695:313 --x 40 --y 12

# Reply to an existing thread (get IDs from get-comments.sh)
./scripts/post-comment.sh ABC123def456 "Fixed in the latest sync." --reply 123456789

生の POST ボディの形式：

curl -s -X POST -H "X-Figma-Token: $FIGMA_TOKEN" -H "Content-Type: application/json" \
  -d '{"message":"Pinned note","client_meta":{"node_id":"695:313","node_offset":{"x":0,"y":0}}}' \
  "https://api.figma.com/v1/files/ABC123def456/comments"
  • ピン留め： node_id と node_offset（ノードを基準とする {x,y}）を含む client_meta を指定します。node_id がある場合、Figma は node_offset も必須とします。スクリプトではデフォルトで (0,0) に設定されます。
  • 返信： 返信先のコメントの ID である comment_id をボディに追加します。スクリプトでは --reply フラグを使います。返信は元のコメントの下にスレッドを形成します。

コメントを削除する

scripts/delete-comment.sh は ID でコメントを削除します（ID は get-comments.sh で確認できます）。

./scripts/delete-comment.sh ABC123def456 123456789

生のリクエスト：

curl -s -X DELETE -H "X-Figma-Token: $FIGMA_TOKEN" \
  "https://api.figma.com/v1/files/ABC123def456/comments/123456789"

注意事項

  • 投稿または削除時に 403 が返される場合は、PAT に Comments: Read and write の権限がありません。トークンを再発行してください。
  • 親コメントを削除すると、スレッド全体が削除されます。会話の一部だけを削除したい場合は、先に返信を削除してください。
  • よくあるワークフロー：デザインとコードのずれを検出し、post-comment.sh --node <id> を実行して、問題のある要素に対応可能なメモをピン留めし、デザイナーが文脈を踏まえて確認できるようにします。

コメント

Markdown 対応