Figma Plugin made with Svelte

This is an example repository for a tutorial: Creating a Figma Plugin with Svelte

It shows you how to use Svelte, TypeScript, and Rollup to build a plugin for Figma. The plugin fetches a random image from Unsplash and adds it to the canvas of the project.

You can also see a real world example of this stack at figma-theme-ui.

Usage as Template

If you want to use this example as a template for your own project, you can remove src/Input.svelte and manifest.json. Clear the contents of src/App.svelte and src/code.ts.

Go to a Figma project and right-click on the canvas to get the context menu. Go to Plugins => Development => New Plugin... . Then choose either the Design + Figjam or Design category. Then give it a name and choose the Empty preset. Save the manifest.json in the directory of this template. Change the main entry to dist/code.js and the ui entry to dist/ui.html.

Then, you can start the development server with:

yarn dev

Under the same context menu you now can run the example plugin.

Please see Figma Plugin DS Svelte for usage instructions on the components and CSS styles.

Top categories

svelte logo

Want a Svelte site built?

Hire a Svelte developer
Loading Svelte Themes