Agent skill · software engineering · jeremylongshore
figma-reference-architecture
Reference architecture for production Figma API integrations.
Why this skill is useful
Adds executable scripts for Figma API integration that automate design token extraction, asset exporting, and webhook management.
What it needs
Requires typescript installed locally. Requires figma account access. About 4k tokens when loaded. Last updated 2026-08-07. 2,604 stars on the source repository.
What this skill does
Figma Reference Architecture Overview Production-ready architecture for Figma REST API integrations. Covers the three most common use cases: design token pipelines, asset export systems, and webhook-driven automation. Prerequisites Understanding of Figma REST API endpoints TypeScript project setup Decision on deployment platform Instructions Step 1: Project Structure Step 2: Data Flow Architecture Step 3: Key Components Figma Client (see figma-sdk-patterns): Token Extraction Pipeline (see figma-core-workflow-a): Asset Export Pipeline (see figma-core-workflow-b): Webhook Handler (see figma-webhooks-events): Step 4: Configuration Output Structured project layout with clear separation Data flow from Figma API to local artifacts Reusable client, cache, and pipeline components Configuration management for all environments Error Handling Layer Error Recovery ------- ------- ---------- Client 429 Rate Limited Retry with Retry-After header Client 403 Forbidden Alert on token expiry; fail gracefully Cache Cache miss storm Stale-while-revalidate pattern Webhook Duplicate events Idempotency via event timestamp Export Image render null Skip node, log warning Examples Scaffold the Step 1 project structure and trace one request through the layers (Step 2 data flow): A LIBRARYPUBLISH webhook arriving becomes, in order: Component contracts and the config schema: references/key-components.md, references/configuration.md. Resources Figma REST API Figma REST API OpenAPI Spec Figma Webhooks V2 Next Steps For multi-environment setup, see figma-multi-env-setup.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills jeremylongshore/figma-reference-architecture