# 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](https://github.com/figma/plugin-samples/tree/master/esbuild-react) sample provided by Figma.
## Tech Stack
- **Runtime**: [Bun](https://bun.sh/)
- **Framework**: React 18
- **Styling**: Tailwind CSS v4
- **Build**: Vite + esbuild
- **Linting/Formatting**: Biome
## Getting Started
### Prerequisites
- [Bun](https://bun.sh/) (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:
```bash
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:
```bash
bun run build
```
This command will create a production-ready version of the plugin in the `dist` directory.
#### Linting
```bash
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](./LICENSE) file for more details.
