Using Vite for Figma Plugins (multi-page app: lib + regular entry)

[gossi]

Using Vite to Develop Figma Plugins

I want to use vite to develop figma plugins. Figma plugins run two processes.

1. runtime (sandboxed code running "inside" figma files)
2. UI part of your addon (ui part running in an iframe).

The former can be done using library mode, the latter is for what vite is build for. Figma plugins are to some extend a multi-page app.

The problem: They can't be controlled through one vite process. These two things interfere with each other. The runtime slips into the ui process and vice-versa.

Suggested solution

Rollup allows an array for each bundle; vite is combining them in one (allows only one?). I'd wish for a more dedicated control over such multiple bundles. That would serve the purpose here, yet I think the advantages of this will shine at other/similar use-cases, too.

Alternative

Two separate vite processes, each with its own vite.config.js. That's a current workaround, but running them in parallel through npm-run-all isn't giving the best of feedback while developing.

Additional context

• Sample repo: figma-theemo
• UI Process config
• Runtime Process config
• "scripts" in package.json

[bluwy]

Vite is currently able to build for multiple pages like so. But if you're requesting to do multiple builds at once, I don't think that's planned for Vite as it has been built based on a single output only. Evan made a comment about it too #2039 (comment). Your best bet is with the multi-process setup now.