// 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.
| 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. |
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.
FIGMA_ACCESS_TOKEN: Set in .env or environment
file_content:readNode.js: Version 18+ (for native fetch)
figma-extract-all.jsA single script that handles both discovery and full extraction with batched API requests.
Usage:
node <path-to-skills>/figma-explore/figma-extract-all.js <figmaFileUrl> [options]
Options:
| Option | Description | Default |
|---|---|---|
--list-only | Quick discovery only (1 API call) | Full extraction |
--output <dir> | Output directory for JSON files | .temp/figma-explore |
--batch-size <n> | Components per batch request | 30 |
--delay <ms> | Delay between batches (rate limiting) | 1000 |
node <path-to-skills>/figma-explore/figma-extract-all.js <url> --list-only
Outputs JSON with component names, IDs, and URLs to stdout.
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| Mode | 45 Components | API Calls |
|---|---|---|
--list-only | 1 call | ✅ Instant |
| Full extraction | 1 + ⌈45/30⌉ = 3 calls | ✅ Batched |
Before running the script, ensure the token is available:
# Check if token is set
source .env 2>/dev/null
[ -n "$FIGMA_ACCESS_TOKEN" ] && echo "Token: set" || echo "Token: missing"
If not set:
.env: FIGMA_ACCESS_TOKEN=figd_...Quick discovery:
source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>" --list-only
Full extraction:
source .env && node <path-to-skills>/figma-explore/figma-extract-all.js "<figmaUrl>"
Index file (.temp/figma-explore/figma-components-index.json):
{
"fileName": "My Design System",
"fileKey": "abc123DEF456",
"totalComponents": 45,
"components": [
{ "name": "Button", "id": "16:1234", "url": "..." }
]
}
Component evidence (.temp/figma-explore/button.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" }]
}
Use the evidence files with:
figma-connect-component skill.figma.tsx file creationThe scripts use these endpoints:
| Endpoint | Purpose |
|---|---|
GET /v1/files/:file_key | Get entire file structure |
GET /v1/files/:file_key/nodes?ids=:node_ids | Get specific node details |
GET /v1/files/:file_key/components | List published components |
file_content:read scopeImplement React components from Figma designs. Use after figma-design-react has analyzed the design, or directly with a Figma URL to run analysis and implementation in one shot. Delegates to create-react-modlet for folder structure, then adds Figma-specific implementation, stories for each variant, and README with design context. Also triggers on phrases like "build this component from Figma", "implement this design", "create a component from this Figma URL", "turn this Figma into code".
Check a React component against its Figma design source and identify differences. Use when reviewing component implementations, syncing designs, auditing visual accuracy, or updating components to match new Figma designs.
Generate Figma Code Connect mappings that link React components to their Figma counterparts. Use when a component exists in code and needs a Code Connect file so Figma shows real code snippets in Dev Mode. Also triggers on phrases like "connect this component to Figma", "generate Code Connect", "publish to Figma", "add figma.connect for this component", "link this to Figma Dev Mode".
Design React components from Figma files. Use when given a Figma URL to analyze a design and propose React component architecture, props API, and variant handling. Outputs design analysis and suggested API - does not build components. Also triggers on phrases like "analyze this Figma", "what props should this component have", "design the API for this", "plan this component from Figma".
Use this skill 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. Guides creating a properly structured Claude Code skill.
Create new Agent Skills for this project. Use when asked to create a skill, document a workflow, or teach Copilot a new capability. Skills are stored in .github/skills/ and can include instructions, scripts, examples, and resources.