My Dear Friends of Figma in Hey everyone i’m gavin and i’m a freelance designer and developer i want to inspire you today to hopefully create your first plugin or widget i’m a designer at heart but for many years i struggled to understand javascript i wrote my first line of code about 20 years ago but despite knowing.
Html and css for a long time i didn’t really get javascript until a few years ago in 2020 i took my hand to create my first figma plugin and since then i’ve created four more plugins and a widget i’ve come to believe that we learn our best when people use what we’ve created half of learning how to code is knowing.
How to put it into people’s hands i think we often forget that we’re not learning for the sake of learning we’re learning to get somewhere to make something better or faster or to realize an idea we have without people’s feedback how can we know if what we’re trying to create is worth investing in.
If you’re looking for something which is rewarding and you can approach it at your own pace then creating a figma plugin is a good way to learn there’s a very low barrier to entry and you don’t need to worry about hosting you can write using plain javascript html and css and once you’ve created something you.
Can get feedback from real people to help you get started i’m going to walk you through the process of a plugin that i created just for this talk called thumb quote it’s a simple plugin that generates a random quote and sets it as the thumbnail in our list of files together we’ll see what’s involved in.
Creating a plugin and hopefully get you past some of the trickier but not difficult aspects of making a plugin it’s useful if you have some experience with html and css but even then i think with little experience you’ll find what we cover valuable first let’s look at what’s involved in.
Setting a plugin up before you get your code editor out and start hacking away i wonder if you knew you could make stuff happen just by typing in the developer console because figma runs in the browser you can write code in the console if you don’t want to start creating files just yet this is a good way to.
Experiment with the api plugins actually require very little setup to get going if your plugin’s fairly complicated you might want to install node and i’ll provide some details about this at the end but to get started you only really need the figma desktop app and a code editor.
Using our code editor we want to create a folder with three files the first file is a javascript file which has access to the figma api you can use this to create shapes on the canvas get a user selection import components from libraries open ui window create groups and much more.
The second is a html file this is optional but you might want to if your plugin has a user interface with buttons and inputs you can also use web you can also have access to web ipas such as fetching data from a url the two files can pass information between each other.
And then finally we have a json file called a manifest it provides details about our plugin or widget such as the name and where the code and the ui file are located let’s get started by adding our plugin details to the manifest file we’ll add the name of our plugin which we’ve creatively called thumb quote.
The api version number the location of our code and ui file and finally whether we want our plugin to work in fig jam or figma or both we don’t need to worry about the id at this point because it will get automatically generated when we come to publish our plugin.
To import a plugin you can search for import plugin from manifest using the quick actions menu now it’s ready for us to develop let’s look at how the api works the api works by calling the global figma object from here we can access various different properties and functions to.
Interact with the canvas or file the plugin is currently running in when the files from your plugin are uploaded your plugin runs in a sandbox environment that means our code file is limited to only using certain global variables this is to prevent malicious code and ensure a good experience for users.
Yet it provides us with the essential things we need to develop our plugin within our code file we can use the figma api and within our ui file we can use different web apis both the code and the ui can pass messages to one another which means we have the potential to do some awesome things.
Within the reference part of the api docs you’ll find out more about how to use the figma global object it lists the core functions and properties with details about how to use them and it’s worth exploring these core functions as there are a lot of hidden gems in there the second are details about how to edit.
Or manipulate different layers or objects in plugin development these are called nodes so these include things like rectangles frames components you name it everything and the last bit of information you can find are definitions for how to pass in values or objects for different.
Functions so these can be things like what does a fill object look like or how do you define the object for a shadow when you’re looking at functions you’ll see they have a call signature it would look a bit like this it’s usually made up of the parameters in the function we’ll take.
The type of value which is required for that parameter and if the function returns anything sometimes you’ll see a value labeled like this it just means there’s a specific type or configuration for how this value should be passed in if you click on it it should tell you.
What it expects this value to be and if you see a question mark next to the parameter it means it’s optional and you don’t have to pass in a value for this parameter now let’s look at how we can create a frame for our thumbnail contained to contain a random quote first it’s a good idea to design in.
Figma what you want things to look like before you start coding now we have something we can refer to when we create our thumbnail in code let’s start by opening our code file we can create a frame by using a create frame method a method is a function that belongs to.
An object in this case it belongs to the global object figma in order to edit our frames like change its size or color we need a way to reference it we can create a reference by storing our frame in a variable with a name now we can change the name of the frame.
By editing the name property however you might think that you can change the width and the height by editing the width and the height property but what we have here won’t work because we can’t write to these properties directly however there is another method that.
Will let us resize the frame the api reference shows the call signature for the resize function we can see the first parameter that we need to pass in is the width followed by the height and these values both have to be numbers using the dimensions from our drawing we can resize the frame.
Now let’s look at how we might change the fill of our frame we can refer to the api reference to tell us exactly how this property looks here it tells us that it’s a read-only array and what this means is the values inside the array can’t be edited directly but what we can do is replace the whole array.
We can check the type definition for the values in array in the array by hovering over and clicking paint we can see that the paint object can be any one of three different configurations the headings provide the different types for this object and the one that we want is solid paint.
Which only requires two properties that’s the type and the color we’ll start by adding our array and now we’ll add an object with the properties type and color i won’t bore you with the documentation but the color needs an rgb value we can find the rgb value if we go to our design and inspect the fill.
Here we can change the fill from hex to rgb and this will give us the rgb values to use in our code now we pop in the rgb values but the trouble is the api uses a decimal number to represent a percentage of the value so we can’t pass in the values as they are.
But what we can do is work out the percentage by dividing it by 255 which is the maximum value you can have for an rgb value now that we’ve seen how to create and edit nodes let’s look at how we can edit text changing the text affects the layout of an text node.
Because of this we need to load the font before we can make any changes to it we can do this using an asynchronous function understand how asynchronous functions work it’s useful to know a bit of info about how javascript works javascript is a single threaded language.
And for such a long time i never really knew what this meant but unlike you and me who can breathe and think at the same time javascript can only do one thing at a time certain functions that are reliant on external tasks such as making a network request to grab data can block the rest of our code.
So because javascript can only do one thing at a time it must wait for that function to finish before it can execute the rest of the code an asynchronous function allows us to do is to get around this by changing the order of when a function happens without us having to restructure our code.
They’re up for unblocking the rest of our code so in essence the experience we perceive is something more like this so we can structure our code how we want and not have to worry about when javascript runs this function i demonstrate this using an example.
Here we have lines of code that create three different shapes the red rectangle is created first then the yellow star and then on top of that the circle i’ve added the outline to show that the star is just beneath the circle when we use an asynchronous function we can wrap it around code to allow us.
To change the order of when that runs usually with an asynchronous function there’s a task and it goes off and does something and when you get a response the rest of the code inside that block will run so that’s why we can see the yellow star on top of the circle despite the codes for the circle being before it.
We can load up on using the same principles first we create the text node and then we use an asynchronous function to load its font this function will wait for a response to say that the font has loaded before running the code inside it then when the response is received we’re able to edit any properties which might.
Affect the text layout inside such as the characters font size width height things like that now there are two ways to wait for a response the first is the example i just showed you but another way is to use the awake keyword.
The awake keyword makes it a lot simpler and easier to maintain your code however unlike the first messa method everything after the keyword will be blocked which you may not want in some circumstances the awake keyword only works inside an asynchronous function so we need to wrap it inside another.
Function like this we’ll call it main because that’s the main function of our plugin now we can put the rest of our code inside our main function which makes writing our plugin a lot easier so we just learned how to use an asynchronous function now let’s look at how we can populate.
Our text with a random quote from a url the code file is restricted to what apis connects it can access including web apis however the code file and the ui file can communicate with each other by passing messages to each other by opening a plugin ui window it can use the web apis and pass their.
Contents to the code file so to start with we open the plugin ui by calling figma.ui.show ui this method expects a string of the markup we want to use for our ui but we can also use a special variable surrounded by two underscores to pass the markup from our ui file.
Now we can switch to our ui file and start fetching a random quote we use the same technique that we used earlier using an asynchronous function and using the awake keyword we can fetch some data from a url and wait for the response to return a quote.
Once we’ve received the response we can post this to the code file we need to specify quote.content so that you we only get the quote and not all the details like the author or the date now back in our code file we want to listen for the message we just posted to do this we use a message event handler.
And this will give us the contents of our message from our ui file inside our event handler we check for the type of message in this case we’ve called it post quote this is because you might want to send several messages and you need a way to tell them apart and now we can set the characters of the.
Node to the quote in our message because we’re not actually showing any ui in a our ui like buttons and things we can hide it this means that we can use the ui to fetch the data without the ui having to be the user having to be disrupted with an unnecessary ui so we’re very nearly done with our.
Plugin but we still need to center the text and set the thumbnail currently the text is actually just floating on top of our frame so we need to nest that inside our frame to do that we use the append child method and what this does is add the text so it becomes a child of the.
Thumbnail frame now we can center the text however there aren’t any methods in the api for positioning nodes this is an occasion where we need to improvise a solution ourselves we can do this by calculating what the height of the frame is minus the height of the text divided by two.
And this will give us the correct x and y coordinates to place the text in the center to set the thumbnail we use the set file thumbnail node async method i know it’s a bit of a mouthful but this method will let us set the thumbnail so it appears in our list of files now to close our plugin.
We need to we need to make sure that we close our plugin otherwise the users will see a notification saying that the plugin is still running and it will appear it will appear indefinitely until the user cancels your plugin as we saw earlier when you’re using an asynchronous function it can affect the.
Order of when things happen in this example our plugin would close before we receive the response to say that the thumbnail has been set which isn’t what we want so to make sure this doesn’t happen we need to include the call inside our main function so we just made our first plugin.
As you can see you don’t need to write a lot of code to create some interesting things i hope it will give you enough confidence to create your own now you could publish the plugin or even just save it to an online repo you can also publish plugins privately within an organization.
When you publish a plugin it will ask you for an icon some artwork and a description once it’s been reviewed by someone at figma your plugin will be available in the community for people to use anytime you republish your plugin you don’t need to go through the review process again.
As your plugin gets more sophisticated you’ll find that you might want to use other javascript files or split your project into smaller files and because the only files which get uploaded to figma are the code and the ui file you’ll need to use a bundle a build tool or a bundler to condense.
These files you can look at what we’ve created as well as general guidance on developing plugins by downloading the repo on github i’ve included a readme to get you started if you want to learn more about getting started with javascript i’d also.
Definitely recommend check checking out mdn’s first steps guide it’s a good primer on learning the basics thanks so much for listening i love chatting about this stuff so if you have any questions or you’d like to learn more please don’t hesitate to reach out
This talk is not a tutorial on how to create a plugin in five minutes. In this session, Gavin will help you get past the mental and …
Figma Official Channel,demystifying,plugin,development,figma, design, product design, tips, tricks, UI design, ux design, app design, figma design, design for figma, FigJam tutorial, prototyping, collaboration, UX tutorial, Design tips, whiteboard, Figma tutorial, Config, Config 2022, product:none, audience:developer, language:english, format:standard, produced_by:marketing, theme:development, event:config, series:none, type:other, level:intermediate, primary_feature:none, secondary_feature:,