figma-multi-env-setup

# Figma Multi-Environment Setup ## Overview Configure separate Figma API credentials and file targets per environment. Use different PATs with minimal scopes, point to different Figma files, and prevent accidental production operations from dev. ## Prerequisites - Separate Figma PATs for each environment - Secret management solution - Environment detection in application ## Instructions ### Step 1: Environment Strategy | Environment | PAT Scopes | Figma File | Cache TTL | |-------------|-----------|------------|-----------| | Development | `file_content:read` | Copy of design file | 10s (fast iteration) | | Staging | `file_content:read`, `file_comments:read` | Staging branch/file | 60s | | Production | `file_content:read`, `webhooks:write` | Production design file | 300s | ### Step 2: Configuration by Environment ```typescript // src/config/figma.ts interface FigmaEnvConfig { token: string; fileKey: string; cacheTTL: number; webhookPasscode?: string; maxConcurrency: number; } function getFigmaConfig(): FigmaEnvConfig { const env = process.env.NODE_ENV || 'development'; const configs: Record<string, Partial<FigmaEnvConfig>> = { development: { token: process.env.FIGMA_PAT_DEV!, fileKey: process.env.FIGMA_FILE_KEY_DEV!, cacheTTL: 10_000, maxConcurrency: 1, }, staging: { token: process.env.FIGMA_PAT_STAGING!, fileKey: process.env.FIGMA_FILE_KEY_STAGING!, cacheTTL: 60_000, maxConcurrency: 3, }, ...