Figma Plugin Vite Tailwind Starter

This is a preset for creating Figma plugins using React, Tailwind CSS v4, and esbuild. The starter kit is based on the esbuild-react sample provided by Figma.

Tech Stack

• Runtime: Bun
• Framework: React 18
• Styling: Tailwind CSS v4
• Build: Vite + esbuild
• Linting/Formatting: Biome

Getting Started

Prerequisites

• Bun (v1.0 or higher)

Installation

1. Clone this repository
2. Navigate into the project directory: cd figma-plugin-starter
3. Install dependencies: bun install

Usage

Development

To start the development server, run:

bun dev

This command will start the following processes concurrently:

• tsc - TypeScript compiler in watch mode for both the main code and UI code
• build - esbuild bundler for the main code in watch mode
• vite - development server for the UI code with HMR (hot module replacement)

Once the server is up and running, open Figma and navigate to Plugins > Development > Create new plugin. Choose "Link existing plugin" and select the manifest.json file in the project directory.

Building

To build the plugin, run:

bun run build

This command will create a production-ready version of the plugin in the dist directory.

Linting

bun run lint        # Check for issues
bun run lint:fix    # Fix issues automatically

License

This project is licensed under the MIT License. See the LICENSE file for more details.