mcpField
F
figma-generate-changelog

figma-generate-changelog

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

figma-generate-changelog について

figma-generate-changelog は、Figma ファイルのバージョン差分をリリースノート形式の Markdown にまとめる、シェルベースのスキルです。変更記録や構造化された差分を必要とするユーザー向けです。

主な機能

  1. 01バージョン差分から Markdown を生成
  2. 02バージョンのラベル、作者、日時を追加
  3. 03ページ構造の変更を集約
  4. 04任意のコンポーネント変更の詳細
  5. 05要約・標準・詳細モード
  6. 06差分データ付き JSON 出力

活用シーン

  1. 01Figma のバージョン間のリリースノート作成
  2. 02ページの追加・削除・改名の確認
  3. 03指定したコンポーネント変更の記録
  4. 04ノートと差分データのエクスポート

MCP 対応

MCP サーバーではなくスキルです。README では、個人アクセストークンを使ってシェルから Figma REST API を呼び出す方法を説明しています。

インストール

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

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

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

同梱ファイルscripts/generate-changelog.mjs

詳細

figma-generate-changelog — 2 つのバージョン間の Markdown 変更履歴

figma-version-history と同じバージョン差分を基に、リリースノート形式の Markdown に整形し、各バージョンの参照に作成者のハンドル名、ラベル、タイムスタンプを追加します。

セットアップ — ターミナルとトークンが必要です。 このスキルはシェルコマンドを実行するため、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（および File versions: read）スコープを指定してトークンを生成し、シェルで設定します：export FIGMA_TOKEN="figd_…"。スクリプトは実行時に環境変数から読み取ります。トークンをスキルファイルに記載しないでください。

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

  • すべてのリクエストで、https://api.figma.com に対して X-Figma-Token: $FIGMA_TOKEN を使用します。
  • 関連資料：figma-version-history では、構造化された差分とエンドポイントを参照できます。

ファイルキーを導き出す

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

ワークフロー

  1. 2 つのバージョンを選択します。 ID が分からない場合は、まず一覧を取得します：

    ../figma-version-history/scripts/list-versions.sh ABC123def456

  2. scripts/generate-changelog.mjs で変更履歴を生成します：

    # Page-level changelog against HEAD
node scripts/generate-changelog.mjs --file ABC123def456 --from 4096761871 --to current

# Include per-component changes, detailed bullets
node scripts/generate-changelog.mjs --file ABC123def456 --from 4096761871 --to 4096800000 \
  --components 695:313,420:88 --mode detailed

    デフォルトでは、標準出力に Markdown を出力します。--json を渡すと { markdown, data }（レンダリングされたテキストと構造化された差分）が得られます。リリースノート用にファイルへリダイレクトします：

    node scripts/generate-changelog.mjs --file ABC123def456 --from 4096761871 --to current \
  > CHANGELOG-figma.md

  3. モードは差分と同じです：summary（変更数を簡潔に示す 1 行）、standard（変更数を含むセクション形式。デフォルト）、detailed（プロパティとバインディングごとの詳細な箇条書き）。

取得される内容

  • From / To のバージョン参照を示すヘッダー。ラベル（または (unlabeled)）、日付、作成者のハンドル名に加え、日数も記載します。作成者とラベルの情報は、バージョン一覧への追加の低コストな呼び出しで取得します。
  • ページ構成セクション：追加、削除、名前変更されたページ。
  • --components を渡した場合の コンポーネントセクション：コンポーネントごとの変更数と、名前変更、説明の変更、子要素の追加・削除、componentPropertyDefinitions の変更、変数バインディングの変更を示す箇条書き。
  • 差分で判明している制約を列挙する 注記セクション（キャンバス上のインスタンス、生のレイアウト／ビジュアルプロパティ、変数の値の変更、スタイルの内容。これらはいずれも、Figma REST では過去のバージョンについて公開されていません）。

注記

  • 作成者情報の補完はベストエフォートです。各バージョンのメタデータを見つけるため、バージョン一覧を最大で約 200 件さかのぼってページ処理します。その範囲より古いバージョンの場合（または作成者が Figma システムとして記録されている場合）、参照はバージョン ID のみになります。
  • current／HEAD の参照は「最終更新日時 … の現在の状態」として表示されます。

コメント

Markdown 対応