Skip to content

README.md

Latest commit

 

History

History
62 lines (39 loc) · 1.59 KB

README.md

File metadata and controls

62 lines (39 loc) · 1.59 KB

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.