| name | figma-architecture-variants |
| description | Choose between Figma integration architectures: CLI script, webhook service, or plugin.
Use when deciding how to integrate with Figma, comparing REST API vs Plugin API,
or planning a Figma-connected application.
Trigger with phrases like "figma architecture", "figma blueprint",
"how to integrate figma", "figma plugin vs api", "figma project type".
|
| allowed-tools | Read, Grep |
| version | 1.6.0 |
| license | MIT |
| author | Jeremy Longshore <jeremy@intentsolutions.io> |
| tags | ["saas","figma"] |
| compatibility | Designed for Claude Code |
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/ │
└─────────────┘
{
"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
Cons: Not real-time, manual trigger, no webhook support
Variant B: Webhook Service (Event-Driven)
