figma-local-dev-loop

# 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): ```json { "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 ```json { "scripts": { "build":...