React Figma Plugin Starter

Modern starter template for Figma plugins with React, Vite, and TailwindCSS.

Quick Start

npm install
npm run reset    # Optional: configure plugin name & ID
npm run watch    # Start development

Import to Figma: Plugins → Development → Import plugin from manifest → Select manifest.json

Project Structure

• src/ - React UI components
• figma/code.js - Figma plugin backend
• dist/ - Built files (auto-generated)

Commands

• npm run watch - Development with auto-rebuild
• npm run build - Production build
• npm run reset - Setup wizard (generates plugin ID, sets name)

Tech Stack

• React 18 + Vite
• TailwindCSS v4
• ESLint + Prettier

Plugin Communication

// figma/code.js
figma.ui.onmessage = (msg) => {
    if (msg.type === 'action') {
        // Your Figma API logic
    }
}

// React component
parent.postMessage({ pluginMessage: { type: 'action' } }, '*')

License

MIT - Created by Antonija Pek