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 month 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 (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-06-23T15:39:32.000Z (over 1 year ago)
• Last Synced: 2024-10-10T23:15:33.154Z (3 months ago)
• Topics: figma, figma-plugin, svelte, svelte4, typescript, vite
• Language: SCSS
• Homepage:
• Size: 611 KB
• Stars: 23
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Figma Plugin + Svelte + Vite + Typescript

![image](./assets/cover-github.png)

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

```