figma-hello-world

# 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 ```bash # Get the full document JSON for 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: ```json { "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`, `GROUP`, `RECTANGLE`, `ELLIPSE`, `TEXT`, `VECTOR`, `COMPONENT`, `COMPONENT_SET`, `INSTANCE`, `LINE`, `SECTION`, `BOOLEAN_OPERATION`. ### Step 3: TypeScript Hello World ```typescript // hello-figma.ts const PAT = process.env.FIGMA_PAT!; const FILE_KEY = proc...