figma-performance-tuning

# Figma Performance Tuning ## Overview Optimize Figma REST API performance. Large Figma files can return multi-megabyte JSON responses. Key strategies: fetch only what you need, cache aggressively, and batch requests. ## Prerequisites - Working Figma API integration - Understanding of your access patterns (which endpoints, how often) ## Instructions ### Step 1: Reduce Payload Size ```typescript // BAD: fetches the entire file tree (can be 10+ MB for large files) const file = await fetch(`https://api.figma.com/v1/files/${fileKey}`, { headers: { 'X-Figma-Token': token }, }).then(r => r.json()); // GOOD: use depth parameter to limit tree depth // depth=1 returns only pages (CANVAS nodes), not their children const fileMeta = await fetch( `https://api.figma.com/v1/files/${fileKey}?depth=1`, { headers: { 'X-Figma-Token': token } } ).then(r => r.json()); // GOOD: fetch only specific nodes you need const nodes = await fetch( `https://api.figma.com/v1/files/${fileKey}/nodes?ids=${nodeIds.join(',')}`, { headers: { 'X-Figma-Token': token } } ).then(r => r.json()); // GOOD: use plugin_data or branch_data params only when needed // By default, plugin data and branch data are NOT returned ``` ### Step 2: Response Caching ```typescript import { LRUCache } from 'lru-cache'; // File metadata changes rarely -- cache for 5 minutes const fileCache = new LRUCache<string, any>({ max: 100, ttl: 5 * 60 * 1000, // 5 minutes }); async function getCachedFile(fileKey: string, tok...