figma-multi-env-setup

name	figma-multi-env-setup
description	Configure Figma API access across dev, staging, and production environments. Use when setting up per-environment tokens, managing multiple Figma files, or isolating development from production Figma resources. Trigger with phrases like "figma environments", "figma staging", "figma dev prod", "figma environment config".
allowed-tools	Read, Write, Edit, Bash(gcloud:*), Bash(vault:*)
version	1.6.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","figma"]
compatibility	Designed for Claude Code

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

// 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>> = {
    : {
      : process..!,
      : process..!,
      : ,
      : ,
    },
    : {
      : process..!,
      : process..!,
      : ,
      : ,
    },
    : {
      : process..!,
      : process..!,
      : ,
      : ,
      : process..,
    },
  };

   config = configs[env];
   (!config?.)   ();
   (!config?.)   ();

   config  ;
}