Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

understand-figma — Figma Design Knowledge Graph Builder

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

Design & UIAdvanced★ 83,748⑂ 7,058AI score 8/10Last updated: Sep 12, 2026

What it does

  • Takes a Figma file URL or bare file key and fetches the document via the Figma REST API.
  • Extracts pages, screens, components, component sets, instances and design tokens into scan-manifest.json.
  • Dispatches a design-analyzer subagent over ~15-node batches (up to 5 in parallel), then merges everything into knowledge-graph.json + meta.json.
  • Auto-launches the kind:"design" dashboard for visual exploration.
  • Reads FIGMA_TOKEN only from the environment and sends it only in the X-Figma-Token header — never into graphs, logs, or intermediate files.

Who it's for

  • Designers and design engineers auditing a design system's components and token usage.
  • Frontend developers who need to understand a Figma file's structure before implementing UI.
  • Product teams documenting screen flows and design consistency at scale.

Examples

  1. /understand-figma https://www.figma.com/file/abcd1234/Design-System — full scan producing a component hierarchy graph.
  2. /understand-figma abcd1234 --language en — localize the generated explanations.
  3. Unchanged files report UP_TO_DATE and stop; set UNDERSTAND_FIGMA_FORCE=1 to force a rebuild.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/Egonex-AI/Understand-Anything/HEAD/understand-anything-plugin/skills/understand-figma/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the understand-anything-plugin/skills/understand-figma folder from the GitHub repo Egonex-AI/Understand-Anything into my ~/.claude/skills/understand-figma/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/Egonex-AI/Understand-Anything.git && mkdir -p ~/.claude/skills && cp -r Understand-Anything/understand-anything-plugin/skills/understand-figma ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Verify Node ≥ 22 and pnpm ≥ 10 are installed (node -v, pnpm -v).
  2. Clone the repo: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. Install deps and build the core package: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. Register the skill: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (keep the full plugin around, since agents/design-analyzer.md and the bundled scripts are required).
  5. Create a Figma personal access token at https://www.figma.com/settings and run export FIGMA_TOKEN=<token>.
  6. From your project directory, run /understand-figma <figma-url> in Claude Code.
  7. Output lands in .ua/knowledge-graph.json and the dashboard opens automatically.
View source on GitHub ↗License: MIT