Local CSS stylesheet not loading in Figma plugin HTML interface

Other Questions Figma
1

I’m working on a Figma plugin and trying to use a UI component library that was recommended in the official documentation. I installed the package using npm but I’m having trouble getting the local CSS file to load properly.

My current HTML setup:

<link rel="stylesheet" href="node_modules/ui-component-lib/dist/styles.css">

The file path seems correct since my code editor can navigate to it without issues. I’ve tried placing the link element both inside and outside the head section.

What’s strange is that the CDN version works fine:

<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/ui-component-lib/dist/styles.css"
/>

However, I want to avoid the CDN approach because it causes a flash of unstyled content while the external stylesheet loads.

Additional context:
Figma renders plugin UIs inside an iframe with this structure:

<iframe>
  <html>
    <head>
      <script></script>
      <style></style>  <!-- Auto-generated by Figma -->
      <link>           <!-- My custom link goes here -->
    </head>
    <body>
      <!-- Plugin interface content -->
    </body>
  </html>
</iframe>

Things I’ve already attempted:

  • Moving the link tag to different positions in the HTML
  • Testing with other CSS files outside the node_modules directory

Any ideas what might be causing this issue with local file references?

2

The issue you’re encountering is related to how Figma’s plugin iframe handles local file paths. When Figma renders your plugin HTML, it operates within a sandboxed environment that doesn’t have direct access to your local file system or node_modules directory. I ran into this exact problem last year when building a design system plugin. The solution is to inline your CSS directly into the HTML file or use Figma’s plugin bundling approach. You can either copy the contents of your CSS file into a tag within your HTML, or set up a build process that bundles your CSS. For bundling, I used webpack to process my plugin files and include the CSS as part of the build output. This eliminates the external file dependency while still keeping your development workflow clean. The bundled approach also resolves the flash of unstyled content issue you mentioned with the CDN version. Figma’s plugin documentation mentions this limitation briefly in their security model section, though it’s easy to miss.