New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Figma Design Knowledge Graph

by Egonex-AI in Egonex-AI/Understand-Anything

Scans a Figma file through the Figma REST API and builds an interactive knowledge graph of its pages, screens, components and tokens for the design dashboard.

MITAuto-check passedKnowledge Management

Install Figma Design Knowledge Graph

skills CLI
$ npx skills add Egonex-AI/Understand-Anything --skill understand-figma -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Egonex-AI/Understand-Anything understand-figma --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Egonex-AI/Understand-Anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/understand-anything-plugin/skills/understand-figma .claude/skills/understand-figma && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
understand-figma
GitHub stars
86k
Token cost
~1k tokens
SKILL.md length
443 words
Files
3
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Scans a Figma file through the Figma REST API and builds an interactive knowledge graph of its pages, screens, components and tokens for the design dashboard.

  • Works in 5 steps: Pre-flight → FETCH & PARSE (deterministic) → ANALYZE (LLM enrichment) → …
  • Mapping a Figma file's pages, screens and components into an explorable graph
  • SKILL.md covers Prerequisites, Phase 0 — Pre-flight, Phase 1 — FETCH & PARSE… and Phase 2 — ANALYZE (LLM…, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls pnpm and node; needs FIGMA_TOKEN

What it does

Invoked as /understand-figma with a Figma URL or file key, the skill runs the bundled figma-scan.mjs script to fetch and parse the file, writing a scan manifest and printing node counts that the agent relays to you. The agent then enriches the graph in batches of about 15 nodes, grouped by page where possible, and the result appears in the existing dashboard. A second script, figma-merge.mjs, ships alongside the scanner.

A FIGMA_TOKEN environment variable holding a Figma personal access token is required, and the skill stops with instructions if it is missing. The token travels only in a request header and is never written to the graph, logs or intermediate files. Unlike the offline /understand command, this one calls api.figma.com, and the agent tells you so once. It needs Node 22 or newer and pnpm 10 or newer, skips the work when the graph is already current for the file version, and can be forced to rebuild with an environment flag.

When your agent uses it

  • Mapping a Figma file's pages, screens and components into an explorable graph
  • Getting oriented in an unfamiliar design file
  • Seeing which component instances and design tokens a screen uses

Example prompts

  • “Run /understand-figma on our design system Figma file and show me the dashboard.”
  • “Build a design knowledge graph from this Figma URL, with the descriptions in Spanish.”
  • “Rebuild the Figma graph even though nothing has changed.”

Requirements

  • A FIGMA_TOKEN environment variable with a Figma personal access token
  • Node 22 or newer and pnpm 10 or newer
  • Network access to api.figma.com

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Pre-flight
  2. FETCH & PARSE (deterministic)
  3. ANALYZE (LLM enrichment)
  4. MERGE
  5. SAVE & LAUNCH

What it can do on your machine

Read from SKILL.md and the folder at commit ffa2f0a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • pnpm
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • figma.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FIGMA_TOKEN

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma Design Knowledge Graph loads about 1k tokens when it runs. Until then it costs about 54 tokens; SKILL.md has 443 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~54
When it runs · the whole SKILL.md, loaded when a task matches
~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Egonex-AI/Understand-Anything at commit ffa2f0a, republished under its MIT licence (© Egonex-AI). 443 words, ~1,029 tokens.

Download SKILL.mdSave it as .claude/skills/understand-figma/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
understand-figma
description
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.
argument-hint
<figma-file-url-or-key> [--language <lang>]

/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, 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.
  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:
    bash
    cd "$PLUGIN_ROOT" && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install) && pnpm --filter @understand-anything/core build
  4. mkdir -p $UA_DIR/intermediate.

Phase 1 — FETCH & PARSE (deterministic)

Run the bundled scan script (<SKILL_DIR> is this skill's directory):

bash
FIGMA_TOKEN="$FIGMA_TOKEN" node <SKILL_DIR>/figma-scan.mjs "$PROJECT_ROOT" "<url-or-key>"

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.

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.

Show full SKILL.md (174 more words)Show less

Phase 2 — ANALYZE (LLM enrichment)

  1. Read scan-manifest.json. Group nodes into batches of ~15, grouped by page when possible.
  2. For each batch, dispatch a subagent using the design-analyzer agent definition (agents/design-analyzer.md). Pass:
    • the batch of nodes (id, type, name, figmaMeta, child names, token usage),
    • the full list of existing node IDs,
    • $INTERMEDIATE_DIR = $UA_DIR/intermediate,
    • the batch number for output naming. The agent writes analysis-batch-<N>.json. Append $LANGUAGE_DIRECTIVE if --language was provided (reuse /understand's directive text).
  3. Run up to 5 batches concurrently. If a batch fails, log a warning and continue — the manifest is a solid base.

Phase 3 — MERGE

bash
node <SKILL_DIR>/figma-merge.mjs "$PROJECT_ROOT"

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.

Phase 4 — SAVE & LAUNCH

  1. Clean up intermediate files except scan-manifest.json:
    bash
    INTER="$UA_DIR/intermediate"
find "$INTER" -mindepth 1 -maxdepth 1 -not -name 'scan-manifest.json' -exec rm -rf {} +
  2. Report a summary: project name, counts by node type, edges by type, layers, tour steps, and the path $UA_DIR/knowledge-graph.json.
  3. Auto-launch the dashboard by invoking the /understand-dashboard skill.

© Egonex-AI, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in understand-anything-plugin/skills/understand-figma of Egonex-AI/Understand-Anything.

  • SKILL.md
  • figma-merge.mjs
  • figma-scan.mjs

Open the folder on GitHubat commit ffa2f0a

Compare with similar skills

Figma Design Knowledge Graph next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma Design Knowledge Graph compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma Design Knowledge Graph this skillEgonex-AI/Understand-Anything86k—~1kAutomated safety check: PassMIT
Figma Design System Builderwarpdotdev/warp65k2 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
Figma Screen Generatorwarpdotdev/warp65k2 repos~5kAutomated safety check: PassAGPL-3.0
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Qt Figma Component GenerationTheQtCompanyRnD/agent-skills470—~4.1kAutomated safety check: PassBSD-3-Clause

Similar skills

  • Figma Design System Builder

    warpdotdev/warp

    Builds or updates a design system in Figma from a codebase in ordered phases: discovery, variables and tokens, components, theming and documentation, with checkpoints.

    65k GitHub starsUsed in 2 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

  • Figma Screen Generator

    warpdotdev/warp

    Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.

    65k GitHub starsUsed in 2 repos~5k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated 2 days ago
    Frontend & DesignAuto-check: notes

  • Qt Figma Component Generation

    TheQtCompanyRnD/agent-skills

    Extract component metadata from a Figma design system and generate production-ready QML controls.

    470 GitHub stars~4.1k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • AnyDesign

    uxKero/anydesign

    Extracts the design of a screenshot, website URL or Figma file into a design.md of tokens, components, layout and brand rules, or copies one element into element.md.

    216 GitHub stars~1.5k tokensUpdated 25 days ago
    Frontend & DesignAuto-check passed

More from Egonex-AI/Understand-Anything

  • Codebase Knowledge Graph Q&A

    Egonex-AI/Understand-Anything

    Answers questions about a codebase by searching a prebuilt knowledge graph of its files, functions, classes and dependencies, not by rereading every source file.

    86k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Understand Diff Analysis

    Egonex-AI/Understand-Anything

    Reads your git changes or a pull request against a prebuilt knowledge graph of the project to explain what changed, which components are affected and what is risky.

    86k GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Understand Explain

    Egonex-AI/Understand-Anything

    Gives an in-depth explanation of one file, function or module by reading the project's knowledge graph and checking that the graph is still fresh.

    86k GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

  • Project Onboarding Guide from Knowledge Graph

    Egonex-AI/Understand-Anything

    Writes an onboarding guide for new team members from a project's existing knowledge graph, after checking that the graph still matches the current commit.

    86k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Codebase Domain Flow Extractor

    Egonex-AI/Understand-Anything

    Extracts business domains, flows and process steps from a codebase and produces an interactive horizontal flow graph, reusing an existing knowledge graph when one exists.

    86k GitHub stars~2.4k tokensUpdated yesterday
    Auto-check passed

  • LLM Wiki Knowledge Graph

    Egonex-AI/Understand-Anything

    Detects a Karpathy-pattern LLM wiki and builds an interactive knowledge graph with entities, implicit relationships and topic clusters.

    86k GitHub stars~1.5k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Figma Design Knowledge Graph

What does Figma Design Knowledge Graph do?

Scans a Figma file through the Figma REST API and builds an interactive knowledge graph of its pages, screens, components and tokens for the design dashboard. mjs script to fetch and parse the file, writing a scan manifest and printing node counts that the agent relays to you. The agent then enriches the graph in batches of about 15 nodes, grouped by page where possible, and the result appears in the existing dashboard.

When should I use Figma Design Knowledge Graph?

Figma Design Knowledge Graph fits situations like: mapping a Figma file's pages, screens and components into an explorable graph; getting oriented in an unfamiliar design file; seeing which component instances and design tokens a screen uses.

How do I install Figma Design Knowledge Graph in Claude Code?

Run `npx skills add Egonex-AI/Understand-Anything --skill understand-figma -a claude-code`. Or copy the skill folder (understand-anything-plugin/skills/understand-figma in Egonex-AI/Understand-Anything) into .claude/skills/understand-figma in your project. Claude Code loads it when a task matches its description.

How do I install Figma Design Knowledge Graph in Codex?

Run `npx skills add Egonex-AI/Understand-Anything --skill understand-figma -a codex`. Or copy the skill folder (understand-anything-plugin/skills/understand-figma in Egonex-AI/Understand-Anything) into .agents/skills/understand-figma in your project. Codex loads it when a task matches its description.

Can I use Figma Design Knowledge Graph in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Egonex-AI/Understand-Anything --skill understand-figma -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/understand-figma, .gemini/skills/understand-figma, .github/skills/understand-figma and .opencode/skills/understand-figma in your project.

What does Figma Design Knowledge Graph need to run?

Going by SKILL.md and its folder, Figma Design Knowledge Graph needs JavaScript for the scripts in its folder, the command-line tools its instructions call (pnpm and node) and credentials named FIGMA_TOKEN. Our summary lists: A FIGMA_TOKEN environment variable with a Figma personal access token; Node 22 or newer and pnpm 10 or newer; Network access to api.figma.com.

Does Figma Design Knowledge Graph access the network?

SKILL.md names 1 domain. As links in the text: figma.com. This is read from the text; nothing was executed.

Is Figma Design Knowledge Graph safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Figma Design Knowledge Graph use?

Figma Design Knowledge Graph is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma Design Knowledge Graph use?

About 1k tokens (SKILL.md is roughly 4.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma Design Knowledge Graph?

Skills that share tags, products or a category with Figma Design Knowledge Graph: Figma Design System Builder (warpdotdev/warp, 65k stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), Figma Screen Generator (warpdotdev/warp, 65k stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma Design Knowledge Graph?

Egonex-AI (a GitHub organization) maintains it in Egonex-AI/Understand-Anything, which has 85,788 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 9, 2026.

Source: Egonex-AI/Understand-Anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.