I want to use this UI library which was introduced in Figma’s official tutorial for plugin development.
https://github.com/thomas-lowry/figma-plugin-ds
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.
For your information,
Figma plugin renders my html file in an iframe.
Here's the rendered structure
(other tags for whole figma UI)
<iframe ...>
<html>
<head>
<script></script>
<style></style> <= Figma generates this part automatically
<link ...></link> <= where my custom link tag be
</head>
<body>
(my plugin UI is here)
What I have tried:
I tried to put the link tag in and out of head tag.
I tried to link another CSS file outside the node_modules folder.
I had the same problem and was not able to get it working with the npm install. But maybe this way will be helpful if you're following the figma plugin tutorial video.
Step 1: Add this line to the top of your ui.html file:
Step 2: Add this under "ui": "ui.html" in your manifest.json file:
screenshot here