Show UI in Codegen plugin

Plugin and Widget API Questions
1

I am trying to do the following in a codegen plugin:

figma.showUI(__html__);

results in the following error:

ror: in showUI: Cannot show UI
    at Object.showUI (eval at <anonymous> (eval at createScopedEvaluatorFactory (460842f4-a09d-4d21-ae36-edecdf12b062:1:6906)), <anonymous>:23:21)
    at eval (VM5303 PLUGIN_10_SOURCE:212:7)
    at eval (VM5303 PLUGIN_10_SOURCE:294:3)
    at Proxy.eval (VM5303 PLUGIN_10_SOURCE:296:12)
    at Object.eval (eval at createScopedEvaluatorFactory (460842f4-a09d-4d21-ae36-edecdf12b062:1:6906), <anonymous>:8:16)
    at 460842f4-a09d-4d21-ae36-edecdf12b062:9:1235
    at 460842f4-a09d-4d21-ae36-edecdf12b062:9:1908
    at realmEvaluate (460842f4-a09d-4d21-ae36-edecdf12b062:9:10651)
    at eval (eval at createCallAndWrapError (460842f4-a09d-4d21-ae36-edecdf12b062:1:1794), <anonymous>:1:615)
    at Realm.evaluate (460842f4-a09d-4d21-ae36-edecdf12b062:1:1291)
(

I tried many different variations of this, and ui.html is referenced in the manifest.json file. I could get the UI to show in a traditional ‘Figma’ plugin. Is showing UI not a possibility in codegen plugins?

2

Codegen plugins can only call visible UI for settings. Otherwise, specify the “inspect” capability in the manifest, so that it opens in the Plugins panel, or:

3

Thanks. What I want is to create a visible button to tie an action to in the same codegen plugin. The link you provided shows the UI needs to be hidden, and I believe you’re saying the codegen plugin can only inspect UI, and we can’t create custom UI. Is that correct?

4

From your description, I don’t quite understand what this button is supposed to do. Codegen plugins are designed to generate code snippets that are displayed in the Inspect panel. That is, they should not have a custom user interface, but only display the code in the appropriate place for this.

If you need some button on this panel, you can use the relaunch buttons. If you need an interface specifically for a codegen plugin—add settings (codegenPreferences). If you want the plugin to start immediately with the interface—specify “inspect” in the manifest.capabilities property.

https://www.figma.com/plugin-docs/api/CodegenPreferencesEvent

5

Thanks for sharing these resources. codegenPreferences might achieve what I want. It’s not the only use case, but exporting the generated code to a file/s would be one use case. It appears file system write access is limited though?

6

Could you clarify which API you want to use? Are you trying to do this from ui.html?

7

I was trying with node’s fs module using writeFileSync or a similar api. I was attempting to do this from a preferenceschange event. E.g.:

figma.codegen.on('preferenceschange', async (event) => {
  fs.writeFileSync(`file.html`, generatedCode);
});

I am struggling to build webpack or ts correctly to import the node fs module though. Even though Figma’s plugin environment is a node environment, it doesn’t appear to provide access to all the standard global node objects.

8

Import modules into script in ui.html.

9

I thought we couldn’t use ui.html though with a codegen plugin. That was the question at the start of this thread.

10

And as I already answered you, call an invisible UI.

11

In addition, as I also wrote earlier, since you are using the event from the provided code snippet above, you can call the visible UI.

You need access to the Browser API—call the visible/invisible ui.html.

In general, I have already written all possible methods in this thread.