Svelte Themes Logo Svelte Themes
Figma Plugin Svelte Vite screenshot

Figma Plugin Svelte Vite

Author Avatar Theme by Candidosales
Updated: 23 Jun 2023
25 Stars

A boilerplate for creating Figma plugins with Svelte, Vite and Typescript

Github

Categories

Figma Vite Scss

Overview:

This Figma Plugin boilerplate uses Svelte, Vite, and Typescript to create Figma plugins. It allows users to connect their plugin to Figma and provides a manifest.json file for linking the plugin to Figma. The development process involves watching for changes and building the plugin UI in the ‘src/App.svelte’ file. The final plugin can be packaged up when ready.

Features:

  • Figma Plugin: Allows users to create Figma plugins.
  • Svelte: Uses Svelte framework for building the plugin UI.
  • Vite: Utilizes Vite build tool for fast development and efficient bundling.
  • Typescript: Supports Typescript for type-checking and improved code quality.

Installation:

  1. Install the dependencies using the following command:
npm install

  1. After installation, go to Plugins / Development / New Plugin in the Figma desktop app for Mac OS or Windows.

  2. Choose the option “Link existing plugin”.

  3. Type “New Plugin” in the Figma global search to go to the plugin development page.

  4. Link the manifest.json file located at the public folder in your directory.

  5. Edit the manifest.json file to give a new name for your plugin.

  6. Start building your plugin UI in the ‘src/App.svelte’ file.

Summary:

This Figma Plugin boilerplate provides a convenient framework for creating Figma plugins using Svelte, Vite, and Typescript. It simplifies the process of connecting the plugin to Figma and provides a development environment for building the plugin UI. By utilizing powerful tools like Vite and Typescript, developers can create high-quality and efficient Figma plugins.