How do I import CSS to my UI.HTML file? I’ve been trying forever but unfortunately with no luck.
ui.css is linked in my project folder, not under any folders.
Here’s what I currently have in my ui.html file:
<link rel="stylesheet" href="ui.css">
Any help is appreciated. Thank you so much!! <3
When I try the same code in the browser, it links and the elements change but, when I open my Figma Plugin’s UI window, there’s no luck.
Best answer by Gleb
The plugin only loads what’s listed in the manifest.json, ignoring all other files. Since it only allows you to specify HTML for UI and JS for backend, you have three options here:
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.
The plugin only loads what’s listed in the manifest.json, ignoring all other files. Since it only allows you to specify HTML for UI and JS for backend, you have three options here:
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.
Worked like a charm! Thanks so much. Have an excellent weekend!
In the manifest there is a “allowedDomains” portion. If you add the cdn link to css sheet you can use external css in the plugins.
Does it work for you guys? I tried to put the CSS code inside the HTML file as inline CSS, but only tag-targeting stylings work (e.g. a, html, body, etc.). All class-based stylings (e.g. .text-center, .justify-start, etc.) are not working at all.
This worked for me. I’m using parcel as my bundler.
<style>@import "./ui.css";</style>
And this for the JS:
<script type="module"> import "./ui.js"; </script>
this is how my webpack file looks like. It’s working :)
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
module.exports = (env, argv) => ({
mode: argv.mode === 'production' ? 'production' : 'development',
// This is necessary because Figma's 'eval' works differently than normal eval
devtool: argv.mode === 'production' ? false : 'inline-source-map',
entry: {
code: './src/code.ts', // This is the entry point for our plugin code.
ui: './src/ui/ui.js', // Entry point for plugin main code
},
module: {
rules: [
// Converts TypeScript code to JavaScript
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
],
},
// Webpack tries these extensions for you if you omit the extension like "import './file'"
resolve: {
extensions: ['.ts', '.js'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
filename: 'ui.html',
template: './src/ui/ui.html',
chunks: ['ui'], // Include only the 'ui' chunk (from ui.js)
inject: 'body', // Inject JavaScript into the body
}),
new HtmlInlineScriptPlugin({
scriptMatchPattern: [/ui\.js$/], // Inline only the ui.js script
}),
new MiniCssExtractPlugin({
filename: 'styles.css', // Outputs styles.css temporarily
}),
new HTMLInlineCSSWebpackPlugin({
styleTagFactory({ style }) {
return `<style>${style}</style>`;
},
}),
],
});
don’t forget to update your manifest.json to point the ui to dist/ui.html
"ui": "dist/ui.html",
As shown above, with webpack, the html-inline-script-webpack plugin works well even though it doesn't seem to be maintained. I've used it and it does the job.
https://www.npmjs.com/package/html-inline-script-webpack-plugin
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.