understand-figma
This skill connects to your Figma file via the REST API to map its structure—pages, screens, components, instances, and design tokens—into an interactive knowledge graph. The result appears as a searchable, explorable dashboard within your existing environment.
understand-figma analyzes your Figma file and builds an interactive design knowledge graph you can explore.
AI-generated summary based on this skill's SKILL.md
Install
Egonex-AI/Understand-Anything/understand-figma · repository language: TypeScript
git clone https://github.com/Egonex-AI/Understand-Anything
cp -r Understand-Anything/understand-anything-plugin/skills/understand-figma ~/.claude/skills/understand-figmaFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I analyze a Figma file design system with understand-figma?
understand-figma connects to your Figma file via the REST API to map its structure—pages, screens, components, instances, and design tokens—into an interactive knowledge graph. The result appears as a searchable, explorable dashboard within your existing environment, letting you visualize your entire design system at once.
What can understand-figma extract from my Figma file?
understand-figma extracts and visualizes design tokens, components, and instances from your Figma file. It maps pages, screens, and component relationships to show you how your design system is organized and connected.
Can understand-figma generate design documentation?
Yes. understand-figma can generate design system documentation directly from your Figma file by analyzing its structure and extracting key design information. This helps you maintain up-to-date documentation without manual effort.
Does understand-figma audit component usage in Figma?
understand-figma audits your Figma design hierarchy and component usage, analyzing instances and sets to show you how components are used across your file. This helps identify inconsistencies and optimization opportunities.
What is the understand-figma file parser used for?
understand-figma's file parser analyzes Figma file structure through the REST API, breaking down pages, screens, components, and design tokens into a structured format. This enables deep analysis and visualization of your design system's architecture.
Is understand-figma open source?
Yes, understand-figma is released under the MIT license, making it open source and freely available for use and modification.
SKILL.md
rendered from the published skill — quoted content, verbatim
/understand-figma
Analyzes a Figma file and produces an interactive design knowledge graph in the existing dashboard.
Prerequisites
FIGMA_TOKENenvironment 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, thenexport 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
- Parse
$ARGUMENTSfor a Figma URL or bare file key (the non-flag token) and an optional--language <lang>. - Resolve
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
understand-anything-plugin/skills/understand-figma/SKILL.md
understand-anything-plugin/skills/understand-figma/figma-merge.mjs
understand-anything-plugin/skills/understand-figma/figma-scan.mjs