Figma Local Dev Loop

Step 2: Figma Plugin Project Structure

my-figma-plugin/
├── manifest.json             # Plugin manifest (required by Figma)
├── code.ts                   # Plugin backend (runs in sandbox)
├── ui.html                   # Plugin UI (runs in iframe)
├── package.json
└── tsconfig.json

manifest.json (required):

{
  "name": "My Plugin",
  "id": "1234567890",
  "api": "1.0.0",
  "main": "dist/code.js",
  "ui": "dist/ui.html",
  "editorType": ["figma"],
  "permissions": ["currentuser"]
}

Step 3: Plugin Development with Watch Mode

{
  "scripts": {
    "build": "esbuild code.ts --bundle --outfile=dist/code.js --target=es2020",
    "watch": "esbuild code.ts --bundle --outfile=dist/code.js --target=es2020 --watch",
    "dev": "concurrently \"npm run watch\" \"npm run watch:ui\"",
    "watch:ui": "esbuild ui.tsx --bundle --outfile=dist/ui.html --loader:.html=copy --watch"
  },
  "devDependencies": {
    "@figma/plugin-typings": "^1.0.0",
    "esbuild": "^0.20.0",
    "typescript": "^5.0.0"
  }
}

Load the plugin in Figma:

1. Figma desktop > Plugins > Development > Import plugin from manifest
2. Select your manifest.json
3. Run with npm run watch -- changes auto-reload

Step 4: REST API Dev Loop with Testing

{
  "scripts": {
    "dev": "tsx watch src/extract-tokens.ts",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

// tests/figma-client.test.ts
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { readFileSync } from 'fs';

// Load a saved API response for offline testing
const sampleFile = JSON.parse(
  readFileSync('tests/fixtures/sample-file.json', 'utf-8')
);

describe('Figma token extraction', () => {
  beforeEach(() => {
    // Mock fetch to return saved fixture
    vi.spyOn(global, 'fetch').mockResolvedValue(
      new Response(JSON.stringify(sampleFile), { status: 200 })
    );
  });

  it('should extract color styles from file', async () => {
    const res = await fetch('https://api.figma.com/v1/files/test-key');
    const file = await res.json();
    const styles = Object.values(file.styles);
    expect(styles.length).toBeGreaterThan(0);
  });
});

Step 5: Save API Fixtures for Offline Dev

# Snapshot a Figma file for offline testing
curl -s -H "X-Figma-Token: ${FIGMA_PAT}" \
  "https://api.figma.com/v1/files/${FIGMA_FILE_KEY}" \
  > tests/fixtures/sample-file.json

# Snapshot specific nodes
curl -s -H "X-Figma-Token: ${FIGMA_PAT}" \
  "https://api.figma.com/v1/files/${FIGMA_FILE_KEY}/nodes?ids=0:1,0:2" \
  > tests/fixtures/sample-nodes.json

Output

• Working dev environment with hot reload
• Test suite with mocked Figma API responses
• Saved fixtures for offline development
• Plugin manifest configured for Figma desktop loading

Error Handling

Examples

Quick Plugin Skeleton

// code.ts -- minimal Figma plugin
figma.showUI(__html__, { width: 300, height: 200 });

figma.ui.onmessage = (msg: { type: string; count: number }) => {
  if (msg.type === 'create-rectangles') {
    for (let i = 0; i < msg.count; i++) {
      const rect = figma.createRectangle();
      rect.x = i * 150;
      rect.fills = [{ type: 'SOLID', color: { r: 1, g: 0.5, b: 0 } }];
      figma.currentPage.appendChild(rect);
    }
    figma.closePlugin();
  }
};

Resources

• Figma Plugin Development Guide
• Plugin API Reference
• @figma/plugin-typings
• Vitest Documentation

Next Steps

See figma-sdk-patterns for production-ready code patterns.