figma-svelte-plugin-boilerplate Svelte Themes

Figma Svelte Plugin Boilerplate

A boilerplate project to kickstart building Figma plugins using Svelte.

figma-svelte-plugin-boilerplate

A boilerplate project to kickstart building Figma plugins using Svelte.

image

Getting Started

  1. Clone the repository:
    git clone
     cd figma-svelte-plugin-boilerplate
    
  2. Install dependencies:
    pnpm install
    
  3. Run the development server:
    pnpm dev
    
  4. Open Figma and load the plugin:
    • Go to Plugins > Development > New Plugin...
    • Select the manifest.json file in the root of the project.
  5. Open the plugin in Figma:
    • Go to Plugins > Development > Your Plugin Name
    • The plugin will open in a new window.
  6. Make changes to the Svelte components in the src directory.
  7. The development server will automatically rebuild the plugin when you save changes.
  8. To build the plugin for production, run:
    pnpm build
    

Project Structure

  • src/: Contains the Svelte components and styles.

  • public/: Contains the static assets and the manifest.json file.

  • UI.svelte: The main Svelte component that serves as the entry point for the plugin UI.

  • code.ts: The main TypeScript file that handles the plugin's entry point and communication with Figma.

Top categories

Loading Svelte Themes