{"id":22557,"library":"vite-figma-plugin","title":"Vite Figma Plugin","description":"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).","status":"active","version":"0.0.24","language":"javascript","source_language":"en","source_url":"https://github.com/hyperbrew/bolt-figma","tags":["javascript"],"install":[{"cmd":"npm install vite-figma-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vite-figma-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-figma-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Requires Vite as the build tool (peer dependency).","package":"vite","optional":false},{"reason":"Provides TypeScript types for Figma's plugin API.","package":"figma-plugin-typings","optional":true}],"imports":[{"note":"ESM-only package; no CommonJS support.","wrong":"const viteFigmaPlugin = require('vite-figma-plugin')","symbol":"default","correct":"import viteFigmaPlugin from 'vite-figma-plugin'"},{"note":"Correct import path is top-level; types are exported.","wrong":"import { PluginOptions } from 'vite-figma-plugin/dist/types'","symbol":"PluginOptions","correct":"import { PluginOptions } from 'vite-figma-plugin'"},{"note":"The plugin does not re-export Figma API types; must install figma-plugin-typings separately.","wrong":"import { figma } from 'vite-figma-plugin'","symbol":"figma","correct":"import { figma } from 'figma-plugin-typings'"}],"quickstart":{"code":"import viteFigmaPlugin from 'vite-figma-plugin';\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [\n    viteFigmaPlugin({\n      input: 'src/main.ts',\n      environment: 'production' // optional, defaults to 'development'\n    })\n  ]\n});","lang":"typescript","description":"Basic Vite config using vite-figma-plugin to build a Figma plugin panel."},"warnings":[{"fix":"Use Figma's API (figma.*) for UI operations.","message":"Figma plugins run inside an iframe with no DOM access. Do not use browser APIs (like document, window) directly.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Check CHANGELOG for correct option names; use 'mode: 'production'' instead if available.","message":"The option 'environment' may be deprecated in future versions; prefer 'mode' or 'outputDir'.","severity":"deprecated","affected_versions":">=0.0.20"},{"fix":"Update your manifest.json to point to 'public' or explicitly set outputDir option.","message":"Version 0.0.23 changed the default output directory from 'dist' to 'public'. Existing builds will break.","severity":"breaking","affected_versions":">=0.0.23"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run: npm install vite-figma-plugin --save-dev","cause":"Package not installed or not installed in the correct project.","error":"Error: Cannot find module 'vite-figma-plugin'"},{"fix":"Ensure you are using figma.ui.onmessage only inside the UI HTML file, not in the plugin main code (main.ts).","cause":"Using Figma plugin API incorrectly inside the main thread (not the UI iframe).","error":"TypeError: figma.ui.onmessage is not a function"},{"fix":"Use the plugin's built-in handling for .figma files or configure a custom loader.","cause":"Trying to import .figma files without proper Vite configuration.","error":"Vite error: No loader configured for '.figma' files"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}