Learn how to make a Figma plugin

hello there hello everyone please send something in chat so i can see that everything is live and everything is fine um today's stream is gonna be pretty interesting i would say we are going to make a very simple figma plugin and i'll try to explain like all the different things that go into building plugins and how can you get started in this um in this area yeah so please share and tune in it's going to be an interesting live stream i would say so here i have documentation i have figma open and ready to go to start working on our plugins hello everyone please say something in chat if you're watching and if you can hear me well everything like that so yeah what i'm gonna build today is a plugin that selects all objects with the same name as the object that is currently selected but first i will explain what even goes into building plugins because it's a really interesting process yeah you need some programming knowledge to do that figma says that you need some basic programming knowledge and if you know how to make a website then you will know how to make a plugin i i think it's somewhere here in the documentation so i would say figma is really easy to understand and uh to make plugins for their api is really simple and it's really easy to program figma plugins even if you don't really know how to make a complete website um you just need to know the basics of programming and javascript programming language this page here plugin docs it's in the in the video description right now you can find the prerequisites here uh it's it says uh some links here hello ellie uh nice to see you yeah thank you i like i'm glad that you like master so yeah you can see some links here that they will allow you to get started in javascript programming i will try to explain some basic concepts here uh so you can continue with us like i will explain everything as i do here so we are going to make a plugin that will select all objects with the same name on the current page i will try to show all objects all variables everything that goes into building the plugin i just opened the console i don't know why i need to first create a plugin to do that i will go to menu plugins development new plugin it allows me to choose the name of the plugin i will type oh yeah i need to figure out what the name will be there are edit functions here select all with the same properties okay so i need to go to here oh i'm not showing shortcuts i'm sorry i need to i need to do this yeah yeah um select all with same name i think it's uh capitalized all words right i forgot okay i think no i think it's like this select all with same name name is uh from the capital letter okay uh empty i will start with an empty plugin template uh without any template actually yeah so it will just give me the manifest file and the other file files that i need the javascript file where is it plugins yes here select all with same name i save the plugin to a folder and you can see it here now in finder i have it select all with same name it created this folder this folder contains two files manifest json and code js oops oh yeah good so manifest json is the file that just tells figma how to run your plugin what the plugin id is what the plugin name is what version of the api you are using right now there is only one version 1.0.0 there are no other versions and the main file is the file which contains the code for your plugin it's the code js file by default i can rename it if necessary and but i will not do it so code.js code.js is basically the javascript file where all your code leaves and when figma launches the plugin when the user launches the plugin plugins here development uh select all the same name i can see it now here in the development menu in plugins when i launch it nothing happens because all it does is just automatically closes the plugin with this line i made the ui a little bit larger um nice so you can call the plugin and you can use option command p to call it again again it will do nothing but if we open console you can do it by going to plugins development open console it opens here so i just use a shortcut option command i to open it as a window it's a bit quicker this way so now we have this console here and as you can see figma tells us clearance and stylus in silence in console log from figma and then restoring console.log functionality from figma it does this just so all the co code that you run can uh write something in the console and figma will not uh interfere with it so this these two lines basically they mean that this line means that the plugin has started and this line means that the plugin has finished working so now let's open uh our code and finally start writing something here to select all objects with the same name first we need to find the name of a currently selected object right so i'll create a rectangle here actually a bunch of rectangles no wait uh i'll copy it here and do it this way so i'll rename them all to rect to no i will that will be a bit confusing so i'll call ram rectangle you will see why later so i'll open uh my javascript file and i can start editing it and figma will automatically when you launch it again figma will do all the changes that you made to this file so in this file you can write code for your plugin how you how do you know what code to write first you need to know some basic javascript concepts such as variables oops variables you probably want to know how to work with functions you will likely need to learn how to work with arrays hi alessia nice to see you here hope you are enjoying the stream you will also need to know a bit about javascript objects and how the syntax around them works how to create an object how to access properties on an object properties are basically variables or functions that are stored in one object an object is a just a collection of these things yeah it can can contain other objects inside of it too so also you will need to learn about some basic things like loops and conditionals conditions loops and conditions yeah so these are the basic things which are necessary to make figma plugins you don't need stuff like manipulating dome which is a lot of uh a lot of tutorials online teach you to do they tell you how to make objects in html interactive you don't really need this to make sigma plugins you only need to know these basic things you also don't need to know jquery i will write this like this yeah so you don't need to know jquery i saw that a lot of tutorials online teach you how to use jquery uh it's a library that which allows you to easier access html things to work with them so you don't really need it to make plugins and you don't even need it to work with websites it's a it's a bit outdated i think but some people still use it it's fine if you find it useful so yeah these are the basic things now what's happening here figma dot close plugin and brackets what does it does this line mean what does it even do so i already said that this like this line closes the plugin if i don't write this line the plugin will i just save the file the plugin will run constantly without stopping it says run and select all with the same name and figma doesn't the plugin doesn't do anything and it doesn't stop it needs to close manually so you need to do this line at the end of every plugin execution what figma is figma is an object which stores some properties inside of it which you can access to manipulate objects inside figma so figma is this kind of object and close plugin is one of its properties it's a function functions are called with brackets you can pass some parameters inside actually let's do it now this function close plugin if i open the docs and i find this function here close plugin uh functions are called functions or methods also another name for the same term basically so yeah here at the top you can see that closed plugin closes the plugin you should always call this function one once the your plugin is done running and here's the definition message question mark what does this mean in stream it means that you can pass a parameter inside of this function this parameter is called message and it's optional so you can see the question mark here and the type of this parameter is string which is uh just a word or several words so i can pass a string here a string is created with a singular or double quotes and you can type here objects it after the plugin stopped running now let's go back to figma launch the plugin again and we can see the small notification here which says what we wrote here we need uh double quotes or single quotes to make sure that it's it's a string if we don't write it it will be something some nonsense oops i didn't save it the plugin will show that you've made a syntax error because objects isn't not something that doesn't even exist in javascript and selected two these are not words that javascript can understand but if you wrap it in quotes it will know that this is a string and this is just text that it needs to display now let's continue uh working on our plugin what we need next we need to find the name of the currently selected objects object to select all other objects like it we can do this by going to the documents to the documentation of figma plugins and finding name what is the name name is a name of an object so everything in the file every object object in the name or in the file has a name and you can change this name it's a string it has string value yeah right so how do we find the name of an object that's the tricky part we need to somehow find the selected object first and then to we need to find the name of this object how do we do this we need to find the selection right so let's find selection selection all right um let's see here selection is a property of a page node so here as you can see they give some example functions here page selection and the selection is an array so it's a read-only array read-only means that you can't modify contents of this array you can only copy the whole array or replace the whole array with a different thing but you can't change objects inside of it so c node c node is just something here uh that represents any kind of node that can be placed on the canvas like slices frames rectangles booleans instances components texts now text nodes etc everything is a c node anything can be a scene node here so it on it doesn't include pages it doesn't include the document itself now how do we find the selection that's kind of tricky i would say because i don't see it mentioned in the documentation anywhere so i'll just tell you i don't know how to find it to be honest oh we still have our syntax errors you can clear the console easily from the menu here um console is a great place to get started with plugins to play with the api a bit so you can find this current selection using the following line figma which is an object that allows us to access everything inside of the figma file dot dot means that we try to access something inside of this object a property of this object current page current page represents the page which the user is on like page one for example right now we only have one page so current page will be page one if i had two pages pages current page would be either page one or page two depending on which page is currently open and then from the current page we find the selection as we saw earlier selection is a property of a page element and yeah so selection what right now it's an empty array as you can see i pressed enter and it shows the empty array here now let's try to select something oops let's try to select something and try again pick my current page selection now it shows that the figma has the selection has rectangle node inside of it it's a rectangle node with id2o and if we open this rectangle node we will see all properties this object contains this is the rectangle node that's currently selected let's find the name here somewhere here it is and it's a rectangle yeah that's true the name of this rectangle is rectangle i'll call them something different actually i'll call i'll call them love just for fun because love was great now let's go here and in the code js file we can write the same thing but this code doesn't do anything right now by the way i'm pressing up and down to go between commands which i typed previously so now how do we access the ob the name of this object we need to do this selection 0 square brackets mean that we are accessing the item in the array selection is an array and the first element of it has index of zero second element has index of one third index of three etc so an array is just a collection of elements ordered by index first element has index of zero so i'm getting the first element of the selection array in this line let's run this command and as you can see it shows just so just rectangle node before it showed if i do this it shows it in square brackets and it actually shows us the 0 here 0 is an index of this rectangle node here if i select multiple rectangle nodes and run the same command again as you can see now we have all five rectangles and their indexes are 0 1 2 3 4 and the length of array is 5 because it can contains five objects inside so an array is just a collection of objects we just need the first element like this now as we already saw we need to access the property of this object called name and now the name of this rectangle is love let's create a bunch more rectangles let's paint them a bit red and this ones will be something like blue or yeah i think this will work i will call this rectangle's hate this will be our test file where we'll we will be testing if the plugin works yeah so now we have figma current page selection name but we need to store it somewhere so we can check other objects if they have the same name or not we do this by a very simple thing we do this by storing it in a variable in a variable i'm sorry i'll call this variable name variables are created with the var or let keyword i will use let they have almost no differences but let is a bit more stable i would say now actually in the console it's better to use var so i will use it here and let i will use it in the plugin javascript file var name equals figma current page selection zero name now it's stored in this variable you can we can access it by the name right now the name of this variable is name and the name is love yeah now is a different part we need to find all objects inside of this file which have this name and to do that we will use find all method you can find this method here find and you will see find all because when we are looking through the whole file we need to find all objects inside of this file it says this method it's a method as you can see here with the brackets searches this entire searches this entire subtree this node's children um thanks alex yes that's exactly the the line we are going to write um yeah so find all is a method which returns all nodes for which callback returns returns true callback in this case is another method so this is a little bit of a complicated function which we are going to write um find all is a method which accepts callback parameter for some reason it's optional oh i think because it you can find all just without any uh parameters it accepts callback as a parameter and the callback is another method as you can see here which returns a boolean and accepts a node so let's uh um let's break this down a little bit so since callback is a function let's first first write the callback it should return boolean boolean is a true or false nothing else so let's write a function function called back i'll call it callback1 for now no i will call it uh the callback this function basically checks if the car the node um corresponds to if some condition is true for this node that's why it returns a boolean so what we can do is write it let's call it something like is same name right it's same name so this function will co will check if node which will will pass to it has the same name and the name we are already storing here is a variable now it should return a can a boolean so what is a boolean boolean is a result of a condition so to do it we need to return first and then we need to write some condition in this case this condition will be to check if node name is the same as the name variable which we saved previously so this sign means that we are basically checking if it's the same thing or not it's a condition it's not this this is the assignment operator it means that node name now will be name but if we write three equal signs it checks if node name is the same as name which we stored here now so far so good we have a callback it returns a boolean it accepts a node which is important node is any scene node which we described what it is previously now callback we need to pass this callback into find all function find all is a function on any node which has children so for example find figma current page find also this is a great example uh it actually does everything we need right now so i'll just write this here write this in the console figma current page as if as we remember previously we described that current page is the page which the user is on current page find all is a method so we write brackets here and we need to pass this call back here we just write is same name let's check wow it returned an array of all rectangle nodes which have the same name if we check here name is love brilliant now we need to copy all of these into our plugin by the way this array it would be good to save it into some variable let's go here and write what we have here we have name i'll just copy and paste it we have a function and we have this line which finds all objects with the same name brilliant we can even simplify this a bit but i will not do this right now so this is just full code to make it super easy and not very confusing so the simplest syntax i could use variable called what nodes i'll call it nodes so if you remember correctly nodes is a now an array with all our rectangles which we found it will be yeah so let's just log it let's just see what it returns oops yeah so this method allows you to print anything into console here when i launch the plugin you will see it let's go and launch the plugin object selected so yeah here it printed all the rectangle nodes this whole array now we need to do something with this array we need to select it we need to select all of these objects very simple stuff uh how do we do this if we remember yeah so i already told you that figma current page selection the selection is an array it's a read-only array actually let's find it again here it's a read-only array it means we can't modify its contents but we can assign the new selection so for instance if i have a selection with one rectangle let's show it here selection right now nothing is selected right so length is zero and the array is empty it shows just two square brackets now let's go to figma and let's select something and run this line again now it contains one rectangle object if we select two it contains two two rectangle objects it's an array with two elements uh yeah you know that stuff so what do we do with this array we can easily replace it so for instance two objects are selected right now and we write equals just empty array so right now it's equal to the array with two elements and when we run this line it will equal to an empty array let's do it now yeah so now nothing is selected because we made our selection equal to nothing to an empty array if we just write something like null here it will throw an exception it needs to it needs to have an array here now what we have in our plugin is an array of nodes and if we combine this knowledge this powerful impressive knowledge we will be able to write this what it does it it just tells figma to select the nodes that which we found so let's go backwards on our code now let's go like compile it in our head let's uh tell through everything that it does it's a very helpful helpful exercise when you're just starting out in code you can just tell through everything through every step which you that your code does basically here we create a variable called name we assign this variable to figma current page selection which is figma is an object it contains current page objects contains selection array we find the first element in this array and we take the name of this first element so now the name contains the name of the first element in the selection array in the current page of the figma object then we create a function this function checks and returns a boolean of any node you pass into this function as an argument it checks if the node name is equal to the name which we have here yeah so this variable is very important i will call it um something different actually so it's not confusing i will call it saved name and here we will have to change it as well save name so now it checks if the node name the node is any node which we pass into this function if this function returns uh true then the find all method will add this object to the array which it returns and if it this function returns false then it will not add this object so the find all function returns an array and it checks using this function it basically calls this method like this like it passes some node into it and it does it for every single node on the page for every single rectangle it goes through every object here and even if i place some of them in the group or frame it will go through the frame then it will go it will go inside and check every object inside now yeah here we have nodes variable it contains an array of all found objects on our page which have the same name as the saved name and the current page uh selection will be set to the inner to the array which we found yeah and then the plugin will just close using the figma clause plugin with the message objects selected now let's run this plugin i'll run it interestingly like through this menu i usually use the shortcut but for the demonstration i will run it through this menu now select all with same name i run it object selected brilliant it found all objects and added them to one array and then it changed our selection to this array brilliant it's working um but now what will happen if we select two objects like this what will it do so it selects one but what if i do this it selects all of these objects nice now if we choose something here no maybe if i choose it like this it will no so it kind of randomly chooses between two objects now let's rename it to hate oops i'm sorry i accidentally pressed a button i need to stop doing that um yeah so if i rename this object to something else like hate and run this plugin again i'll select two objects it selects all hate objects so yeah it it's kind of random so what i will do instead oh by the way let's check this now yeah it selects only the objects with the name love so what i will do is just don't run the plugin at all if we if it contains if the selection is longer than one so we need to add the condition here and condition javascript is written as if and then round brackets in the in these brackets we write the condition it should return a boolean obviously this condition can be something like this but we need something different if figma current page selection lens is more than one if what it does what it does is it checks if the length of our selection array is more than one it needs to be strictly one so only one object can be selected oh i can write it not as not equals to one actually now let's write it first as more than one so it will close the plugin figma close play return i will also write return here because otherwise the lines could execute and it will break basically so i'll just add return here for the good measure figma close plugin and we need to write some some text here something like select one object so this condition if this condition is true if the selection is longer than one if more than one object is selected then we will close the plugin and say hey you need to select only one object let's run the plugin and see a legal return statement okay this makes sense because it's not in a function to fix this i will write a function main like this i will recommend you to write a function like this hey aiden nice to see you here how are you yeah so i will advise you to write the function main i i just call it main you can call it whatever you want and call it after that so here we define the function and here we call it with the brackets we don't pass any parameters in it and if we did it doesn't accept any so it doesn't make sense and here now we can write re return the return statement from will just close the function it will not execute anything below this return line let's save the file and let's try again okay object selected it's fine because we have only one object selected now if we select to object objects it says select one object so it breaks yeah and if nothing is selected look at this it will break yeah plugin error type error value has no property what value has no property yeah this message is a mess if you wanna i would recommend you to read error messages very carefully and google what they mean so if you here we have type error value has no property and you will just google this message here if something breaks in your plugin there are usually a lot of answers what could be causing the issue so i hope you will be able to figure this out also you can use developer virtual machine uh if you enable that the error messages will be a bit better than this but um i'm not using it for simplicity yeah so i'll enable it now actually use developer virtual machine and now if we go to plugins again you will see it now has a check mark so developer virtual machine is enabled and if we run the side the plugin again nothing is selected it's it's a bit better now yeah so we can see many lines here i'll zoom out a bit now i will just extend the window make it larger yeah let's see what it does cannot read property name of undefined so somewhere we are trying to read the property name here we are doing it for the first time the property name uh we are trying to read it and it says of undefined which means selection 0 is undefined which means there is no first object in the array so it's undefined yeah and since it's undefined you can't read its property because it's basically nothing you can't read something from nothing so yeah that's why it fails because nothing is selected and we we're trying to access the first object here so to fix this i will copy this read this if statement if it's um not equal to zero oops not equal to one right if we write this here it will say like nothing is selected right um let's try it out so what it will do is first check if an object if an array is long if it's too long then it will close the plugin and then it will check if an array oh i can check if it yeah let's make it more explicit let's check if the length of the selection array is zero right now it's zero i will not select anything and let's run the plugin nothing is selected right so the selection length is zero and this line runs but we can make it simpler so we does we don't have to write two if statements here because basically we just need to check if an array contains one object we don't care if it's longer or shorter to do that we will use a not equals condition if it's not if it doesn't equal to one it's a exclamation mark and two equal signs then we will remove this thing here yeah so we will do it this way and now if we select nothing it's it still says select one object if we select two objects it says select one object and if we select one object it will select all objects with the same name super simple plugin i think yeah so it's finished basically hooray congratulations so again i will just reiterate what we did we made a plugin that selects all objects with the same name as the currently selected object and yeah we did it using javascript code first we created a plugin using the figma ui then we uh checked the many manifest if everything is all right here by the way let's check capitalization here edit select all with so only with is not capitalized here we can change the plugin name so with we will leave lowercase and this one will be capitalized like this now plugins development select all with same name hooray select one object let's run it again object selected brilliant do it here if we do it here even it will select all objects yeah with the same name after that we created a function main no we did it afterwards but just to explain we created a function main where we wrote all our plugin code and then we launched this main function yeah and uh what happens here is i will write some comments here writing comments is good so here we are checking if only one object is selected if not then we close the plugin and return from the main function we basically close the function we stop executing it now yeah i'll if um no i will write what did i say again i need to write and say things at the same time yeah so we are checking if only one object is selected make sure make sure that only one object is selected save selected object name in the variable what we did here then this one is a callback function from the four find all this function returns if the name of an object matches the saved name yeah then we created another variable where we saved all found objects in an array save an array of all objects with same name i will write a better name for this um to do this i'll press com command d to select all the same text in sublime text and i will write here um no no yeah notes with same name great let's expand it a bit uh writing good names is really important for good for writing good code and then basically we select all found yeah select all found objects and then we close the plugin that's basically it let's check if it's working again after our naming and uh checking the code selects one object it breaks great yeah it works it works very good um i'm surprised why didn't they add it i want it here in the edit menu i want this i need this this is really useful sometimes yeah so i i decided to build it because i wanted to make this function because it's convenient to be able to do this again to show you what you need to build sigma plugins you basically need to know the basics of programming on javascript you don't need to know how to manipulate html html you don't need to know jquery or any other libraries you just need to know variables loops conditions functions arrays and objects that's it these are all the very basic things about javascript and yeah this is actually very similar to uh writing in english so we define a function main function called main then we uh add some characters here which make sure that this is the function and this is the curly bracket shows where the function body is yeah and then if sigma current page selection uh if the length of this selection is not equal to one then we close the plugin and return from the main function then we save the variable called save nay saved name with the selection with the first object from the selection the name of the first object in the selection and then we check if it has the same name in for all objects on the canvas and this method returns an array of all objects which have the same name it checks it using this function which we wrote here and this notes with the same name will now be returned in the selection nice so that's it um some very simple stuff i hope this stream tells you a bit about how to write figma plugins it helps you start learning javascript a little bit it's very simple it's a very small plugin but you can start with writing simple really really like small scripts and uh it will be great so if you have any questions feel free to ask now or later just message me email me at nudes at gleb.sexy or message me on twitter or i don't know wherever you can i'm everywhere you can find me on telegram you can find me in sly communities friends of figma community on slack shout out to everyone yeah it took one hour but i was trying to explain everything uh for me it would take basically one minute to write it so i decided i will share the knowledge and explain every single thing i could thank you aiden yes it's a great email i love it uh yeah i'm really happy with how it turned out a really small plugin but i explained basically everything and showed the whole process and try to get you into javascript a little bit so thank you all for coming to the stream and don't hesitate to jump into my dms and ask me questions even stupid questions actually there are no stupid questions so you can ask me anything i will try to answer anything you want about figma plugins or figma in general i don't know yeah so thank you all for coming to the stream i hope you are having a good day and good bye you

Channel: Gleb Sabirzyanov

Views: 5,385

Keywords:

Id: V2QJW3WNSfc

Length: 67min 5sec (4025 seconds)

Published: Thu Jul 30 2020