React Templates & Themes Logo React Templates & Themes
Figma Plugin React Vite screenshot

Figma Plugin React Vite

Author Avatar Theme by Igoodie
Updated: 8 Jan 2025
161 Stars

A figma plugin boilerplate, that simplifies building plugins with React + Vite!

Github

Categories

Figma Vite Scss Templates & themes

Overview

This product is a boilerplate for developing Figma plugins. It is designed to keep logical sides separated while allowing them to share code. The boilerplate includes a solution for efficient communication between logical sides, making use of isolated messages and handlers. It is easy to build and configure with plugin credentials, and it bundles most of the necessary assets and code into a single file. The boilerplate also provides the capability to import SVGs as React components and supports Sass/Scss/Less and modules for styling.

Features

  • Logical Sides in Mind: Figma plugins are split into code.js and index.html, and this boilerplate allows the sides to share code which is stored under “./src/common/”.
  • Intercommunicative: The boilerplate facilitates communication between logical sides by declaring isolated messages and handlers placed under “./src/common/network/messages/”.
  • Easy to Build: Simply configure the “figma.manifest.ts” config with plugin credentials and use the “npm run build” command to build. The resulting “/dist” folder will be ready for publishing.
  • Bundled into One File: The boilerplate is configured to bundle or inline necessary assets and code such as rasterize/vector image asset imports, CSS URL statements, and source code imports, ensuring that multiple linked files are deployable.
  • SVG as Component: SVG files can be imported as React components using the “*.svg?component” format. Examples can be found in “/src/ui/app.tsx”.
  • Sassy: The boilerplate supports Sass/Scss/Less and modules for styling. Templates and examples can be found in “/src/ui/styles/” and “/src/ui/components/Button.module.scss” respectively.

Installation

  1. Clone the repository and navigate to the folder in your terminal.
  2. Install the dependencies by executing the following command:
npm install
  1. Create a new plugin in Figma by right-clicking in a design file and selecting Plugins > Development > New Plugin… (or search for “New Plugin” in the global search using the shortcut Windows: CTRL + P, Mac: ⌘ Command + P).
  2. Follow the steps in the opened window, choosing the Default or Run once layout and saving the generated manifest.json to a temporary location. Click “Open folder” to navigate to the folder generated by the plugin.
  3. Note down the “id” field from the manifest.json.
  4. Go to “figma.manifest.ts” and replace the “id” with the noted down id. Configure the manifest as desired (refer to the Official Figma Plugin Manifest doc for details).

Summary

The Figma plugin boilerplate provides a convenient starting point for developing Figma plugins. It ensures separation and sharing of code between logical sides, simplifies communication between sides, allows for easy building and configuration, bundles necessary assets and code into a single file, enables SVGs to be imported as React components, and supports Sass/Scss/Less and modules for styling. Developers can follow the installation guide to set up their development environment and start coding.