Figma Generate Changelog

figma-generate-changelog — markdown changelog between two versions

Builds on the same version diff as figma-version-history, then formats it as release-notes-style markdown and enriches each version reference with the author handle, label, and timestamp.

Setup — terminal + token required. This skill runs shell commands, so it works in Claude Code (including the "Code" tab inside Claude Desktop), Cursor, Codex, or Gemini CLI — it does not run in plain Claude Desktop or claude.ai chat (no shell). The Figma connector's OAuth login does not authorize these REST calls, so you must supply your own Figma personal access token: in Figma go to Settings → Security → Personal access tokens, generate one with scope File content: read (plus File versions: read), then set it in your shell: export FIGMA_TOKEN="figd_…". The script reads it from the environment at runtime — never put the token in a skill file.

Setup & skill boundaries

• All requests use X-Figma-Token: $FIGMA_TOKEN against https://api.figma.com.
• Related: figma-version-history for the structured diff and the endpoint reference.

Derive the file key

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

Workflow

1. Pick the two versions. List them first if you don't have the IDs:

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

2. Generate the changelog with scripts/generate-changelog.mjs:

   bashCopy code
   # 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
   

   By default it prints markdown to stdout. Pass --json to get { markdown, data } (the structured diff alongside the rendered text). Redirect to a file for release notes:

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

3. Modes mirror the diff: summary (one punchy line of counts), standard (sectioned with counts, default), detailed (full per-property and per-binding bullets).

What it captures

• A header with From / To version refs — label (or (unlabeled)), date, and author handle — plus the span in days. Author/label come from one extra cheap call to the versions list.
• A Page Structure section: pages added / removed / renamed.
• A Components section (when --components is passed): per-component change counts and bullets for renames, description changes, children added/removed, componentPropertyDefinitions changes, and variable-binding changes.
• A Notes section listing the diff's known blind spots (instances on the canvas, raw layout/visual props, variable VALUE changes, style content — none of which Figma REST exposes for historical versions).

Notes

• Author enrichment is best-effort: it pages the versions list up to ~200 entries back to find each version's metadata. If a version is older than that lookback (or Figma system-attributed), the ref degrades gracefully to the version id.
• current/HEAD references render as "Current state (last modified …)".