https://github.com/candidosales/figma-plugin-svelte-vite
A boilerplate for creating Figma plugins with Svelte, Vite and Typescript
https://github.com/candidosales/figma-plugin-svelte-vite
figma figma-plugin svelte svelte4 typescript vite
Last synced: about 1 year ago
JSON representation
A boilerplate for creating Figma plugins with Svelte, Vite and Typescript
- Host: GitHub
- URL: https://github.com/candidosales/figma-plugin-svelte-vite
- Owner: candidosales
- Created: 2022-08-22T05:58:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-23T15:39:32.000Z (almost 3 years ago)
- Last Synced: 2025-03-25T07:41:38.399Z (about 1 year ago)
- Topics: figma, figma-plugin, svelte, svelte4, typescript, vite
- Language: SCSS
- Homepage:
- Size: 611 KB
- Stars: 25
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Figma Plugin + Svelte + Vite + Typescript
A boilerplate for creating Figma plugins using Svelte, Vite and Typescript.
## Connecting your plugin to Figma
Connecting your plugin to Figma
After installing, go to **Plugins / Development / New Plugin** in the Figma desktop app for Mac OS or Windows and choose the option **"Link existing plugin"**.
_You also can just type "New Plugin" in Figma global search to go there_
From there you need to link a **manifest.json** file located at **public** folder in your directory:
```bash
/figma-plugin/manifest.json
```
Now edit this file to give a new name for your plugin, and you will be able call it from Figma: **Plugins / Development / Your Plugin Name**
## Development
During development, watch your project for changes with the following command.
```bash
npm run dev
```
Start building your plugin UI in `'src/App.svelte'`.
## Build
When ready to package up your final Figma Plugin:
```bash
npm run build
```