My feedback on improving Figma's plugin tutorial

I’m a designer who’s learning how to build Figma plugins. I was following Figma’s tutorial and here are my gripes with it :

1. Overall video is too long
As someone who has some background knowledge in JS, it felt like there was too much content to digest. I would suggest splitting the video to 2 videos; the first which teaches you how to format your menu in ui.html, and the second where it talks about passing values from ui.html to code.js and accessing data from your Figma file

2. Info on including external libraries is sparse/none existent
In the video, when the author wants ui.html to make use of Thomas Lowry’s UI library, they say to simply paste in the link tag as such:
[link rel=“stylesheet” href=“”]

What they didn’t mention in that video was that:
a) Figma plugins only loads content from ui.html, code.js, and stuff from whichever domain that you allow in your manifest file
b) In order for ui.html to make use of this external UI library, you actually have to state in your manifest.json that you’re allowing the plugin to retrieve stuff from “

I had to google for a few hours before I stumbled upon the answer on my own. I think that using an external stylesheet without informing us the proper setup to make it work is a huge oversight.

3. Teach us how to incorporate external files into our plugin
If you wanted to separate your css styles and js code into separate files (to keep ui.html and code.js more readable), you would have to bundle them using something like Webpack. There’s a detailed Figma article about it:

Unfortunately, it’s not mentioned in the tutorial and I only found it by scouring the forums. Since it’s common for devs to make use of external stylesheets and libraries, it’ll be valuable to learn how to include these into our plugin as a separate video tutorial.

So here’s my feedback about the Figma plugin tutorial. What do you guys feel? Are there any points that you agree with, or is there anything else you’ll like to bring up?

1 Like