
Figma.Enumerate Component Urls
- 7 installs
- 493 repo stars
- Updated July 31, 2026
- coinbase/cds
Extract and enumerate component URLs from Figma
About
Lists and extracts component URLs from Figma design files. Enumerates design components.
- Figma integration
- Component extraction
Figma.Enumerate Component Urls by the numbers
- 7 all-time installs (skills.sh)
- Ranked #1,494 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/coinbase/cds --skill figma.enumerate-component-urlsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 7 |
|---|---|
| repo stars | ★ 493 |
| Last updated | July 31, 2026 |
| Repository | coinbase/cds ↗ |
What it does
Extract and enumerate component URLs from Figma
Files
Overview
Produces a [Name]: [URL] list for every public component set in a CDS Figma file, grouped by the file's page sections. Uses the Figma REST API directly (more reliable than the Figma MCP tools, which only expose the currently open page in the desktop app).
Requires $FIGMA_ACCESS_TOKEN to be set in the environment.
Default file: Unless the user provides a different Figma URL, always use the canonical CDS Components file:
- File key:
k5CtyJccNQUGMI5bI4lJ2g - URL: https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components
---
Step 1 — Get all pages via the REST API
Use the file key above (or extract it from a user-provided URL — it's the segment between /design/ and the next /). Then fetch all pages at depth=1:
FILE_KEY="k5CtyJccNQUGMI5bI4lJ2g" # override if user provided a different URL
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/${FILE_KEY}?depth=1" | python3 -c "
import json, sys
data = json.load(sys.stdin)
pages = data['document']['children']
for p in pages:
print(p['id'], '|', p['name'])
"The output mixes two kinds of pages:
| Pattern | Meaning |
|---|---|
⚡️ Actions, 🔘 Inputs, … | Section header — group label only, no component sets inside |
↳ Button, ↳ Modal, … | Component page — contains the actual component set(s) |
Collect only the component page IDs (those with the ↳ prefix) for Step 2. Ignore section header pages, cover pages, staging pages, and deprecated sections (usually marked ⛔️ Deprecated).
---
Step 2 — Batch-query pages for component sets
Query the /nodes endpoint at depth=2 to discover COMPONENT_SET children within each page. Batch many page IDs into one request to stay efficient:
# IDs are colon-separated (e.g. 60:512), URL-encode : → %3A and , → %2C
IDS="60%3A512%2C0%3A1%2C52733%3A3517"
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/${FILE_KEY}/nodes?ids=${IDS}&depth=2" | python3 -c "
import json, sys
data = json.load(sys.stdin)
for nid, node in sorted(data['nodes'].items()):
if node is None:
continue
page = node['document']
sets = [c for c in page.get('children', []) if c['type'] == 'COMPONENT_SET']
print(f'=== {page[\"name\"]} (id: {nid}) ===')
for s in sets:
print(f' [SET] {s[\"id\"]} | {s[\"name\"]}')
if not sets:
# No sets at top level — print child types to diagnose
for c in page.get('children', [])[:5]:
print(f' [{c[\"type\"]}] {c[\"id\"]} | {c[\"name\"]}')
"Edge case: pages that use SECTION containers
Some pages nest their component sets inside Figma SECTION nodes rather than placing them directly as page children. When depth=2 returns only SECTION entries and no COMPONENT_SET entries, re-query those section IDs at depth=2 to find the component sets inside them.
The CDS Tray page is a known example — its Tray component set lives inside a section called "Tray component".
---
Step 3 — Exclude internal helper sets
Component sets whose names start with . are private design helpers used internally by other components. They are not public consumer APIs and should be excluded from the output.
Known examples in the CDS file:
- Carousel:
.count,.carouselPagination - Select:
.Input Chip,.Dropdown Menu,.Checkbox,.Tray/Multi Select,.Desktop Input Chips,.CheckboxGroup - Modal:
.Header - SegmentedTabs:
.tabs - TabbedChips:
.Tab Chip - BottomTabBar:
.Tab Bar Icon - Tray:
.ListCells-Mobile,.ListCells-Desktop,.TabbedChipps-Mobile,.TabbedChipps-Desktop,.Drag handle
The rule is simple: if name.startswith('.'), skip it.
---
Step 4 — Format the output URLs
Figma node IDs use : internally (60:512) but URLs use - (node-id=60-512).
Always link to the component node — never the page node.
Every entry must point to the actual component, whether it's a COMPONENT_SET (has variants) or a bare COMPONENT (no variants). Both are valid link targets. The only thing that's wrong is using a CANVAS (page) node ID — that lands on the whole page rather than the component.
| Situation | Use in URL | Name entry |
|---|---|---|
| Page has 1 public component (set or standalone) | That component's node ID | The page name (stripped of ↳ and emoji) |
| Page has 2+ public components | Each component's node ID | The component/set name |
If you're unsure of a node's type, check via the REST API — type will be COMPONENT_SET, COMPONENT, or CANVAS. Skip CANVAS IDs.
URL template:
https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id={component-set-id-with-dashes}---
Output format
Group entries under the section headers from the file (Layout, Actions, Inputs, etc.) using markdown ## headings. Within each section, list components in the order they appear in the file:
## ⚡️ Actions
**Button**: https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=0-1
**ButtonGroup**: https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=52733-3517
**IconButton**: https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/✨-CDS-Components?node-id=57214-1766For multi-set pages, each set gets its own line. If a set name contains emoji decorators (like 🔮 Card carousel), keep them — they convey meaning (e.g., 🔮 = experimental in CDS).
---
Tips
- Batch aggressively: The
/nodesendpoint accepts many IDs at once.
Prefer fewer large requests over many small ones to stay within rate limits.
- Check for WIP pages: Pages prefixed with
🚧are works in progress.
Include them but note the WIP status in the output.
- Section order matters: Preserve the top-to-bottom page order from Step 1
when grouping under section headers — it matches the Figma file's navigation structure, which is what consumers expect.
{
"skill_name": "figma.enumerate-component-urls",
"evals": [
{
"id": 1,
"prompt": "Give me a Figma URL for every CDS Core component in this file: https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=34-179. Output format: [Name]: URL to component set. For pages with multiple component sets use the component set name; for pages with only one use the page name.",
"expected_output": "A grouped markdown list of 70+ CDS components with correct Figma node URLs, organized under section headers (Layout, Actions, Inputs, etc.). Single-set pages use page node IDs; multi-set pages use component set node IDs. Dot-prefixed helper sets are excluded."
},
{
"id": 2,
"prompt": "I'm doing a Code Connect refresh for CDS-2144. Can you enumerate all the Figma component set URLs from https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g so I can audit which components have Code Connect wired up?",
"expected_output": "Complete list of component set URLs from the CDS Figma file, usable for cross-referencing against existing .figma.tsx Code Connect files. Should include all public component sets, grouped by section, with correct node IDs."
},
{
"id": 3,
"prompt": "What's the Figma node URL for the Tray component in the CDS components file (k5CtyJccNQUGMI5bI4lJ2g)?",
"expected_output": "URL pointing to node-id=74148-11495 (the Tray component set inside the 'Tray component' section), with an explanation that it required drilling into a nested SECTION container rather than being a top-level child of the page."
}
]
}