Linking a local CSS file for the plugin UI in HTML

Question

I want to use this UI library which was introduced in Figma’s official tutorial for plugin development.

I installed this library with NPM.
But I can’t link the CSS file.

Here’s my html code.

<link rel="stylesheet" href="node_modules/figma-plugin-ds/dist/figma-plugin-ds.css">

The path for the href is not wrong, because VS Code can follow the link.
I tried to put the link tag in head tag, but it didn’t work.

Plus, if I use CDN for the CSS like this, it works.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/thomas-lowry/figma-plugin-ds/dist/figma-plugin-ds.css"
/>

But I don’t want to use this, because of the delay of style adjustment. It makes the UI blink.

What am I doing wrong? I want to link this CSS file in my local!
Thank you.

tank666 · Answer

@hoodie0512,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.

Linking a local CSS file for the plugin UI in HTML

1 reply

Cookie policy

Cookie settings

Related topics

Linking CSS to UI.HTMLicon

Why is my PNG image not working inside plugin?icon

How can we use external style library like and figmaicon

How can I use stylesheet and library from NPMicon

Creating UI for Figma Pluginicon

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