Skip to content
Get packs

Figma Design Knowledge Graph

Maps a Figma file's pages, screens, components and design tokens into an interactive graph

Source Download skill
Repository
Egonex-AI/Understand-Anything
Stars
89,744
Licence
MIT
Files
3 files

What it does

This skill lets an AI agent read a Figma design file through Figma's official web API and turn it into a structured map of its pages, screens, components, component sets, instances and design tokens (colours, type styles and similar values). The agent then adds short explanations to each part and produces an interactive dashboard so you can browse how the design fits together. It needs your personal Figma access token and makes outbound requests to Figma's servers, so it is not fully offline like the code-focused version.

Great for

  • Designers or design leads who want to audit how a large Figma file is organised
  • Front-end developers mapping which components and tokens a design system uses
  • Teams onboarding someone to an unfamiliar Figma file

Skip it if

  • Files containing confidential or unreleased designs if your token or the output could be shared carelessly, since the graph is stored in your project folder
  • Quick one-off questions about a single frame, where simply opening Figma is faster
  • Users without a Figma personal access token or without Node 22 and pnpm 10 installed

Try asking

  • “/understand-figma https://www.figma.com/design/<file-key>/MyDesignSystem”
  • “/understand-figma <file-key> --language German”
  • “Map the components and design tokens in our Figma file so I can review the design system”
Step-by-step guide: how to use Figma Design Knowledge GraphInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    understand-figma.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip understand-figma.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip understand-figma.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Create a Figma token with the narrowest access you can and export it only in the shell session you use, never in a committed file.
  • Re-running on an unchanged Figma file version reports it is up to date; set UNDERSTAND_FIGMA_FORCE=1 to force a full rebuild.
  • Check that the project's .gitignore excludes the generated graph folder if the design is confidential.

What's inside

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

Redistributed unmodified from Egonex-AI/Understand-Anything under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.