understand-figma

Name: understand-figma
Author: Egonex-AI

123installs6.3kforks

How to install understand-figma?

egonex-ai/understand-anything/understand-figma

$npx -y skills add Egonex-AI/Understand-Anything --skill understand-figma

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# /understand-figma
2
3	Analyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard.
4
5	## Prerequisites
6
7	- `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:
8	> Set a Figma token first: create one at figma.com/settings, then `export FIGMA_TOKEN=<token>`.
9	- Node ≥ 22, pnpm ≥ 10.
10
11	> 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.
12
13	## Phase 0 — Pre-flight
14
15	1. Parse `$ARGUMENTS` for a Figma URL or bare file key (the non-flag token) and an optional `--language <lang>`.
16	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, 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.
17	3. 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:
18	```bash
19	cd "$PLUGIN_ROOT" && (pnpm install --frozen-lockfile 2>/dev/null \|\| pnpm install) && pnpm --filter @understand-anything/core build
20	```
21	4. `mkdir -p $UA_DIR/intermediate`.
22
23	## Phase 1 — FETCH & PARSE (deterministic)
24
25	Run the bundled scan script (`<SKILL_DIR>` is this skill's directory):
26
27	```bash
28	FIGMA_TOKEN="$FIGMA_TOKEN" node <SKILL_DIR>/figma-scan.mjs "$PROJECT_ROOT" "<url-or-key>"
29	```
30
31	It 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.
32
33	> 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.
34
35	## Phase 2 — ANALYZE (LLM enrichment)
36
37	1. Read `scan-manifest.json`. Group nodes into batches of ~15, grouped by page when possible.
38	2. For each batch, dispatch a subagent using the `design-analyzer` agent definition (`agents/design-analyzer.md`). Pass:
39	- the batch of nodes (`id`, `type`, `name`, `figmaMeta`, child names, token usage),
40	- the full list of existing node IDs,
41	- `$INTERMEDIATE_DIR = $UA_DIR/intermediate`,
42	- the batch number for output naming.
43	The agent writes `analysis-batch-<N>.json`.
44	Append `$LANGUAGE_DIRECTIVE` if `--language` was provided (reuse `/understand`'s directive text).
45	3. Run up to 5 batches concurrently. If a batch fails, log a warning and continue — the manifest is a solid base.
46
47	## Phase 3 — MERGE
48
49	```bash
50	node <SKILL_DIR>/figma-merge.mjs "$PROJECT_ROOT"
51	```
52
53	It 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.
54
55	## Phase 4 — SAVE & LAUNCH
56
57	1. Clean up intermediate files except `scan-manifest.json`:
58	```bash
59	INTER="$UA_DIR/intermediate"
60	find "$INTER" -mindepth 1 -maxdepth 1 -not -name 'scan-manifest.json' -exec rm -rf {} +
61	```
62	2. Report a summary: project name, counts by node type, edges by type, layers, tour steps, and the path `$UA_DIR/knowledge-graph.json`.
63	3. Auto-launch the dashboard by invoking the `/understand-dashboard` skill.

People who liked this also viewed

6 picks

Type

understand-figma

123installs6.3kforks

View on GitHub

How to install understand-figma?

egonex-ai/understand-anything/understand-figma

$npx -y skills add Egonex-AI/Understand-Anything --skill understand-figma

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# /understand-figma
2
3	Analyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard.
4
5	## Prerequisites
6
7	- `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:
8	> Set a Figma token first: create one at figma.com/settings, then `export FIGMA_TOKEN=<token>`.
9	- Node ≥ 22, pnpm ≥ 10.
10
11	> 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.
12
13	## Phase 0 — Pre-flight
14
15	1. Parse `$ARGUMENTS` for a Figma URL or bare file key (the non-flag token) and an optional `--language <lang>`.
16	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, 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.
17	3. 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:
18	```bash
19	cd "$PLUGIN_ROOT" && (pnpm install --frozen-lockfile 2>/dev/null \|\| pnpm install) && pnpm --filter @understand-anything/core build
20	```
21	4. `mkdir -p $UA_DIR/intermediate`.
22
23	## Phase 1 — FETCH & PARSE (deterministic)
24
25	Run the bundled scan script (`<SKILL_DIR>` is this skill's directory):
26
27	```bash
28	FIGMA_TOKEN="$FIGMA_TOKEN" node <SKILL_DIR>/figma-scan.mjs "$PROJECT_ROOT" "<url-or-key>"
29	```
30
31	It 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.
32
33	> 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.
34
35	## Phase 2 — ANALYZE (LLM enrichment)
36
37	1. Read `scan-manifest.json`. Group nodes into batches of ~15, grouped by page when possible.
38	2. For each batch, dispatch a subagent using the `design-analyzer` agent definition (`agents/design-analyzer.md`). Pass:
39	- the batch of nodes (`id`, `type`, `name`, `figmaMeta`, child names, token usage),
40	- the full list of existing node IDs,
41	- `$INTERMEDIATE_DIR = $UA_DIR/intermediate`,
42	- the batch number for output naming.
43	The agent writes `analysis-batch-<N>.json`.
44	Append `$LANGUAGE_DIRECTIVE` if `--language` was provided (reuse `/understand`'s directive text).
45	3. Run up to 5 batches concurrently. If a batch fails, log a warning and continue — the manifest is a solid base.
46
47	## Phase 3 — MERGE
48
49	```bash
50	node <SKILL_DIR>/figma-merge.mjs "$PROJECT_ROOT"
51	```
52
53	It 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.
54
55	## Phase 4 — SAVE & LAUNCH
56
57	1. Clean up intermediate files except `scan-manifest.json`:
58	```bash
59	INTER="$UA_DIR/intermediate"
60	find "$INTER" -mindepth 1 -maxdepth 1 -not -name 'scan-manifest.json' -exec rm -rf {} +
61	```
62	2. Report a summary: project name, counts by node type, edges by type, layers, tour steps, and the path `$UA_DIR/knowledge-graph.json`.
63	3. Auto-launch the dashboard by invoking the `/understand-dashboard` skill.

People who liked this also viewed

6 picks

Type