Agent skill · design visual · lum1104
understand-figma
Analyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.
Why this skill is useful
Adds a complete executable workflow for analyzing Figma files and generating interactive design knowledge graphs, which the AI cannot generate on its own.
What it needs
Requires node, pnpm installed locally. Requires figma account access. About 2k tokens when loaded. Last updated 2026-07-30. 77,791 stars on the source repository.
What this skill does
/understand-figma Analyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard. Prerequisites FIGMATOKEN environment variable — a Figma personal access token (create one at https://www.figma.com/settings). If it is missing, STOP and tell the user: Set a Figma token first: create one at figma.com/settings, then export FIGMATOKEN=<token>. Node ≥ 22, pnpm ≥ 10. Security: the token is read only from the environment and travels only in the X-Figma-Token request header. Never write it to the graph, meta.json, logs, or intermediate files. This skill makes outbound calls to api.figma.com — unlike /understand, it is not fully offline. Tell the user this once. Phase 0 — Pre-flight 1. Parse $ARGUMENTS for a Figma URL or bare file key (the non-flag token) and an optional --language <lang>. 2. Resolve PROJECTROOT to the current working directory. Resolve the data directory $UADIR once and reuse it for every read and write below: UADIR="$PROJECTROOT/$([ -d "$PROJECTROOT/.understand-anything" ] && echo .understand-anything echo .ua)" — the legacy .understand-anything/ when it already exists, otherwise the new .ua/. Because each phase may run in a fresh shell, carry $UADIR forward like $PROJECTROOT, re-resolving it with the same line if a later command block needs it. 3. Resolve PLUGINROOT and ensure core is built (same logic as /understand Phase 0.1.5). If packages/core/dist/figma/index.js is missing, run: 4. mkdir -p $UADIR/intermediate. Phase 1 — FETCH & PARSE (deterministic) Run the bundled scan script (<SKILLDIR> is this skill's directory): It writes $UADIR/intermediate/scan-manifest.json and prints the node counts. Relay the counts to the user. If it exits non-zero, relay stderr and STOP. If the scan prints UPTODATE, report "Design graph is already up to date for this Figma file version" and STOP. To force a full rebuild, re-run with UNDERSTANDFIGMAFORCE=1 set in the environment. Phase 2 — ANALYZE (LLM enrichment) 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills lum1104/understand-figma