figma-sdk-patterns

name	figma-sdk-patterns
description	Production-ready patterns for the Figma REST API and Plugin API. Use when building reusable Figma client wrappers, extracting design tokens, traversing node trees, or creating typed API helpers. Trigger with phrases like "figma patterns", "figma best practices", "figma client wrapper", "figma typed API".
allowed-tools	Read, Write, Edit
version	1.6.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","figma"]
compatibility	Designed for Claude Code

Figma SDK Patterns

Overview

Production patterns for the Figma REST API (external tools) and Plugin API (in-editor plugins). Figma has no official Node.js SDK -- you call https://api.figma.com directly with fetch. These patterns give you type safety, error handling, and reusable abstractions.

Prerequisites

• FIGMA_PAT environment variable set
• TypeScript 5+ project
• Understanding of Figma node types

Instructions

Step 1: Typed REST API Client

// src/figma-client.ts
export class FigmaClient {
  private baseUrl = 'https://api.figma.com';

  constructor(private token: string) {
    if (!token) throw new Error('Figma token is required');
  }

  private async request<T>(path: string, init?: RequestInit): Promise<T> {
    const res = await fetch(`${this.baseUrl}${path}`, {
      ...init,
      headers: {
        'X-Figma-Token': this.token,
        'Content-Type': 'application/json',
        ...init?.headers,
      },
    });

    if (res.status === ) {
       retryAfter = (res..() || );
        (retryAfter);
    }
     (res. === )   ();
     (res. === )   (path);
     (!res.)   (res.,  res.());

     res.();
  }

   () {
     .<>();
  }

   () {
     ids = (nodeIds.());
     .<>();
  }

   () {
     params =  ({
      : nodeIds.(),
      : opts?. ?? ,
      : (opts?. ?? ),
    });
     .<>();
  }

   () {
     .<>();
  }

   () {
     .(, {
      : ,
      : .({
        message,
        ...(nodeId && { : { : nodeId } }),
      }),
    });
  }

   () {
     .<>(
      
    );
  }
}