Creating UI for Figma Plugin

Question

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 · Answer

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?Custom fontsyou 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 Questions        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.  Images in plugin interfaceImages, 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?Linking CSS to UI.HTMLWrite 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.

Creating UI for Figma Plugin

1 reply

Reply

Solved topics

All 'Collections' are not published

How to downgrade seats without paying more?

List view missing from new File Browser update?

Color updates in library not reflected in components

Why you cancel the list view ？

Cookie policy

Cookie settings

Reply

Solved topics

All 'Collections' are not published

How to downgrade seats without paying more?

List view missing from new File Browser update?

Color updates in library not reflected in components

Why you cancel the list view ？

Related topics

Show different *.html filesicon

Figma Plugin UI Update Delay Issueicon

Inconsistent plugin behavior in figma app and browsericon

Write to file via web interface?icon

Trigger opening text-style-creator modal from plugin's UIicon

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded

Cookie policy

Cookie settings