Create Figma React Plugin

A CLI tool to quickly scaffold Figma plugins using React, Vite, and TypeScript — with optional extras like Prettier, Tailwind CSS and Shadcn UI.

---

🚀 Quick Start

The easiest way to get started is using npx:

npx create-figma-react-plugin my-plugin

📦 Installation

# Using npx (recommended)
npx create-figma-react-plugin my-plugin

# Or install globally
npm install -g create-figma-react-plugin
create-figma-react-plugin my-plugin

---

🚀 Usage

# Create a new plugin project
npx create-figma-react-plugin my-plugin

You’ll be prompted for:

• Plugin name
• Plugin ID (reverse-domain format, e.g. com.example.myplugin)
• Description
• Extras (Prettier, Tailwind CSS, Shadcn UI)

---

This will generate a new Figma plugin project in the my-plugin folder with:

⚡ React + Vite for fast dev experience

🏗️ TypeScript for type safety

🎨 Optional extras like Tailwind CSS and Shadcn UI

---

📂 Generated Project

my-plugin/
├── manifest.json
├── package.json
├── tsconfig.json
├── vite.config.ts
├── src/
│   ├── main.tsx
│   └── ui.tsx

If you select Tailwind CSS (and/or Shadcn UI), config files will be added and vite.config.ts will be extended.

---

🛠 Development

After scaffolding your plugin, run:

cd my-plugin
npm run dev

This will start the Vite dev server. Open the Figma desktop app, go to Plugins > Development > Import Plugin from Manifest... and select your plugin's manifest.json.

---

❓ Troubleshooting & FAQ

• Error: Cannot find module ...
  • Make sure you are using Node.js v18 or newer.
  • Ensure you ran npm install in your plugin directory.
• How do I add more extras later?
  • You can manually install Prettier, Tailwind CSS, or Shadcn UI by following their docs.
• How do I update my plugin?
  • Edit your code and re-run npm run build.
• Where can I get help?
  • GitHub Issues

---

📖 Documentation

• Figma Plugin API
• React
• Vite
• Tailwind CSS
• Prettier
• Shadcn UI

---

✨ Features

• ⚡ React + Vite for blazing fast builds
• 🏗️ TypeScript out of the box
• 🧹 Prettier (optional)
• 🎨 Tailwind CSS v4 (optional)
• 🎨 Shadcn UI (optional)
• 🗂 Reverse-domain plugin ID support
• 🚀 Zero-config setup

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a PR.

---

📜 License

This project is licensed under the MIT License.