{"id":"understand-figma","name":"understand-figma","summary":"Figma REST APIを通じてFigmaファイルを解析し、kind:\"design\"ダッシュボードとともにインタラクティブなデザイン知識グラフ(ページ、スクリーン、コンポーネント、コンポーネントセット、インスタンス、デザイントークン)を生成します。","body":"# /understand-figma\n\nAnalyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard.\n\n## Prerequisites\n\n- **`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:\n  > Set a Figma token first: create one at figma.com/settings, then `export FIGMA_TOKEN=<token>`.\n- Node ≥ 22, pnpm ≥ 10.\n\n> **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.\n\n## Phase 0 — Pre-flight\n\n1. Parse `$ARGUMENTS` for a Figma URL or bare file key (the non-flag token) and an optional `--language <lang>`.\n2. 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, otherwise the new `.ua/`. Because each phase may run in a fresh shell, carry `$UA_DIR` forward like `$PROJECT_ROOT`, re-resolving it with the same line if a later command block needs it.\n3. Resolve `PLUGIN_ROOT` and ensure core is built (same logic as `/understand` Phase 0.1.5). If `packages/core/dist/figma/index.js` is missing, run:\n   ```bash\n   cd \"$PLUGIN_ROOT\" && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install) && pnpm --filter @understand-anything/core build\n   ```\n4. `mkdir -p $UA_DIR/intermediate`.\n\n## Phase 1 — FETCH & PARSE (deterministic)\n\nRun the bundled scan script (`<SKILL_DIR>` is this skill's directory):\n\n```bash\nFIGMA_TOKEN=\"$FIGMA_TOKEN\" node <SKILL_DIR>/figma-scan.mjs \"$PROJECT_ROOT\" \"<url-or-key>\"\n```\n\nIt writes `$UA_DIR/intermediate/scan-manifest.json` and prints the node counts. Relay the counts to the user. If it exits non-zero, relay stderr and STOP.\n\n> If the scan prints `UP_TO_DATE`, report \"Design graph is already up to date for this Figma file version\" and STOP. To force a full rebuild, re-run with `UNDERSTAND_FIGMA_FORCE=1` set in the environment.\n\n## Phase 2 — ANALYZE (LLM enrichment)\n\n1. Read `scan-manifest.json`. Group nodes into batches of ~15, grouped by page when possible.\n2. For each batch, dispatch a subagent using the `design-analyzer` agent definition (`agents/design-analyzer.md`). Pass:\n   - the batch of nodes (`id`, `type`, `name`, `figmaMeta`, child names, token usage),\n   - the full list of existing node IDs,\n   - `$INTERMEDIATE_DIR = $UA_DIR/intermediate`,\n   - the batch number for output naming.\n   The agent writes `analysis-batch-<N>.json`.\n   Append `$LANGUAGE_DIRECTIVE` if `--language` was provided (reuse `/understand`'s directive text).\n3. Run up to **5 batches concurrently**. If a batch fails, log a warning and continue — the manifest is a solid base.\n\n## Phase 3 — MERGE\n\n```bash\nnode <SKILL_DIR>/figma-merge.mjs \"$PROJECT_ROOT\"\n```\n\nIt combines `scan-manifest.json` + `analysis-batch-*.json`, runs `mergeDesignGraph` (validates, re-attaches `kind:\"design\"`), and writes `knowledge-graph.json` + `meta.json`. Relay the printed stats and any non-`auto-corrected` issues.\n\n## Phase 4 — SAVE & LAUNCH\n\n1. Clean up intermediate files **except** `scan-manifest.json`:\n   ```bash\n   INTER=\"$UA_DIR/intermediate\"\n   find \"$INTER\" -mindepth 1 -maxdepth 1 -not -name 'scan-manifest.json' -exec rm -rf {} +\n   ```\n2. Report a summary: project name, counts by node type, edges by type, layers, tour steps, and the path `$UA_DIR/knowledge-graph.json`.\n3. Auto-launch the dashboard by invoking the `/understand-dashboard` skill.","author":"@Egonex-AI","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/Egonex-AI/Understand-Anything/tree/main/understand-anything-plugin/skills/understand-figma","license":"MIT","category":"writing","lang":"en","tokens":1019,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[{"path":"figma-merge.mjs","size":1780,"sha256":"29018498529cf26be6166639ee6e93573b7cd16dba87def29c16f78fa9100797"},{"path":"figma-scan.mjs","size":4326,"sha256":"257a23096534bd32047a294ffbcc84019d85e85a8b7b58aeb4ad69de105a6805"}],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[{"code":"net.endpoints","kind":"exfiltration","excerpt":"www.figma.com","message":"bundled scripts reach 1 external host(s)","severity":"warn"}],"scannedAt":"2026-08-22","hasScripts":true,"networkEndpoints":["www.figma.com"]}}