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.
npx skills add Egonex-AI/Understand-Anything --skill understand-figma --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# /understand-figma Analyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard. ## Prerequisites - **`FIGMA_TOKEN`** 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 FIGMA_TOKEN=<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 `PROJECT_ROOT` to the current working directory. **Resolve the data directory `$UA_DIR`** once and reuse it for every read and write below: `UA_DIR="$PROJECT_ROOT/$([ -d "$PROJECT_ROOT/.understand-anything" ] && echo .understand-anything || echo .ua)"` — the legacy `.understand-anything/` when it already exists, otherw
- Prerequisites
- Phase 0 — Pre-flight
- Phase 1 — FETCH & PARSE (deterministic)
- Phase 2 — ANALYZE (LLM enrichment)
- Phase 3 — MERGE
- Phase 4 — SAVE & LAUNCH
cd "$PLUGIN_ROOT" && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install) && pnpm --filter @understand-anything/core build
node <SKILL_DIR>/figma-merge.mjs "$PROJECT_ROOT"
find "$INTER" -mindepth 1 -maxdepth 1 -not -name 'scan-manifest.json' -exec rm -rf {} +What does the understand-figma skill do?
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.
How do I install it?
Run `npx skills add Egonex-AI/Understand-Anything --skill understand-figma --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Egonex-AI/Understand-Anything, a repository with 77,447 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.