figma-core-workflow-a

# Figma Core Workflow A -- Design Token Extraction ## Overview The primary workflow for Figma API integrations: extracting design tokens (colors, typography, spacing) from a Figma file and converting them to CSS custom properties, JSON tokens, or Tailwind config. ## Prerequisites - Completed `figma-install-auth` setup - A Figma file with published styles or variables - `FIGMA_PAT` and `FIGMA_FILE_KEY` env vars set ## Instructions ### Step 1: Fetch Styles from a File ```typescript import { FigmaClient } from './figma-client'; const client = new FigmaClient(process.env.FIGMA_PAT!); const fileKey = process.env.FIGMA_FILE_KEY!; // GET /v1/files/:key -- returns styles map in response const file = await client.getFile(fileKey); // file.styles is a map: nodeId -> { key, name, style_type, description } // style_type: "FILL" | "TEXT" | "EFFECT" | "GRID" const colorStyles = Object.entries(file.styles) .filter(([, s]) => s.style_type === 'FILL') .map(([nodeId, s]) => ({ nodeId, name: s.name })); const textStyles = Object.entries(file.styles) .filter(([, s]) => s.style_type === 'TEXT') .map(([nodeId, s]) => ({ nodeId, name: s.name })); console.log(`Found ${colorStyles.length} color styles, ${textStyles.length} text styles`); ``` ### Step 2: Resolve Style Values from Nodes ```typescript // Fetch the actual nodes to get fill colors and text properties const styleNodeIds = colorStyles.map(s => s.nodeId); const nodesResponse = await client.getFileNodes(fileKey, styleNodeIds...