Build Figma plugins
with Astro
A lightweight starter template for building modern Figma plugins. Component-based UI, single-command launch, and full TypeScript support.
Built with modern tools
Getting Started
Up and running in minutes
Clone the repository
Download the starter template from GitHub
git clone https://github.com/qurle/plugin-starter.gitInstall dependencies
Navigate to the project folder and install packages
cd <path-to-plugin-starter> && npm iStart developing
Run the dev server and start building your plugin
npm run devImport in Figma
Open desktop Figma app › Actions (⌘K) › Plugins & Widgets › Import from manifest
Features
Everything you need to build great plugins
Single-Command Launch
Run npm run dev and start building. Hot reload keeps your plugin updated on every change.
Component-Based UI
Write vanilla HTML-style components with Astro. Or bring React, Vue, and Svelte into the mix.
Notification Helpers
Built-in notification functions to display messages and alerts to users right out of the box.
Graphics Examples
Includes sample graphics and assets to help you design polished plugin interfaces.
Readme Template
Professional readme template ready for your plugin description and documentation.
Room for Customization
Clean project structure with clear separation of concerns. Extend and customize as needed.
Why Astro?
The perfect tool for plugin interfaces
Astro is ideal for building simple web interfaces. It offers the same vanilla flavour you know and love, with the power of components.
Write beginner-friendly HTML-style components, or bring in your favorite framework. Use React, Vue, or Svelte components inside your Astro project.
The result? Lightweight, fast-loading plugin UIs that feel native to Figma.
---
import Button from './Button.astro'
import ReactCounter from './Counter.jsx'
---
<main>
<h1>My Plugin</h1>
<Button />
<ReactCounter client:load />
</main>Start building your next Figma plugin today
Clone the starter, customize it, and ship something amazing.