Agent skill

Figma Explore

by bitovi in bitovi/ai-enablement-prompts

Explore a Figma file to discover all pages, components, and component sets using the Figma REST API.

MITAuto-check: notesBackend & APIs

Install Figma Explore

skills CLI
$ npx skills add bitovi/ai-enablement-prompts --skill figma-explore -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install bitovi/ai-enablement-prompts figma-explore --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/figma/figma-explore .claude/skills/figma-explore && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
figma-explore
GitHub stars
121
Token cost
~1.1k tokens
SKILL.md length
339 words
Files
2
Skills in repo
40
Repo updated
First seen
Licence
MIT

At a glance

Explore a Figma file to discover all pages, components, and component sets using the Figma REST API.

  • Works in 4 steps: Verify Environment → Run Extraction → Use Results → …
  • You need to list components in a Figma file
  • SKILL.md covers When to Use This Skill, Prerequisites, The Script: figma-extract-all.js and Execution Steps, plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node; needs FIGMA_ACCESS_TOKEN

What it does

Figma Explore is an agent skill from bitovi/ai-enablement-prompts. Explore a Figma file to discover all pages, components, and component sets using the Figma REST API. Use when you need to list components in a Figma file, find component node IDs for Code Connect, or understand the structure of a design file.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `figma-extract-all.js`).

It sits in Backend & APIs, covering REST APIs. It works with Figma. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.

When your agent uses it

  • You need to list components in a Figma file
  • Find component node IDs for Code Connect
  • Understand the structure of a design file

Example prompts

  • “/figma-explore”

Requirements

  • Node.js
  • A credential in FIGMA_ACCESS_TOKEN

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Verify Environment
  2. Run Extraction
  3. Use Results
  4. Generate Code Connect

What it can do on your machine

Read from SKILL.md and the folder at commit df229b1. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • figma.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • FIGMA_ACCESS_TOKEN

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Figma Explore loads about 1.1k tokens when it runs. Until then it costs about 64 tokens; SKILL.md has 339 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~64
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:19
    1. **FIGMA_ACCESS_TOKEN**: Set in `.env` or environment
  • NoteMentions a .env fileSKILL.md:71
    source .env 2>/dev/null
  • NoteMentions a .env fileSKILL.md:77
    2. Add to `.env`: `FIGMA_ACCESS_TOKEN=figd_...`
  • NoteMentions a .env fileSKILL.md:83
    source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>" --list-only
  • NoteMentions a .env fileSKILL.md:88
    source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>"

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 339 words, ~1,093 tokens.

Download SKILL.mdSave it as .claude/skills/figma-explore/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
figma-explore
description
Explore a Figma file to discover all pages, components, and component sets using the Figma REST API. Use when you need to list components in a Figma file, find component node IDs for Code Connect, or understand the structure of a design file.

Skill: Explore Figma Files

This skill provides scripts to explore Figma files via the REST API, bypassing the limitations of the MCP tools which require a specific node ID.

When to Use This Skill

  • User provides a Figma file URL without a specific node ID
  • Need to discover all components in a Figma design system
  • Want to find component node IDs for Code Connect setup
  • Need to understand the page/component structure of a Figma file

Prerequisites

  1. FIGMA_ACCESS_TOKEN: Set in .env or environment

  2. Node.js: Version 18+ (for native fetch)

The Script: figma-extract-all.js

A single script that handles both discovery and full extraction with batched API requests.

Usage:

bash
node <path-to-skills>/figma-explore/figma-extract-all.js <figmaFileUrl> [options]

Options:

OptionDescriptionDefault
--list-onlyQuick discovery only (1 API call)Full extraction
--output <dir>Output directory for JSON files.temp/figma-explore
--batch-size <n>Components per batch request30
--delay <ms>Delay between batches (rate limiting)1000
Quick Discovery (1 API call)
bash
node <path-to-skills>/figma-explore/figma-extract-all.js <url> --list-only

Outputs JSON with component names, IDs, and URLs to stdout.

Full Extraction (batched)
bash
node <path-to-skills>/figma-explore/figma-extract-all.js <url>

Writes to .temp/figma-explore/:

  • figma-components-index.json - Summary index
  • <component>.json - Full evidence per component
API Call Efficiency
Mode45 ComponentsAPI Calls
--list-only1 call✅ Instant
Full extraction1 + ⌈45/30⌉ = 3 calls✅ Batched

Execution Steps

Step 1: Verify Environment

Before running the script, ensure the token is available:

bash
# Check if token is set
source .env 2>/dev/null
[ -n "$FIGMA_ACCESS_TOKEN" ] && echo "Token: set" || echo "Token: missing"

If not set:

  1. Create token at https://www.figma.com/developers/api#access-tokens
  2. Add to .env: FIGMA_ACCESS_TOKEN=figd_...
Step 2: Run Extraction

Quick discovery:

bash
source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>" --list-only

Full extraction:

bash
source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>"
Step 3: Use Results

Index file (.temp/figma-explore/figma-components-index.json):

json
{
  "fileName": "My Design System",
  "fileKey": "abc123DEF456",
  "totalComponents": 45,
  "components": [
    { "name": "Button", "id": "16:1234", "url": "..." }
  ]
}

Component evidence (.temp/figma-explore/button.json):

json
{
  "componentSetId": "16:1234",
  "componentName": "Button",
  "variantProperties": { "Size": ["Small", "Large"] },
  "componentProperties": [{ "name": "Disabled", "type": "BOOLEAN" }],
  "textLayers": [{ "name": "Label", "characters": "Button" }],
  "slotLayers": [{ "name": "Icon", "type": "INSTANCE" }]
}
Step 4: Generate Code Connect

Use the evidence files with:

  • The figma-connect-component skill
  • Direct Code Connect generation
  • Manual .figma.tsx file creation

Figma REST API Reference

The scripts use these endpoints:

EndpointPurpose
GET /v1/files/:file_keyGet entire file structure
GET /v1/files/:file_key/nodes?ids=:node_idsGet specific node details
GET /v1/files/:file_key/componentsList published components

Troubleshooting

401/403 Errors
404 Errors
  • File key is incorrect
  • You don't have access to the file
  • File has been deleted or moved
Network Errors
  • Check internet connection
  • Corporate proxy may need HTTP_PROXY/HTTPS_PROXY set

© bitovi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in figma/figma-explore of bitovi/ai-enablement-prompts.

  • SKILL.md
  • figma-extract-all.js

Open the folder on GitHubat commit df229b1

Compare with similar skills

Figma Explore next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Figma Explore compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Figma Explore this skillbitovi/ai-enablement-prompts121—~1.1kAutomated safety check: NotesMIT
Io Figmagridaco/grida2.7k—~2.2kAutomated safety check: NotesApache-2.0
Figma Comment Fix Loophashgraph-online/awesome-codex-plugins1.2k—~4.8kAutomated safety check: PassMIT
Anima Deploy Integrationjeremylongshore/tons-of-skills-marketplace2.8k—~1.3kAutomated safety check: PassMIT
Figma Architecture Variantsjeremylongshore/tons-of-skills-marketplace2.8k—~2kAutomated safety check: PassMIT
Figma Common Errorsjeremylongshore/tons-of-skills-marketplace2.8k—~1.8kAutomated safety check: PassMIT

Similar skills

  • Io Figma

    gridaco/grida

    Guides work on the Figma I/O package (@grida/io-figma, packages/grida-canvas-io-figma/).

    2.7k GitHub stars~2.2k tokensUpdated yesterday
    Backend & APIsAuto-check: notes
  • Figma Comment Fix Loop

    hashgraph-online/awesome-codex-plugins

    Comment-to-fix pipeline for Figma. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.2k GitHub stars~4.8k tokensUpdated today
    Backend & APIsAuto-check passed
  • Anima Deploy Integration

    jeremylongshore/tons-of-skills-marketplace

    Deploy Anima design-to-code service as a backend API endpoint.

    2.8k GitHub stars~1.3k tokensUpdated today
    Backend & APIsAuto-check passed
  • Figma Architecture Variants

    jeremylongshore/tons-of-skills-marketplace

    Choose between Figma integration architectures: CLI script, webhook service, or plugin.

    2.8k GitHub stars~2k tokensUpdated today
    Backend & APIsAuto-check passed
  • Figma Common Errors

    jeremylongshore/tons-of-skills-marketplace

    Diagnose and fix common Figma REST API and Plugin API errors.

    2.8k GitHub stars~1.8k tokensUpdated today
    Backend & APIsAuto-check passed
  • Figma Core Workflow B

    jeremylongshore/tons-of-skills-marketplace

    Export images, icons, and assets from Figma files via the REST API.

    2.8k GitHub stars~1.7k tokensUpdated today
    Backend & APIsAuto-check passed

More from bitovi/ai-enablement-prompts

All 40 skills in this repo
  • Component Registry

    bitovi/ai-enablement-prompts

    Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~597 tokensUpdated 27 days ago
    Auto-check passed
  • Computed Styles

    bitovi/ai-enablement-prompts

    Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.

    121 GitHub stars~2.4k tokensUpdated 27 days ago
    Auto-check passed
  • Create Plugin

    bitovi/ai-enablement-prompts

    A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.

    121 GitHub stars~2k tokensUpdated 27 days ago
    Auto-check passed
  • Create React Modlet

    bitovi/ai-enablement-prompts

    Create React components, hooks, or utilities following the modlet pattern.

    121 GitHub stars~2.1k tokensUpdated 27 days ago
    Auto-check passed
  • Create Skill

    bitovi/ai-enablement-prompts

    A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.

    121 GitHub stars~1.6k tokensUpdated 27 days ago
    Auto-check passed
  • Create Skill

    bitovi/ai-enablement-prompts

    Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.

    121 GitHub stars~1.7k tokensUpdated 27 days ago
    Auto-check passed

Works with

Categories

Questions about Figma Explore

What does Figma Explore do?

Explore a Figma file to discover all pages, components, and component sets using the Figma REST API. Figma Explore is an agent skill from bitovi/ai-enablement-prompts. Explore a Figma file to discover all pages, components, and component sets using the Figma REST API.

When should I use Figma Explore?

Figma Explore fits situations like: you need to list components in a Figma file; find component node IDs for Code Connect; understand the structure of a design file.

How do I install Figma Explore in Claude Code?

Run `npx skills add bitovi/ai-enablement-prompts --skill figma-explore -a claude-code`. Or copy the skill folder (figma/figma-explore in bitovi/ai-enablement-prompts) into .claude/skills/figma-explore in your project. Claude Code loads it when a task matches its description.

How do I install Figma Explore in Codex?

Run `npx skills add bitovi/ai-enablement-prompts --skill figma-explore -a codex`. Or copy the skill folder (figma/figma-explore in bitovi/ai-enablement-prompts) into .agents/skills/figma-explore in your project. Codex loads it when a task matches its description.

Can I use Figma Explore in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bitovi/ai-enablement-prompts --skill figma-explore -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-explore, .gemini/skills/figma-explore, .github/skills/figma-explore and .opencode/skills/figma-explore in your project.

What does Figma Explore need to run?

Going by SKILL.md and its folder, Figma Explore needs JavaScript for the scripts in its folder, the command-line tools its instructions call (node) and credentials named FIGMA_ACCESS_TOKEN. Our summary lists: Node.js; A credential in FIGMA_ACCESS_TOKEN.

Does Figma Explore access the network?

SKILL.md names 1 domain. As links in the text: figma.com. This is read from the text; nothing was executed.

Is Figma Explore safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Figma Explore use?

Figma Explore is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Figma Explore use?

About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figma Explore?

Skills that share tags, products or a category with Figma Explore: Io Figma (gridaco/grida, 2.7k stars), Figma Comment Fix Loop (hashgraph-online/awesome-codex-plugins, 1.2k stars), Anima Deploy Integration (jeremylongshore/tons-of-skills-marketplace, 2.8k stars) and Figma Architecture Variants (jeremylongshore/tons-of-skills-marketplace, 2.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figma Explore?

bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.

Source: bitovi/ai-enablement-prompts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.