bolt-figma

A lightning-fast boilerplate for building Figma Plugins in Svelte, React, or Vue built on Vite + TypeScript + Sass .

Features

• Lightning Fast Hot Reloading on changes
• Setup with TypeScript Definitions for Figma in Frontend, Backend, and Manifest
• Optimized Build Size
• Easy Smart Bundling in Frontend UI and Backend Code contexts
• Spin a up a new project in Svelte, React, or Vue
• Select apps including Figma (Design Mode), Figma (Dev Mode), or FigJam
• Easily configure in figma.config.ts
• Easy Package to Zip archive with sidecar assets
• GitHub Actions ready-to-go for Zip Releases

Target Audience

Bolt Figma is designed for developers building Figma plugins, with support for Svelte, React, and Vue frameworks. It is suitable for both free and commercial projects under the MIT license.

Messaging Between Frontend and Backend

Bolt Figma simplifies type-safe messaging between the frontend UI and backend code using listenTS() and dispatchTS() methods. This ensures scoped event listeners, automatic cleanup, and end-to-end type safety.

Usage

• Write frontend UI code in src/main.svelte (or corresponding framework file)
• Write backend Figma code in src-code/code.ts
• Use built-in Vite environment variables to determine development or production mode
• All assets must be inlined since Figma requires frontend code to be wrapped in a single HTML file

Support

Free support is available through the Discord Community . Paid consulting and development services are also available through the Hyper Brew team.