Creating UI for Figma Plugin

[Elijah_Azarov]

Hi,
I’m trying to make an UI for my friend’s figma plugin, but I can’t understand certain things.
Is ui.html the only html file I can use in plugin?
How do I use custom fonts and import images into the html?
Can I somehow make a separate css file and link it to ui.html?

[tank666]

@Elijah_Azarov

Is ui.html the only html file I can use in plugin?

No, you can have a map of html files and then call the desired html. Read more here: __uiFiles__.

@Elijah_Azarov

How do I use custom fonts and import images into the html?

@tank666

you can include any font available at the URL using the <link> tag in HTML or @import/@font-face in CSS.

Figma plugin UI font family

Your font must be on the Internet and be available via a link. So use Google Fonts or some other service, or upload the font to your site and link directly to the font in your CSS.

@tank666

Images, fonts, scripts and other resources can only be connected by URL.

Or encode your image in Data URL and embed it in the code.

@Elijah_Azarov

Can I somehow make a separate css file and link it to ui.html?

@Gleb

• Write CSS and JS inside of the HTML file so you don’t have to load them from other files.
• Host and load CSS and JS from the web. Not every hosting would work due to CORS and the plugin having origin set to null. This isn’t a very common way I think.
• Use a bundler to inline all files you want into HTML. This is good for larger plugins where writing CSS and JS directly inside of the HTML file would be difficult. You can use Rollup, Webpack, esbuild and anything else you like.