Theme Engine

Development guide

This plugin is built with Create Figma Plugin.

Instalation

Clone the repository to local, then

cd theme-engine
npm i

Pre-requisites

• Node.js – v18
• Figma desktop app

Build the plugin

To build the plugin (main) and the React UI with React Compiler:

npm run build

This generates a manifest.json and a build/ directory that contains:

• build/main.js (plugin main, built with @create-figma-plugin/build)
• build/ui/index.html (UI built by Vite + React 19 + React Compiler)

To watch for code changes and rebuild the plugin main automatically:

npm run watch

For iterating on the UI in a browser (outside Figma):

npm run dev

Note: Figma requires a built HTML for the plugin UI; npm run build updates manifest.json to point ui to build/ui/index.html.

To use Tailwind for styling:

npm run tailwind

Add the plugin to Figma

1. In the Figma desktop app, open a Figma document.

2. Search for and run Import plugin from manifest… via the Quick Actions search bar.

   

3. Select the manifest.json file that was generated by the build script.

Debugging

Use console.log statements to inspect values in your code.

To open the developer console, search for and run Open Console via the Quick Actions search bar (Ctrl + / or Cmd + /).

See also

• Create Figma Plugin docs
• yuanqing/figma-plugins
• Figma Kit React components: figma-kit and Storybook: storybook.figma-kit.dev

Official docs and code samples from Figma:

• Plugin API docs
• figma/plugin-samples