Not a Developer? Let AI Build Figma Plugins for You | Figma Bites

this video is for designers that want to build their own figma plugins or maybe you work for a company that has a lengthy approval process for using existing figma plugins you'll learn how

to use AI to help you build your own plug-in with zero coding experience welcome to figma byes the video series that aims to teach you to speed up your figma workflow you'll need

a few things in place before you follow along with this video the first thing you'll need is the figma desktop app if you're using figma in the browser stop and download the desktop app next you

need a code editor I like to use Visual Studio code I'll link to both downloads in the description the last thing you need is an AI chat interface I'll be using Gemini but you can also try chat

GPT or whatever else you're comfortable with the free version should work just fine okay it's time to get cooking on making a plugin make a copy of the starter file that you can find linked up

in the description in your copy of the figma file click the actions button in the toolbar at the bottom center of the screen you can also use the shortcut

command K in this menu click the plugins and widgets tab now click new plugin for this tutorial you'll be making a silly plug-in for making Hamburger

illustrations let's name it burger rator and then click the figma design option after that click the next button on the next screen click the option for custom

UI click save as now you'll be prompted to save this new plug-in somewhere pick a folder that you'll remember then click save save that's it you now have a plugin just kidding it's only the boiler

plate that figma gives you go ahead and click done you'll open your plug-in files inside vs code open vs code go up to the file menu click open folder and

select the burgat folder you created a second ago once you open it you'll be in the VSS code app with your plug-in files in the sidebar on the left to start

delete the file named code. TS and TSC config.js because we'll just be using regular JavaScript to make things simpler for us if you see a dog ignore

file just ignore it below that is a file named code. JS this is where our

named code. JS this is where our JavaScript will go delete the contents in this file after that is manifest.json

this holds all the details and metadata for the plugin you can leave this as is if you need to change your plug-in name do that online too after that is

package.json which contains more details

package.json which contains more details about the plugin if you change the name of your plugin in the Manifest make sure it matches here you can also add a plug-in description on line four for now

leave the file as is next up is the readme file go ahead and ignore that it talks about using typescript which we won't be doing and finally there's ui.

HTML this file contains the code that will control what our plug-in looks like and tell the JavaScript how to run I know that was a lot of setup and overview now it's time to make AI do

some work for us in your browser go to Gemini go.com or whatever AI chatbot you want to use to start tell the AI what we'll be doing there will be copies of

my prompts in the description let's tell Gemini that we'll be creating a figma plugin and that we want it to send the full code each time it responds often times as you iterate through changes

with AI it will only give you the pieces of code that need to change or be added if you're like me this can get confusing because I'm not a code expert by getting the full code each time you can just

delete the previous code and paste in the updated code into the files let's paste in the prompt and see what Gemini generates we're asking it to create a plugin that randomizes some burger

ingredients into an illustration all right we've got some JavaScript and some HTML copy the code. JS contents into the Javascript file for the plug-in save it

now copy the ui. HTML content and paste that into the ui. HTML file for the plugin and then save it back in figma open the actions menu again click the

plugin and widgets tab you may have to click the select menu in the upper right of the actions menu and select development to see the plugin since this plugin isn't published it lives in this

Development Area find burger rator from the list and click to open it a plug-in window will appear it has the UI we described click a few ingredients and then scroll down and click create Burger

all right that seems to work but the auto layout container isn't quite right let's see if we can get Gemini to fix that head back to Gemini for the second prompt let's tell Gemini to set the

autol layout container with to hug The Prompt is in the description copy the updated JavaScript code and go back to VSS code delete all the existing JavaScript content and paste in the new

code that was generated save the code.

JS file back in figma delete the first Burger we made press the shortcut option command p and this will open the last plugin that was opened or you can access it from the actions menu again select

some toppings you'd like on the burger and then click create Burger nice the auto layout update worked perfectly now let's clean up the UI of our plugin a bit back in Gemini I'll ask it a few

things to give us a taller UI window so we don't have to scroll to include some CSS styling to make a nice rounded purple button with white text that gets darker purple when we click it to change

all of the words to a sandera font and to make the checkbox text smaller copy the updated ui. HTML code and go back to vs code open the UI HTML file and delete

the existing code then paste the new code that includes our UI style updates save the file back in figma let's open the plugin again to see the changes that

were made everything looks good to me but the plugin still isn't tall enough let's go back to Gemini and ask for that update I'll tell Gemini to make the plug-in 500 pixels tall copy the new

JavaScript code and paste it over the existing content in vs code save the file now let's go back to figma to see the changes let's delete any old Burgers from the

previous versions too now select some ingredients and press create Burger again yum look at that obviously this is a silly plugin idea but I wanted to make something simple to show you how you can

iterate through the process using Gemini next time you're looking for a plug-in that can't do what you want or if the company you work for has an approval process that takes too long you can try to do it yourself that's how you make AI

do the work for you I hope this figma bite helps you proactively pluck away it plugin thanks for watching [Music]