Understand Figma
Analyze a Figma file through the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances
- What
- Analyze a Figma file through the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances
- Cost
- Free
- Needs
- Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — Analyze a Figma file through the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) for the Understand-Anything dashboard. Use-time requirements, disclosed up front: your own Figma personal access token (FIGMA_TOKEN, read from the environment, sent only as a request header to api.figma.com, never written to any file), the Understand-Anything plugin installed with its core built, and Node ≥ 22 with pnpm ≥ 10. Not offline at use time; it reads a Figma file and writes the graph locally, it does not create or modify frames in Figma. By @Egonex-AI, listed here with credit to its creator. MIT licensed. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into Muse📌 Pinned version: commit e24fcf6Before you start: read this whole install prompt, tell me in a few lines what this skill does and what installing it involves, and wait for my go-ahead before you do anything else. Prerequisites — Reinforced framing, disclosed up front: at use time this skill REQUIRES a Figma personal access token, FIGMA_TOKEN — YOUR OWN token, set by you in your environment before use (create one at figma.com/settings). The skill reads the token only from the environment and sends it only in the X-Figma-Token request header to api.figma.com; the SKILL.md itself states the token is never written to the graph, meta.json, logs or intermediate files, and it must never be pasted into a file or shared. This skill is NOT fully offline at use time: it makes outbound calls to api.figma.com. Also required at use time: Node ≥ 22 and pnpm ≥ 10. Use-time prerequisite, disclosed up front: this skill is one of the Understand-Anything plugin's skills. It assumes the Understand-Anything plugin is installed and its core is built (pnpm install in the plugin, then building packages/core, the @understand-anything/core package) — installing this listing only copies the skill folder below; it does not install or build the plugin. No account, key or payment is needed to install this listing itself — the token is a use-time requirement only. Install "Understand Figma" for me. It analyzes a Figma file through the Figma REST API and generates an interactive design knowledge graph — pages, screens, components, component sets, instances and design tokens — tagged kind:"design" for the existing Understand-Anything dashboard. Its bundled figma-scan.mjs fetches the file's document, styles and screen thumbnails from api.figma.com using your FIGMA_TOKEN (header only, never written anywhere); LLM design-analyzer subagents then enrich batches of nodes, and figma-merge.mjs merges the result into knowledge-graph.json and meta.json in your project's data directory (.ua/, or the legacy .understand-anything/ when it already exists), after which it auto-launches the separate understand-dashboard skill. It reads a Figma file; it does not create or modify frames inside Figma. Its folder holds SKILL.md plus the two Node scripts it runs. Repository: https://github.com/Egonex-AI/Understand-Anything (the skill is the whole understand-anything-plugin/skills/understand-figma/ folder at the pinned commit: SKILL.md, figma-merge.mjs, figma-scan.mjs, 3 files in total) Pinned version: install the code at commit e24fcf6d371bcfa529bc110bacb1bb43de1b8d33 exactly. Do not substitute a newer version. If this commit is unreachable, stop and tell me. 1. Clone https://github.com/Egonex-AI/Understand-Anything into a temporary folder, check out commit e24fcf6d371bcfa529bc110bacb1bb43de1b8d33, and copy the understand-anything-plugin/skills/understand-figma/ folder from that checkout. Then compare every file in the folder with the fingerprints recorded for this listing on 2026-10-22: [FINGERPRINTS] - SKILL.md: SHA-256 b8f76ffb75250a265d609d597c218d1884e220618065240748f2256ef10c475d - figma-merge.mjs: SHA-256 29018498529cf26be6166639ee6e93573b7cd16dba87def29c16f78fa9100797 - figma-scan.mjs: SHA-256 257a23096534bd32047a294ffbcc84019d85e85a8b7b58aeb4ad69de105a6805 If a file does not match, it changed since the listing was prepared: do not install it yet, tell me what you found and let me decide. 2. Read SKILL.md in full, and tell me in plain words: what the skill does when used, what it connects to, whether it reads or sends any personal information or credentials, and anything that seems unusual. Stop on any red flag and tell me before going further. Confirm these points from the files: - The folder holds 3 files only: SKILL.md (4,137 bytes, frontmatter name understand-figma), figma-scan.mjs and figma-merge.mjs — two Node scripts that import @understand-anything/core/figma from the built plugin core. There is no other code in it. - Nothing is sent anywhere and no token is read during installation itself; the only download at install time is the skill folder from GitHub at the pinned commit. Do not set, paste or provide any Figma token during this install. - At use time it makes outbound calls to api.figma.com with my own FIGMA_TOKEN read from the environment and sent only in the X-Figma-Token header — the SKILL.md states the token is never written to the graph, meta.json, logs or intermediate files. At use time it writes knowledge-graph.json, meta.json and intermediate files in my project's data directory (.ua/, or legacy .understand-anything/), cleans up its intermediates except scan-manifest.json, and auto-launches the separate understand-dashboard skill. - Do not call the Figma API, do not run figma-scan.mjs or figma-merge.mjs, and do not use the skill in any way during this install: using it is a separate step that only starts when I ask for it later. 3. When I say "yes, install", install it as a skill: copy the whole understand-figma folder into the agent's skills directory, in a folder named exactly "understand-figma", keeping its 3 files in their original relative layout (SKILL.md at its root). 4. Verify with no network calls: frontmatter valid (name: understand-figma), the 3 files in place with matching fingerprints. Do not run anything from the folder and do not use the skill to verify. 5. Report what was installed, where, and what I still need to do myself (for example: that the Understand-Anything plugin must be installed with its core built (pnpm install plus building packages/core), that Node ≥ 22 and pnpm ≥ 10 are required at use time, that I must set my own FIGMA_TOKEN in my environment before using it (and that it is never written to any file), and that using this skill is a separate step that only starts when I ask for it later). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Saved to your recent installs. Find it anytime on /connect.
🔒 Security, provenance and what this touches
- It can download and install software packages.
- It works with an API key or a token that you provide.
What the scan found — excerpts from the install prompt
- installs packages — Prerequisites — Reinforced framing, disclosed up front: at use time this skill REQUIRES a Figma personal acces · Prérequis — Cadrage renforcé, divulgué en tête : à l'usage, ce skill EXIGE un jeton d'accès personnel Figma, F
- uses API keys or tokens — Prerequisites — Reinforced framing, disclosed up front: at use time this skill REQUIRES a Figma personal acces · Prérequis — Cadrage renforcé, divulgué en tête : à l'usage, ce skill EXIGE un jeton d'accès personnel Figma, F
The install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.