🚀 Modern Figma Plugin Development

Build Better
Figma Plugins

A supercharged boilerplate for building Figma plugins with React, TypeScript, and Tailwind CSS. Start building faster with modern tools.

Get Started View on GitHub

Everything You Need to Build Amazing Plugins

Start with a solid foundation and build your plugin faster than ever before

Modern Stack

Built with React 18, TypeScript, and Tailwind CSS for a modern development experience.

UI Components

Pre-built, customizable components from ShadcnUI for rapid development.

Dark Mode

Built-in dark mode support with easy theme customization.

Get Started in Minutes

Three simple steps to get your plugin up and running

# Clone the repository

git clone https://github.com/tehfailsafe/figma-react-boilerplate.git

# Create a new plugin in Figma

1. Open Figma and go to Menu > Plugins > Development > New Plugin
2. Choose "Create new plugin"
3. Copy the plugin ID and name from the manifest.json file
4. Delete the plugin you just created
5. Go to Menu > Plugins > Development > Import plugin from manifest
6. Select the manifest.json file from this project

// manifest.json { "name": "Your Plugin Name", "id": "1234567890123456789" }

# Install dependencies

npm install

# Start development server

npm run dev

Beautiful Components Included

Everything you need to build a professional plugin interface

UI Components

  • Buttons & Badges
  • Modals & Dialogs
  • Forms & Inputs
  • Navigation Components
  • And many more...

Developer Experience

  • TypeScript Support
  • Hot Module Replacement
  • Webpack Configuration
  • ESLint & Prettier
  • Production Optimization