Figma is a popular design tool that allows users to create, collaborate, and share designs in real time. One of the key features of Figma is its extensibility through plugins, which enable developers to create custom tools and features to enhance the Figma experience.

In this article, we will walk through the process of building a Figma plugin using Vite and Preact. Vite is a fast and opinionated web build tool that aims to provide a smoother development experience. Preact is a fast 3kB alternative to React, with the same modern API.

Setting up the environment

Before getting started with building the plugin, you will need to have Node.js and npm installed on your machine. Once you have that set up, you can use the following commands to create a new Vite project with Preact:


npx create-vite@latest my-figma-plugin --template preact
cd my-figma-plugin
npm install


Creating the Figma plugin

Once you have the project set up, you can start building your Figma plugin. The Figma Plugin API allows you to interact with the Figma editor and create custom UI components.

To get started, you can use the following commands to install the Figma Plugin API package:


npm install @figma/plugin-typings


Next, you can create a new file for your Figma plugin and start writing the code to interact with the Figma editor and create custom UI components. You can use the documentation provided by the Figma Plugin API to learn about the available methods and components.

Building and testing the plugin

Once you have written the code for your Figma plugin, you can use the following command to build the plugin:


npm run build


This will generate a build of your plugin that you can then upload to Figma and test in the Figma editor.

Conclusion

Building a Figma plugin using Vite and Preact can provide a fast and efficient development experience. With the Figma Plugin API, you can create custom tools and features to enhance the Figma experience for both yourself and other users.