Create Your First Figma Plugin

In this course, I’ll show you, step by step, how to create your very own Figma plugin. We’ll actually create two plugins: a basic one and then a more complex one with a custom UI. This second plugin will allow us to create a list of tints for a given color and place those in a frame with auto-layout.

In terms of course structure, we’ll begin by learning what Figma plugins can and cannot do, and then we’ll follow up with a basic example. In the final two lessons, we’ll get to the trickier parts. We’ll learn how to set up a work environment for writing and testing plugins, and then create the color tint generator.

I would rate this course as intermediate in terms of difficulty. You need to know the basics of web development for this: a bit of HTML, a bit of CSS, and definitely some JavaScript (because Figma plugins are written in JavaScript). At the very minimum, you should know how to work with variables, functions, arrays, objects, and loops.

If you aren’t familiar with these concepts, you probably won’t be able to understand everything we’ll be doing here. You can start with a more basic course like Introduction to Figma or Modern JavaScript Fundamentals, and come back to this one later.

Alright, let’s get this show on the road. Next up, we’ll talk about what Figma plugins can and cannot do. See you there!

Related Links

• Figma Community Plugins
• Server Error and Cat Illustration on Envato Elements