This project template helps you get started developing a Figma plugin using Svelte and TypeScript with Vite (and Tailwind CSS).

• Build the UI using Svelte (obviously)
• Complete type safety for messages between UI and logic (see types.d.ts)
• Use Tailwind CSS for styling
• Quick UI prototyping thanks to Vite's hot module reloading

For optimal experience make sure you have the svelte extension Svelte.

• public/manifest.json: That's the plugin manifest file. You should change the name there, rest can be left as is.

• src/: Contains the source code for the project.

  • lib/: Contains the files you might want to reuse across the plugin ui and logic.

    • index.ts: Contains an example of a function that can be used in both the UI and logic.

  • plugin_logic/: Contains the logic for the Figma plugin. Thats where you can interact with the figma API.

  • plugin_ui/: Contains the UI components for the Figma plugin.

    • Plugin.svelte: UI entrypoint component for the Figma plugin.
    • You can create more components here.

  • app.css Global CSS for the application.

  • types.d.ts: TypeScript declaration file.

    • It contains definitions for the messages you can send between the plugin UI and logic.

Other files are for configuration - you shouldn't need to touch them.

I personally recommend using Bun, bun you can also just use (p)npm. ¹

bun install

According to the docs each plugin needs to have a unique id in the manifest.json.

You can add one by running:

bun run gen:uuid

This will generate a random UUID and add it to the manifest.json.

If you want to first prototype only the UI, you can run the following command:

bun dev

Now you can open the browser at https://localhost:5173 to see the UI. I recommend using responsive mode to simulate the plugins window size.

After you run

bun run build

you'll get a dist/ folder, that contains the compiled plugin code.

Now in Figma desktop, you can add your plugin by going to Plugins -> Development -> Import plugin from manifest... and selecting the dist/manifest.json file.

Of course, it would be nice if the plugin could reload automatically when you save changes. You can achieve that by opening two terminals and running:

bun dev:ui

This watches for changes in the UI code and rebuilds it.

bun dev:plugin

This watches for changes in the plugin logic code and rebuilds it.