figma-local-dev-loop

name	figma-local-dev-loop
description	Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API with hot reload. Trigger with phrases like "figma dev setup", "figma plugin development", "figma local development", "develop figma plugin".
allowed-tools	Read, Write, Edit, Bash(npm:*), Bash(npx:*), Bash(pnpm:*), Grep
version	1.6.0
license	MIT
author	Jeremy Longshore <[e-mail]>
tags	["saas","figma"]
compatibility	Designed for Claude Code

Figma Local Dev Loop

Overview

Set up fast local development for two workflows: building Figma plugins that run inside the Figma editor, and building external apps that consume the Figma REST API.

Prerequisites

• Node.js 18+ with npm/pnpm
• FIGMA_PAT configured (see figma-install-auth)
• Figma desktop app (for plugin development)

Instructions

Step 1: REST API Project Structure

figma-integration/
├── src/
│   ├── figma-client.ts       # Shared fetch wrapper
│   ├── extract-tokens.ts     # Design token extraction
│   └── export-assets.ts      # Asset export pipeline
├── tests/
│   ├── figma-client.test.ts
│   └── fixtures/             # Saved API responses for offline testing
│       └── sample-file.json
├── .env.local                # FIGMA_PAT, FIGMA_FILE_KEY (git-ignored)
├── .env.example              # Template for team
├── tsconfig.json
└── package.json

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":