figma-architecture-variants

# Figma Architecture Variants ## Overview Three proven architecture patterns for Figma integrations, based on the two primary Figma APIs: the REST API (external tools) and the Plugin API (in-editor experiences). ## Prerequisites - Clear use case requirements - Understanding of Figma REST API vs Plugin API differences ## Instructions ### Step 1: Choose Your Architecture | Architecture | API Used | Best For | Hosting | |-------------|----------|----------|---------| | CLI/Script | REST API | Design token sync, asset export | None (runs locally or in CI) | | Webhook Service | REST API | Real-time automation, Slack bots | Server/serverless | | Figma Plugin | Plugin API | In-editor tools, design linting | Runs in Figma desktop app | ### Variant A: CLI Script (Simplest) **Use case:** Extract design tokens, export icons, sync to code ``` Developer runs script │ ▼ ┌─────────────┐ │ CLI Script │ (Node.js) │ - extract.ts │ └──────┬───────┘ │ GET /v1/files/:key │ GET /v1/images/:key ▼ ┌─────────────┐ │ Figma REST │ │ API │ └──────┬──────┘ │ ▼ ┌─────────────┐ │ Output │ │ - tokens.css│ │ - icons/ │ └─────────────┘ ``` ```json { "scripts": { "figma:tokens": "tsx scripts/extract-tokens.ts", "figma:icons": "tsx scripts/export-icons.ts", "figma:sync": "npm run figma:tokens && npm run figma:icons" } } ``` **Pros:** Zero infrastructure, runs in CI, easy to debug ...