Vite Figma Plugin

0.0.24 verified Mon Apr 27 auth: no javascript

A Vite plugin for building Figma plugin panels with hot-reload. Current stable version is 0.0.24, released on an ad-hoc cadence. Differentiators: integrates seamlessly with Vite's dev server for fast HMR, supports React, Vue, Svelte, and vanilla JS, and handles Figma's unique sandbox requirements (no DOM APIs, limited Node APIs).

Common errors

error Error: Cannot find module 'vite-figma-plugin' ↓

cause Package not installed or not installed in the correct project.

fix

Run: npm install vite-figma-plugin --save-dev

error TypeError: figma.ui.onmessage is not a function ↓

cause Using Figma plugin API incorrectly inside the main thread (not the UI iframe).

fix

Ensure you are using figma.ui.onmessage only inside the UI HTML file, not in the plugin main code (main.ts).

error Vite error: No loader configured for '.figma' files ↓

cause Trying to import .figma files without proper Vite configuration.

fix

Use the plugin's built-in handling for .figma files or configure a custom loader.

Warnings

gotcha Figma plugins run inside an iframe with no DOM access. Do not use browser APIs (like document, window) directly. ↓

fix Use Figma's API (figma.*) for UI operations.

deprecated The option 'environment' may be deprecated in future versions; prefer 'mode' or 'outputDir'. ↓

fix Check CHANGELOG for correct option names; use 'mode: 'production'' instead if available.

breaking Version 0.0.23 changed the default output directory from 'dist' to 'public'. Existing builds will break. ↓

fix Update your manifest.json to point to 'public' or explicitly set outputDir option.

Install

npm install vite-figma-plugin

yarn add vite-figma-plugin

pnpm add vite-figma-plugin

Imports

default

wrong

const viteFigmaPlugin = require('vite-figma-plugin')

correct

import viteFigmaPlugin from 'vite-figma-plugin'

ESM-only package; no CommonJS support.

PluginOptions

wrong

import { PluginOptions } from 'vite-figma-plugin/dist/types'

correct

import { PluginOptions } from 'vite-figma-plugin'

Correct import path is top-level; types are exported.

figma
wrong
```
import { figma } from 'vite-figma-plugin'
```
correct
```
import { figma } from 'figma-plugin-typings'
```
The plugin does not re-export Figma API types; must install figma-plugin-typings separately.

Quickstart

Basic Vite config using vite-figma-plugin to build a Figma plugin panel.

import viteFigmaPlugin from 'vite-figma-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    viteFigmaPlugin({
      input: 'src/main.ts',
      environment: 'production' // optional, defaults to 'development'
    })
  ]
});