Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

understand-figma — Figma Design Knowledge Graph

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

Design & UIIntermediate★ 78,314⑂ 6,578AI score 7/10Last updated: Jul 30, 2026

What it does

  • Takes a Figma file URL or bare file key and pulls the file structure from the Figma REST API (api.figma.com).
  • Extracts pages, screens (frames), components, component sets, instances and design tokens as graph nodes, then links them with typed edges.
  • Splits nodes into ~15-item batches (up to 5 running concurrently) and enriches them with the design-analyzer subagent, merging everything into a kind:"design" knowledge-graph.json plus meta.json.
  • Auto-launches the interactive dashboard via the /understand-dashboard skill.
  • Detects unchanged Figma versions (UP_TO_DATE) to skip redundant work; force a rebuild with UNDERSTAND_FIGMA_FORCE=1.

Who it's for

  • Design system owners who need a bird's-eye view of a large Figma file and its component reuse.
  • Front-end engineers documenting the screen/component hierarchy before converting designs to code.
  • PMs or new designers who inherit an unfamiliar design file and need to ramp up fast.

Examples

  1. /understand-figma https://www.figma.com/file/abc123/Design-System — scan the whole file and inspect component-set to instance relationships.
  2. /understand-figma abc123 --language en — generate the enrichment text in a specific language for team documentation.
  3. Before a design-token cleanup, query the graph for every screen referencing a given color or typography token to size the impact.

· · · Install guide · · ·

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. Install Node.js 22+ and pnpm 10+ (verify with node -v and pnpm -v).
  2. Clone the repo: git clone https://github.com/Egonex-AI/Understand-Anything.git
  3. Build the plugin core: cd Understand-Anything/understand-anything-plugin && pnpm install && pnpm --filter @understand-anything/core build
  4. Copy the skill into Claude Code: mkdir -p ~/.claude/skills && cp -r skills/understand-figma ~/.claude/skills/ (also copy understand-dashboard so the dashboard can launch).
  5. Create a Figma personal access token at figma.com/settings and export it: export FIGMA_TOKEN=<your_token>
  6. Open Claude Code inside your project directory and run /understand-figma <figma-file-url>.
  7. Output lands in .ua/knowledge-graph.json and the dashboard opens automatically.
View source on GitHub ↗License: MIT