My Dear Friends of Figma in Let’s jump in my name is clara and i’m a designer advocate here at figma joining me is jake who is our first developer advocate he’s going to walk us through how to build your very first widget and also share a little bit more about an exciting announcement we made yesterday jake why don’t you introduce yourself and take it away.
Yeah hey everyone my name is jake alba like claire said i’m a developer advocate here at figma and so that kind of entails all things developer experience whether that’s using our extensibility platform and building with our apis whether it’s plugins widgets or the rest api um or if it’s just developers using our.
Products figmen fig jam um i’ve been at figma since the beginning of this year i am based in chicago in the usa um and i am super excited to dig into widgets today um let’s.
Let’s get started we’re going to build a widget and amazing okay and it’s going to be kind of freeform and i don’t know off the cuff hopefully i’m excited for this so i guess my first question is what is the first thing we need in order to build a widget.
Yeah so i like to answer this question because it’s the hardest step and that’s having an idea for what to build right having a good idea to build a widget i think is is uh is is one of the the most difficult steps for me uh but it’s it’s critical right and so today we’re gonna be.
Recreating a widget that i just published uh yesterday and it’s called the simple annotation uh widget and this is what it looks like let me pull up our thing here so the widget basically is a dot and you can open and close the dot.
And we can type in an annotation here like hello world and when we hit enter uh that gets saved we can move this around uh we can change the color if we want we can change uh the style uh and uh we have all of our like extra small to large sizes as well depending on the scale of whatever we’re.
In and what are some use cases you foresee using this widget yeah so like uh this idea came to me because i have some friends in town and uh well they’re coming to town and i wanted to show them all around chicago a bunch of places to go right i thought fig jam was going to be like a.
Great way to do that and so then i pulled in this massive fig jam map and i started to go annotate all the places on the city map and i was like ah there isn’t really an easy way to kind of like paste information in here so that’s where this idea came from but you could use this all over a fake jam document or.
Starting yesterday you can put it in a figma design file widgets are now in fact my design which is super cool so you can use this sort of a thing to annotate designs frames what have you um and it’s super exciting the future widgets is going to be really cool now that widgets are in figma nice super stoked for that okay so you.
Have this idea what do we do next yep so bear with me if y’all are unfamiliar with uh coding uh there’s a couple initial hurdles that we need to get through to start building a widget and that’s just setting up our computer to be able to do all the code stuff.
And this stuff is very well documented in our developer docs um which also just got a redesign which is super cool um but the first things we’re gonna need uh is a code editor uh and so i actually have uh let’s see here let me pull this up uh i use visual studio code there’s a.
Bunch of these on the internet but this is basically an editor to edit your code on your computer right an application to do that um and then the other thing we’re going to need is node.js which is a way for us to run javascript on our machine and so once we have those two things installed um we’re going to need to use.
Our terminal um to set up our project uh and so i think we have a link in the chat to some of those resources but typically setting up a project is like really involved and you have to create a bunch of files and create a big folder and do all of that sort of thing.
We have a uh super awesome tool uh that you can run uh from your terminal to uh set up uh kind of like a base widget project uh in one little command so i’m actually going to run that so as you can see we’re inside of terminal here and we are going to run npm init.
And it’s at figma slash widget and what this is going to do is it’s going to set up our project directory for us so that we don’t need to manually create a bunch of files so we could see it’s going to prompt us inside of our terminal here what’s the name of your widget i’m just going to say it’s our.
Widget and then it says okay what do you want the folder name to be on your machine we’re gonna say our widget is totally okay uh the editor type uh we’re gonna say this is a new step uh we’re gonna say it can run in both figma and fig jam because that’s the sort of widget we’re.
Building we could specify one or the other if we wanted but i’m going to say figment fake jam and then it’s asking if we’re going to use an iframe which is if you’re familiar with using plugins or widgets in figma when there’s like this pop-up window that’s an iframe and that allows us to.
Run uh any code that we would run in like a web browser to do complicated web things or fun web things but we’re not gonna do that for this one because the annotate widget can just run by itself so i’m going to select no we don’t need an iframe and then this is going to just set up our project for us which is super cool.
Um i am going to switch over to that right now so this is our widget in vs code which is our code editor and from here we can start to take a peek at the different files that are here okay so after you answered those four setup questions boom this is what it spit out for us exactly and so.
In vs code this left sidebar represents kind of what we would expect in like a file explorer or on a mac like finder um these are all the files and folders for our project um and we can see that it generated this folder called widget source uh and inside of it we’ve got two files and then we have a bunch of other files at the root of the project now.
We only care about two files for this entire thing and from here forward we’re only going to really be paying attention to two files um the first is called manifest.json and what that does is that tells figma information about our widget uh and so we can see our name the name of our widget is in here right r our.
Widget yep uh the api version which right now is just 1.0.0 uh there’s going to be an id that we’ll generate later that’s going to be unique in figma because every every widget or plugin has to have a unique id in the url um.
And then we could see the editor type remember when we selected figma and fig jam that’s what it put in here to let figma know this runs in both places uh and then there’s empty permissions array which we don’t need but in the future if we wanted to access like all the active users or things like that we’d specify that here.
Contains widget true is our way of telling figma this is a widget and not a plugin and then we also have this main which points figma to our our main javascript file for the widget which doesn’t exist yet and we’ll get to that in a second and then the widget api version is 1.0.0 so.
This manifest.json is our way of telling figma when figma looks at this widget like all the information it needs about the widget other file we care about is code.tsx and this was generated uh this is this is our widget code so anything we put in here is going to be what appears in.
Figma or fig jam as the widget itself um tsx is our way of writing uh what is very so if you’re familiar with react uh it’s it’s a component style of writing uh javascript and we’re using typescript in this case which is like kind of just like uh fancy javascript um and so this is gonna get compiled or.
Transformed into the javascript that figma will read um and that’s what this file is right here the code.js okay so it sounds like there is one file for a code right and then one file from for our metadata are those so those are the only two things that we’re going to be paying attention to yes they’re the only things we’re gonna be paying attention.
To and all that’s left is to actually just like i mean this is the code that uh uh at figma slash widget when we admitted this is the code that it spit out one for one so to actually like run and start to build the widget all we have to do down here is write npm run.
Dev and you’ll see that that’s going to create a folder up here called dist and code.js this is the compiled code for our widget that figma is going to read and interpret as our widget so we’re going to edit this code.tsx and it is going to generate this code.js for us and clara you and i.
Were kind of talking about this the other day if you have like a design brain in figma one way to think about this is um when you’re building an interactive prototype in figma you’re drawing all these connectors and you’re creating all these actions and things and then the finished product is.
Actually the functioning prototype right yes um and so code.tsx is kind of our way of like scaffolding the interaction uh and then npm run dev is going to continually build that prototype for us and the prototype will be what actually ends up inside of figma okay so okay let’s look at it because we’re looking.
At too much code right now yeah let’s take a look so we’ll come over to figma and we’re going to go to the new resource picker so this thing right here is the new awesome way to bring plugins and widgets into uh our file um and i’m going to go into development.
Click the plus sign we’re going to import a widget from manifest and you’ll recognize that they manifest from that other file that we care about so i’m going to go into our widget here and i’m going to click manifest.json this is that file that we were just looking at in vs code and i’m going to hit.
Open so our widget has been imported into figma but now we actually need to bring it in so we go back into the resource picker and we can see right here our widget is in development and i could just drag it in and right now it just says.
Hello widgets which is what the default code is right here so hello widgets right here translates to hello widgets right here um and if we wanted to be like when i save this you can see this code.
Down here is running that’s updating that code.js file and it just automatically updated right here that’s our widget yeah so this is our widget we’re done thanks for joining the stream uh it’s been real no we’re gonna actually make something a lot cooler than this right.
I’m actually super interested in the layers that it generated inside of figma which i know we’re going to get into as well yeah so this is one of the benefits of widgets running in figma design is that we can actually like while we’re developing we actually get to.
Look at terminology that is very similar to or very familiar to us already right so like uh we have an auto layout frame we have a text node right this is our widget though right so our widget uses the same language that we’re familiar with in figma design and it shows us that in the.
Sidebar and the layers panel um but this isn’t the widget we’re building right so typically you’ll either be working with a designer or you’ll be designing yourself like what you want this widget to look like and that’s where the widget code generator comes into play so the widget code generator is a plug-in built.
By jenny and some other awesome folks here at figma and what it does is it allows us to turn a design into widget code so we have this widget code right here but if we want that widget code to be our widget design we have a plugin that will generate it for us so.
The first thing we’re going to do i’m going to actually bring this down here so that we don’t forget it here’s an example of a widget design for this annotate widget that we’re going to build so we can see over here that we have a frame we have two dots which are rectangle.
Nodes and then we have a text box auto layout with some text inside of it so this is this is a design in figma this is not a widget what we want to do is turn this into widget code so what i’m going to do is i’m going to come back into our resource picker and i’m going to say widget code generator.
Oh come on now oh it’s because plugins yeah thank you all right widget code generator we’re going to run this puppy boom look at this okay so this code looks kind of like the code from our tsx file right but what’s super cool about is we can literally select anything.
Well actually i locked this layer but we can select anything in figma design and it will give us and i’ll just generate it for us so we can look at the dot specifically we can look at the text box we can look at a text node um if we had just like any path in here we could inspect that right and look at the code version of it.
Which is super helpful if you’re learning the widget api uh it’s a great way to kind of like be like okay i understand this concept in figma this is what that looks like in code form um so we’re gonna select the root frame and i’m gonna copy function widget.
And i’m to come into our code and i’m going to paste it in select function widget right here and i’m just going to paste and save we’re going to need to re-render our widget would you look at that boom i love a good copy paste yeah great copy paste so.
Now we have the widget version of this and the design version of this um and my favorite thing to do is take a peek at look how similar these two things are right so we can see we have a widget frame we have a dot a dot active a text box and a text that’s the same thing in the same structure.
As uh the design um that was a lot but we’re looking at something now right so hopefully we can start to grasp uh the connections here and i i see that it kept all the layer naming as well everything was preserved perfectly yeah um and i’m sort of thinking about different use cases here.
Now that we’re at this point so let’s say you’re a developer with an idea you might design your widget inside of figma and you know just have this plug-in run the styling code for you or if you’re a designer who will maybe just pass this design off to a developer um you know you could build it differently and you’re all set set up.
For success but regardless it sounds like this widget code generator plug-in that’s always a mouthful will guide you however you plan to build it okay so it looks like absolutely we have our sort of base place to start how then do we go about.
Adding functionality on top of it absolutely so i designed this design right since i know how to build widgets with code i designed it with that in mind that might not always be the case like you were saying like sometimes if i was working with the designer they might build like every permutation.
Or every state of the widget right when it’s open when it’s closed when it’s big when it’s small um but in this case because i kind of had this since i was coming with the idea uh i had in mind the way that i wanted it to be designed right and the way that i designed it was that we have the.
We have an active dot for when it’s uh open and then we have a non-active dot for when it’s closed so the open state is essentially toggling hide on the text box or the closed state rather is hiding the active and hiding the text box like this is what it would look like in its closed state and then in its open state we’d hide that one and show this one and.
That one right and we get a little different corner in the bottom right of the of the dot yeah and so what we need to do is we need to actually just make that dynamic right we don’t we’re not trying to like uh we don’t want to have all these layers we want like one rectangle that’s changing.
Its shape instead of two individual rectangles for the active and inactive state um so let’s do that we’re going to need to do let me select the right widget here so we’re going to go into our code okay and let’s hide the terminal here so that we have a.
Bit more space to work with um and we’ll look at we have here’s our text box it’s an auto layout with a drop shadow uh here’s its x and y position it’s fill color etc we’re going to actually just collapse the text input for a second so we’re only looking at our rectangles right so we’re only going to look.
Right now at the dot and then i’m not active okay exactly so let me show that let me select the root so here’s our dot active rectangle and here’s our dot rectangle you’ll see that the active one is the one that i put like a drop shadow on that we’ll want to keep the whole time uh we also have uh a corner radius right that’s.
Different on the bottom right than it is for the top left the top right and right right that’s what’s giving us that kind of like teardrop pointy kick yeah exactly so when this thing is open we want it to look like this right we want it to look like this top one.
When it is closed the only thing that we’re going to change is this bottom right from 10 to match the others and be 50 so that it’s a normal circle so the only thing that we actually need to change about this rectangle is this one bottom right value when it’s open and when it’s closed.
Um so i’m going to go ahead and just delete our extra rectangle for starters right we’re not going to need that because what we’re going to do is we’re going to change this value so when you’re building a widget anytime you have to deal with like information being saved.
Whether that’s the text you’re showing a number you’re showing the color what anything that you want something to like change over time and be saved in the widget in this case whether or not it is open or closed that’s a thing we want to save right.
That’s an idea that we want to like save and store and change in our widget we’re going to use what’s called a hook that’s available to us for widgets called use synced state and state is that thing that it’s our way of saving information so i am going.
To save our file and it’s going to auto format for us uh and i’m going to create a new line here and we’re going to use synced state and i’m going to call this we can name this whatever we want we’re just going to call it open and it’s going to represent whether or not the widget is open and if it’s not open.
Therefore it’s closed uh can we use this hook as a sort of boolean between those two states yes yes so this is this is going to be a boolean which means it can either be true or false you could also save text or a number but in our case like this value is like a true and false value so we’re gonna just say by default it’s open.
Okay so now we need to track that like what that value is we need to name and keep track of that so the way we do that is using a variable uh and we’re gonna just say const open this could be whatever name we want to it could be clara if we wanted and then.
Set open is going to be what we use to change it so the first value here is the actual whether or not it’s open that we can use in our code to detect if it’s open and then set open is what we’re going to use to change that value uh when you click the rectangle so this right here.
Is a completed like setting and saving of whether or not it’s open we’re just not doing anything with it yet um so what i’m going to do is i’m going to come down here i’m going to copy the word open from right here and we’re going to say.
The bottom right value of our corner radius if we’re open this is called a ternary operator uh if it’s open we want it to be 10 otherwise it’s going to be 50. so this is our quick way like a very easy quick way of saying if it’s open make it 10 otherwise yes 50. so i’m going to save.
This here and because it is open it’s going to look like this now we need to actually change it and the way that we’re going to change it is we’re going to say when you click on the rectangle flip it to whatever it isn’t so if it’s open flip it to false if it isn’t open.
Flip it to true so we’re not going to be able to see this until we actually start changing it right so let’s or we’re not going to be able to see it change yeah yeah how do we add that on click interactivity exactly so this is called an on click event so we have state which is the current value.
And then we have an event called click and we can detect when someone clicks on the rectangle and we can do something so i’m going to pass in a function here for the on click value and we’re just going to say set open that’s what we’re grabbing up here from our state.
So this is how we change the value and we can just explicitly say right now set it to open false so when you click on it set it to false and only false so it’ll never flip it back to true it’ll only make it close so now when we click on this you see how i’m going to zoom in well now we can’t go back but when i clicked.
On it it took away the corner right and now it’s a perfect circle it changed it to 50. but that’s not what we want we want it to like keep going back and forth every time we click it so the quick way to do that is to say open and then put an exclamation mark in.
Front of it and that says the opposite of open so when it’s open it’ll be false and when it’s not open it’ll be true so now when we save that we should be able to click this and every time we click this it’s changing the bottom right corner actually i have a question how come you didn’t have to re-render the widget for.
This to be interactive in figma so we did re-render it but because it was selected that happened automatically which is super cool so we have hot reloading so if you have the widget selected while you’re in development and you make a change it’ll automatically re-render that widget.
Without you even having to do anything amazing but if you make a change and it’s not selected you can right click on it go to widgets and re-render the widget manually this way to just force a re-render yeah cool so we now are at the point where we have a click event.
And then we have a state value and we’re keeping track of whether or not this thing is open um you can see that because we added a click event our cursor changes to a pointer hand right this thing but let’s say we wanted to like actually i don’t know have like a hover style so.
That when you hover over the dot it does something different we can add that here so as you can see this is our red fill on line 65 in our code and we can say hover style will pass in an object let’s just for now we’ll change it to black fill when you hover over the dot to.
Indicate that you can click on it right so hover style allows us to add more properties and and change properties when our users have hovered over uh the the object that has the click event on it um which is super cool so now we’re indicating to our users you can click this thing.
And when you click on it it’s changing it so that’s about all we needed to do for our rectangles so we’ve taken one rectangle or two rectangles turned it into one we’re modifying the only property we need to modify when you click on it and close it yeah.
And so now it’s a matter of changing our text input from a text node to a dynamic input so the users can type into it yeah so to summarize what you did to the rectangle we added that boolean function so that it could change the radius on that one corner you made a click event and then you also.
Made a hover event right is that right yes so the hover event is happening in the background so we just added a hover style that gets applied whenever the hover happens gotcha okay yes it’s just that like it’s a semantic thing yes and there’s plenty there’s awesome.
Documentation on all of this on our newly redesigned developer docs which i’m going to keep plugging it sounds like that used synced state hook then is going to be super important to make your widget dynamic absolutely so if we think about this widget right now we have an auto layout with a text node.
Inside of it that’s we can see just hard coded text right that doesn’t that doesn’t allow the user to change the text that is only going to be that way because it’s put into our code so we want to make this dynamic and in order to do that there’s a totally different uh component that we can bring in called.
The input and so i’m gonna come up here and i’m gonna add it to our file and we’re going to just i’m actually i have a i’m going to copy and paste an input next to this auto layout and i’m going to add to the y i’m going to push it down an extra.
50 or so so that we can we should be able to see both okay so here’s an example my widget wasn’t selected when i made that change so it didn’t re-render now i’m going to right-click re-render widget up there it is okay we need to nudge it down a little bit further because it is tucked away let’s go 300. okay that’s a little too much.
There we go okay so these two things look very similar right except one of these is an auto layout with a text node inside and then the auto layout has some padding and a stroke the bottom one is actually a single node called an input.
And it has the same styling applied to it but we can tell that this is a dynamic thing not a static thing because we’ve got the placeholder here we can click into it and i can just type some stuff right uh nothing’s going to happen when i hit enter after i type things in we’re going.
To change that but let’s look at the style for just a second because we can see that uh well let’s let’s start with the auto layout style so we have an effect of a drop shadow on the auto layout and we can see inside of the input we also have a drop shadow but it’s inside of this thing.
Called input frame props so one way to think about this is when you’re in a design file and you have an auto layout and a text node when you change the fill of a text node it changes the text color but when you change the fill of an auto layout.
Like group or whatever background background so fill in that case applies to two different things one is the text color one is the background color well in an input we actually have both so we have the frame around the input and then we have the text inside of the input itself so.
Fill in input frame props refers to the background color fill in the input refers to the text color so we put fill directly as an attribute or a property of input and that refers to the text color of the input and then inside of input frame props we put fill as like the background or the you can think of it almost like.
An auto layout or a group behind the input so input frame props is where we put the stroke and the padding and like the vertical alignment right these like auto layout props go on side of go on the input frame props that’s where our corner radius comes into play right uh but when we’re changing the font.
Weight the font size the fill that happens at the input because that’s the text stuff um hopefully that makes sense it’s a little confusing i know but when we look at it here right we’re just moving.
Auto layout things into input frame things uh and then we’re moving text things into like the root input if that makes sense so we’re going from two nodes one nested inside of another to one node with nested properties essentially yeah and.
Actually we have a question from the audience so the layer name of the new input that you added is called frame in figma and so we’re wondering how is the code detecting that name right so it’s actually just hard coded so when the code generator generated the code that we’ve been looking at it took our our layer name and it.
Applied it as a name prop right here so if i go into our input and i add a name prop and i just say jake now our input should say jake right um so hopefully that makes sense so basically the only reason those names existed from the code generator is because the the code that it generated had a.
Name property on each component our input didn’t which is why it defaulted to what it defaulted to looks like we also have another question is there a placeholder fill color there is so by default your placeholder is going to be a semi-transparent version of whatever the primary text.
Color is so if we set our fill on the input to red it would be a semi-transparent red however if we want to like override that we can actually add placeholder props which is very similar to input frame props and in here we could just say let’s just say bill is red for now.
So now our fill is red but it also has the default opacity of semi-transparent so we’re gonna actually change the opacity to one so that it’s fully uh opaque here and let me re-render this because i didn’t have it selected right so now we fully like we can do whatever we want with the placeholder props and.
And totally change flip the script there uh and then our text is still going to be the black that is the that we have set on the input level um so that’s a great question and that’s how you change the placeholder props um but i kind of just like the default for our use case it’s less code to write you.
Know our developers really set us up for success there uh so that we don’t have to write extra code if we don’t need to um awesome so at this point i’m going to just delete our auto layout that was uh generated and our text node i’m just going to get rid of that so.
That all we’re looking at now is our input and our rectangle we just have two nodes it’s super cool so i’m gonna also bring it back into the right position so at this point will that text save when you type into it it will not so if i just type in this and i hit enter it disappears um.
One other thing that came over that i should just make everybody aware of hidden not open remember the exclamation mark open means the opposite of open that means that this is going to hide this functionality is just already brought over i wanted to make sure that we caught that so we basically said hide it.
When open is false okay cool so our text input isn’t doing anything right and we can see here value is just an empty string so i’m going to just say jake is here and now notice our placeholder disappeared because there’s a value instead of an.
Empty value um but now like whenever i type things and hit enter it’s just saying no the value is only jake is here um we don’t want that so we’re gonna use state again so i’m gonna come down here and i’m gonna copy this line and we’re just going to call it i don’t know text and set text.
And then we have to rename it text and i’ll just say by default it’s an empty string so just like we had earlier and so then down here we’re going to change value from jake is here to the word text right so that’s our variable that represents the text itself but now we need to actually change it we.
Need to set text when the person is done typing into the input and to do that we have another event so we have the click event on the rectangle and we get a text edit end event on the input so the way that this works is we’re going to set we’re going to set our text.
And then inside of this we could say jake so now whenever i type something in and hit enter it sets it to jake but we don’t want that because that would be a very silly not useful widget uh so we get this argument right here called an event and we can say event dot characters.
Which represents whatever was typed into the input so when i hit save now this should work if i just say clara and now it’s saved um so it’s kind of like not that impressive uh result but basically all it is but now we save enter yeah and now when we hide it and open it.
It’s right there so now we have inline editable text for our annotation widget and it looks like you used that same hook for that dynamic text as well as when you were doing that boolean toggle with the rectangle is that correct it absolutely is correct um.
So we’re we’re using sync state and instead of it being boolean it’s a string or quotes means a string um because that’s the type of thing we’re storing we’re storing just variable text which you can almost think of as placeholder in a design file you know and we’ve just named it text so this is a functioning widget.
But there’s a lot more that we can actually do and i’m going to actually copy over the code um from our from the published widget itself which by the way is open source if you ever want to look at it we should have a github link.
That i can post in the chat okay yeah alyssa just posted use property menu that’s something we’re gonna look at in just a second uh and then here there’s another one alyssa let me find that github link if you go to the widget samples it’s one that should say widget samples um.
All right let’s actually just look at let’s look at the functioning widget really quick here okay cool um here let me pull it up i have it right here because i think we’re struggling to find it figma we’re going to go to widget samples.
So all of this is open source if you want to i don’t know replay this follow along with the code all of you can feel free to do that as well yeah so here’s the code i’m going to go back here all right so that’s widget simple annotate so this is what we’re looking at and so.
You can see we have this property menu up here so that’s the property menu hook that uh alyssa popped in uh let me look at the code for it so use property menu which we’re importing up here use property menu we see how we’ve got all these other sync states right because we need one.
For the changing color we need one for the changing size we need one for the changing uh mode mode is this it goes from fill to port yeah right so that’s another boolean one uh but then use property menu is our way to add options to change in this little area right here so it’s that bar that’s hovering right.
Over when you select it so the first one is a color selector uh and and the documentation for property menu is uh is in the chat um but basically we’re allowing uh you to change different color options right so these eight colors i have like up here as these fills these hex codes um and so we’ve got the color selector in here we.
Also have a drop down for sizes so we have different uh uh diameters for our dot uh with the naming and this correlates to uh this correlates to kind of like the fig jam sizes for text nodes so it gets pretty big um and then we also have an action uh so that when you click this it changes the state value uh for the mode as well so.
That’s use property menu um and then what else do we have in here uh i also added uh another rectangle that has a background of white so that when you hover over this our hover style instead of changing to black it changes the rectangle to be semi-transparent.
And then there’s a another dot behind it that’s either dark or light depending on the mode so in this case it’s dark in this case it’s light so when you fade out our primary rectangle there’s either a white or a black rectangle behind it creating the illusion of it lightening the current color oh i did that so that you don’t have to have.
The light hex codes and the dark hex codes instead we’re just changing the opacity of the topmost rectangle so we’ve got two rectangles down here one for the background and then one for the primary rectangle so all this code is available up on the github which is super exciting and yeah so this is our fully.
Functioning widget let me let me pull this back up amazing we went through a lot we went through a couple of hooks different events if you were to summarize our journey that we went through today how would we start from the beginning just a few key points for each step yeah the big the big.
Points are setting up your development environment you’re only going to have to do once and you can follow our documentation get that started two use the uh figma create widget because it sets up your project for you and it’s super helpful and it limits the amount of.
Things you need to pay attention to to adjust to the important things and then three i think what we covered with the dot is most of the overhead required to understand how widgets work so your synced state is how you track information your click event is how you kind of like.
Respond to user interaction uh and then your hover style is how you indicate to your users what’s going on right if you can wrap your mind around those three things and practice those three things building a widget is will just get a lot easier over time then we also have input if we want to dynamically get user input and that again uses.
Another event the on textedit end event to get that value that the user has typed in um and then there we’re using sync state again to save that information so widgets are super cool and there’s a lot of potential especially in figma design a couple questions for you jake so the.
First one coming from zach can a widget directly manipulate the document and nodes like a plug-in can yes it can so you can use some of the plug-in api within widgets uh look at our developer documentation but yeah you can you could have a button that when you click it it creates a rectangle and.
Figma so if you’re familiar with the plugin api you can have a lot of fun with widgets um because it can it can do a lot of cool stuff in the figma design file and also in fig jam as well another question in multiplayer so because we’re in this multiplayer platform is there a way to have multiple.
People using the same input at the same time but not able to see what the other person is typing yes uh and uh it looks like we also had a question about the difference between widget and plugin which is related so with a widget a widget exists in figma or like on the canvas right so.
Anyone at any time can interact with it if they have edit access and they can manipulate the state and do all of that sort of stuff so widgets are automatically multiplayer at the gate right and that’s why we have to use sync state and stuff to make sure that that’s saved for everybody that’s looking at it.
This is the big difference between widgets and plugins when you run a plug-in that’s only happening for you and what it does in the document everyone sees but like like if you’re creating a hundred rectangles in the figma file everyone’s gonna see the output of that but only you are gonna see the plugin.
Interface and only you are running the plugin it’s like a way of like it’s like an extra set of hands for you with a widget everyone can touch it at any point in time so it’s it’s what it’s doing uh is is for everybody however hover state.
And when you’re in the middle of typing in an input is local to you so when i hover over the widget i’m the only person seeing it dim so if everyone else is in this file they’re not seeing a dim only i am and then when i’m typing only i am seeing.
This but then once i hit enter if i change the state anyone in the file will see that so if someone is looking at me typing in an input they’re going to see the start value and then when i hit enter they’ll see whatever it changed to they won’t see me typing but if they click in they.
Can type while i’m typing so so that’s like the one little unique thing with widgets is that like everything is shared except for some of these like local states and a lot of people put a lot of hard work into getting local hover states uh and like a local typing state for inputs like.
That’s one huge complexity to like the engineering feat that is widgets and figma and widgets in fake jam another question here can you have dynamic positioning so rather than explicitly coding in 300 why value can it be dynamic yeah so with uh so there’s a bunch of different values you can apply for width and.
Height you can have hug contents fill parent right are two concepts that are familiar in figma design right so if if your parent width is 600 you can have it fill the parent width uh or it can dynamically hug the contents um or you can explicitly set a numeric.
Value for both of those things um next question that just came in are the widget layers locked will the widget break if let’s say we accidentally deleted a layer from the widget on the left panel on the layers panel that’s a great question so when we’re in development we have access to the sub layers of the widget once it is.
Published right so this is the published widget we were looking at earlier up here get up there right we can’t we can’t open this up and we can’t look at anything inside of it however our development widget the one that’s not published in the community the one that’s on our machine only we.
Have access to all of this and yes we can when we hit delete it hides them uh and we can even like change the color here even like the old-fashioned way this however will be reset as soon as we re-render the widget so those changes are not changing our code.
Our code is still our code and our code is still the absolute truth of what our widget is if you want to think of it in those terms but if we wanted to like preview it without this visible or we wanted to like if we were like ah what color should this be maybe it should we can we can do all of that work inside of figma.
As we’re developing our widget and then if we wanted it to persist we’d copy this hex code paste it into our code and so on in order for it to actually uh update the widget itself oh okay question uh can you see the widget code in inspect mode on top of the usual specifications i’ve never actually inspected a widget before does.
It depend on if it’s published or not um you can’t you’re not going to be able to see the widget code in that sense because this is existing inside of the figma canvas so basically figma reads our code and then does its magic to actually render it right so there’s that there’s a layer where you you’re not going to be.
Able to see like if you’re familiar with the web you’re not going to be able to see like a div or anything like that in that sense um so the quick answer is no you’re not going to be able to see it in that way um okay cool um with the code generator though is great for inspecting a design file.
But not the other way oh we’re looking at inspect paint on figma yeah i see what you’re is that what is that what the original question was answering about asking about um maybe not the exact panel but in the mode if there was a way to inspect it but i think you answered the question.
Yeah and you can also see like the what you would expect like property wise in figma uh you can see when your widget’s in development you can look at the same thing there cool well we’ll actually transition to a quick little fun activity that we have prepared for you all so thanks so much.
For sticking around we are going to play with this annotation widget and jake’s going to go ahead and drop it into the chat for you all to join us in the file or actually alyssa just did that so feel free to click into it um as jake mentioned the annotation widget is published on figma.
Community the source code is published on github and then now we can play with it together so hopefully this can give you a really comprehensive view of what’s possible what we just did was put a little annotation pin from where we’re calling in from jake is in chicago i’m calling.
In from berkeley feel free to grab a pin and just put where you are all right let’s see where you all are coming in from i have it open with me let’s see if we can break fig jam yeah let’s see if we can break this file together clara you really helped me out by.
Finding this giant svg map the way to go right add in that link again so cool i always love seeing everyone’s cursors inside it’s one of my favorites yeah absolutely not where london is that’s.
Right louis all right while folks are filling those in we have a few questions that we can end off with we had one question can we have draggable components in a widget for example a drag and drop component uh not yet but that’s like an awesome idea that i think would be super cool.
Um you know one thing that is kind of cool is uh in fig jam if your widget runs in fig jam there’s the stickable api which if you’re familiar how like this was a feature we added a little while ago but when you put like a heart on a sticky.
Claire i’m gonna follow you so that this isn’t boring while i answer this question so you zoom around um so if if you put like a heart on a sticky that is uh that’s our when you move that sticky the heart stays with it that is our stickable api and that basically allows you to stick.
Nodes to other nodes you can use that in your widget so that when you drop something onto the widget you can get that node so i could say hey whenever you drop like a sticky onto my widget grab it grab its information save it somewhere do something with it or.
You could go the other direction too and say whenever i stick my widget onto something get whatever note i stuck it on to and do something whether that’s like oh i stuck it onto a sticky see if the sticky is a url if it’s a url have my widget go fetch that url and grab an image and bring it in you know.
You can you can use the stickable api to kind of do some of this drag and drop stuff right now that works in a fig jam widget and i think it’s one of the coolest features of widgets i can send a link to the stickable api oh nice i’m googling my brains off here uh i’m gonna drop.
Stickable the file should be open session lou yeah i think it is an open session hopefully folks can get in okay we’re thinking through implications of stickable and figma still we’re still trying to figure out the best way to do that uh there’s a lot of complexity in figma design.
Uh currently stickable requires you to drop something over something which isn’t necessarily the desired pattern in figma all the time like you don’t want to like have to put your widget on top of a design you know so we’re still trying to brainstorm what what the best way to bring that sort of a feature into figma would look like um but it’s.
Definitely in our in our minds for how to solve that best i took a little global selfie for us so we’ll have these cursors well thank you all so much for joining we just have one last sort of ending slide to close our time together again thank you all so much for joining this live stream.
If you came in late or are worried you’re not going to catch any of those links have no fear we will have a recording of this sent to you all later as well as any follow-up resources if you enjoyed our live stream today and want to learn more and want to join future events you can find them at figma.com forward slash events or if you.
Want to watch previous live streams all of them are on our youtube channel and of course if you have any ideas or suggestions for future live streams feel free to email us at community figma.com that’s all from that’s all from us thank you to jake and thank you to you all for spending some time with us we’ll see you next time bye.
Figma is free to use. Sign up here: https://bit.ly/3msp0OV In this livestream, Designer Advocate Clara Ujiie and Developer …
Figma Official Channel,office,building,your,product:multiple, audience:developer, language:english, format:standard, produced_by:developer_advocate, theme:other, event:none, series:office_hours, type:outcome_tutorial, level:advanced, primary_feature:widgets, secondary_feature:plugins,