create-figma-plugin-by-vibe-coding

Create a new Figma plugin project with the Vibe Coding boilerplate.

Usage

# Using npm
npm create figma-plugin-by-vibe-coding my-plugin

# Using yarn
yarn create figma-plugin-by-vibe-coding my-plugin

# Using pnpm
pnpm create figma-plugin-by-vibe-coding my-plugin

What's Included

The generated project includes:

• TypeScript - Type-safe development
• React - Modern UI framework
• Vite - Fast build tool with HMR
• shadcn/ui - Beautiful and accessible UI components
• Tailwind CSS - Utility-first CSS framework
• Biome - Fast linting and formatting
• Figma Plugin API - Type-safe Figma integration
• AI Development Rules - Optimized for Cursor/AI development

Project Structure

my-plugin/
├── src/
│   ├── plugin/          # Main thread (Figma API)
│   │   └── main.ts
│   ├── ui/              # UI thread (React)
│   │   ├── components/
│   │   ├── hooks/
│   │   └── main.tsx
│   └── common/          # Shared types and constants
│       ├── types.ts
│       ├── messages.ts
│       └── constants.ts
├── figma.manifest.ts    # Plugin manifest
└── dist/               # Built plugin files

Getting Started

After creating your project:

1. Navigate to your project:

   cd my-plugin

2. Start development:

   npm run dev

3. Load in Figma:

   • Open Figma
   • Go to Plugins → Development → Import plugin from manifest
   • Select the manifest.json file from the dist/ folder

Development Commands

• npm run dev - Start development with hot reload
• npm run build - Build for production
• npm run dev:ui-only - UI development in browser (faster iteration)
• npm run lint - Check code quality
• npm run format - Format code

Features

Dual-Process Architecture

Figma plugins run in two separate processes:

• Main Thread: Sandboxed environment with Figma API access
• UI Thread: Standard browser environment for React

Communication between threads is handled via type-safe message contracts.

AI-Optimized Development

The boilerplate includes AI development rules that help LLMs:

• Follow Figma plugin best practices
• Handle async operations correctly
• Maintain type safety
• Clean up demo code appropriately

Modern Tooling

• Vite for fast builds and HMR
• TypeScript for type safety
• Biome for consistent code style
• shadcn/ui for beautiful components
• Tailwind for utility-first styling

Documentation

• Figma Plugin API
• React Documentation
• shadcn/ui Components
• TypeScript Handbook

Support

• GitHub Issues
• Main Repository

License

MIT