// 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.
Connect shadcn/ui components to their Figma design system counterparts using Code Connect.
Implement 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".
| 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 .github/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 .github/skills/figma-explore/figma-extract-all.js <url> --list-only
Outputs JSON with component names, IDs, and URLs to stdout.
node .github/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 .github/skills/figma-explore/figma-extract-all.js "<figmaUrl>" --list-only
Full extraction:
source .env && node .github/skills/figma-explore/figma-extract-all.js "<figmaUrl>"
Index file (.temp/figma-explore/figma-components-index.json):
{
"fileName": "Obra shadcn/ui",
"fileKey": "MQUbIrlfuM8qnr9XZ7jc82",
"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 scope