| name | figma-hello-world |
| description | Make your first Figma REST API call to fetch a file and inspect its node tree.
Use when starting a new Figma integration, testing API connectivity,
or learning the Figma document structure.
Trigger with phrases like "figma hello world", "figma first call",
"figma quick start", "fetch figma file".
|
| allowed-tools | Read, Write, Edit, Bash(curl:*), Bash(node:*), Bash(npx:*) |
| version | 1.6.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","figma"] |
| compatibility | Designed for Claude Code |
Figma Hello World
Overview
Make your first Figma REST API call. Fetch a file's metadata and document tree, then inspect the node structure that represents every layer and object in a Figma design.
Prerequisites
- Completed
figma-install-auth setup
- A Figma file key (from the URL:
figma.com/design/<FILE_KEY>/...)
FIGMA_PAT environment variable set
Instructions
Step 1: Fetch a File
curl -s -H "X-Figma-Token: ${FIGMA_PAT}" \
"https://api.figma.com/v1/files/${FIGMA_FILE_KEY}" | jq '{
name: .name,
lastModified: .lastModified,
version: .version,
pages: [.document.children[] | .name]
}'
Expected output:
{
"name": "My Design File",
"lastModified": "2025-03-15T10:30:00Z",
"version": "1234567890",
"pages": ["Page 1", "Components", "Tokens"]
}
Step 2: Understand the Node Tree
Every Figma file is a tree of typed nodes:
DOCUMENT (root)
├── CANVAS (page)
│ ├── FRAME (container / auto-layout)
│ │ ├── TEXT
│ │ ├── RECTANGLE
│ │ └── INSTANCE (component instance)
│ ├── GROUP
│ │ └── VECTOR
│ ├── COMPONENT (reusable master)
│ └── SECTION
Key node types: DOCUMENT, CANVAS, FRAME, , , , , , , , , , , .
