Building Figma’s Widget Code Generator

Hi everyone. I hope you're having a lovely conference so far. My name is Jenny and I am an engineer at figma. I'm based in Leeds in the UK. So for you those of you that didn't know figma had a product team in Europe. Now, you know and welcome to this talk on figma's widget code generator. We're going to be using it to build a fig Jam widget and then talk about how it was made. On my screen now, you can see fig Jam. This is figma's online collaborative whiteboard tool where I can do things like add a Post-It note. I can do some drawing. And most importantly for this talk I can add a widget. There okay. This can be seen and interacted with by everyone that is in the file, which at the moment is unfortunately just me and they aren't just restricted to the existing widgets. So to make fig Jam files as fun and as flexible as possible. There is a public widget API a component based API. It's quite similar to react which allows you to write your own widget. And that's what we're going to do now. So I've got if we're going to figment design. I've got my design for my widget here. It's just going to be a simple voting widget with a button here that you press to vote and that will increase the number of total votes so far and then put your little profile picture into a circle and line them up all along the bottom for however many times you've voted. So and then also I've got oh editor on the other side and this is the code for what my widget project looks like again. It's super simple. I'm gonna write all of my coding code.tsx and I've got a package.json file with a couple of scripts. The one that we want is watch. So if I run that now. 10 pm run watch it should start my widget running. Put all its compiled code into code.js. and if I go back into fig Jam I can run my widget by going widgets development simple vote. And there we go. It says hello. I am a widget which is what so widget function is returning. And I can add some exclamation marks to this and they'll updating real time. So hopefully this widget code is quite familiar to you. It is looks just like react using jsx components and some specific figma. Layout tags so I can have an auto layout I can have a text. I can have a rectangle and loads of other components that are just like things you can create in figma. So if we go back to our design if we wanted to start. Coding this from scratch we'd have to go through and look at our simple vote layout and see that it's a frame with auto layout set. So we'd have to start adding an auto layout. And then we'd have to look at the properties in that auto layout like the gap of four and put this in as spacing and you can see it would take quite a long time. So earlier this year. I helped as part of biannual make a week to create a widget code generator plugin. and if we run that this is available to everyone on figma community. So if you just Google figma's widget code generator, this is something you can install yourself onto your figma app but if we run it here and I'll just minimize this window run it and click on the thing that we want to get the code for so our simple vote widget. You can see it generates all of these components for us with the layout that looks Pretty similar to the layout of the layers in figma and we can copy all of that and paste it into. A text editor it's complaining about Avatar. So we'll just comment that out and come back to it in a minute. But if what we've got is a function called Simple vote. So if we take this simple vote component and then use it. inside our main widget code and go back to big Jam It's starting to look quite like our design already, isn't it? We've got the gradient. We've got the text. It's all laid out in the right place, but we're missing the pictures along the bottom and that is probably got something to do with the thing that I just commented out. So if we put it back, it's complaining that it cannot find Avatar and this is because in our design Here frame six seven and eight. These are all instances of a component called Avatar and instead of Doing this in line and just writing out the code three times. What we want you to do is go to the Avatar component and get the code for that. And put it into your file just like we did with simple vote. So now we've got a function for Avatar and these instances are a bit happier. And if we go back to Fig Jam again. You've got really beady eyes, you'll be able to see that. There are three faint white circles. That's because they're outlined in white if we change the outline to Red just so we can see where the circles are. There we've got it. We've basically got our widget. It doesn't do anything though. So we need to add an on click to this button. So when you click it it will add you to the list of Voters increase that number and put your picture along the bottom. Okay, so in simple vote how we're going to do that is by storing some state of our voters. You probably recognize this from react instead of saying you state we're going to say use sync state which is part of the figma widget API. Give it a name and start it off as an empty array. Because this is a typescript file. I'm also going to give it a type that I know is going to be user. Um, and then we want to update this voters array when someone clicks on the button. on click function and when they click we want to get your profile as the person who's voted because that's gonna let us get your profile photo and to do that we can say voter is bigma.current user. and figma here is a global object that is provided in the widget runtime that lets us get things like the current user and loads of other information about What's going on in the file? So now we've got this photo. I know that this photo can sometimes be no it probably won't be but just to protect against that I'm gonna say if we don't have a photo. Voter don't do anything and if we do have a voter we're gonna set voters. Get our original list and add a new photo to the list. And our own click is useless if we don't put it anywhere. So we want it to happen when we click on this button. Which we can find in the layout because it's called vote button and all of these tags can have an on-click attached to them. So I'm gonna put that on click on there. And then we also need to use the voters array to update the number here. So previously where it's had three hard coded instead. We're going to use voters.length So it's gone back to zero which is good and if we click on this button. It will increase every time we click nice. But the avatars along the bottom are still staying is three that's because they're still hard coded here. So instead of this hard coding what we want to do is map through our voters and each time. We get a voter we want to return an avatar. Now we've got three when we click it. We've got four five and as well on these avatars, they need to get our photo from use a profile. So I'm gonna pass in to this we're gonna say it's gonna take in a photo URL but go to URL again. This could be undefined. So just to keep typescript happy. Let's set this to an empty string Avatar at the moment doesn't take in photo URL, but because it is just a function that we've copy pasted from the code generator that takes in props. I'm gonna extend these props. And say it takes in a photo URL, which is a string. In the design on this component, we can see that it's got an image fill here, which is my very nice little Stickman drawing. and this image fill translates to hear in the properties and it expects a URL as the source so we can just pass that props. fair to URL and as the source and there I am and we no longer need the horrible red border. We can go back to a stylish White. And if I keep boating there's more and more and more of me. And we've got a working widget we can add loads more to it if we want. So for example, like I said before Avatar component because it takes in props of the type of its top level frame in this case, which is just a frame we could add an on-click to this Avatar. So when we click on it, I'm removed from the voters. I actually made a remove function earlier. So you wouldn't have to painfully watch me go through how to do a splice on an array. If I add this remove here. We don't even need to add an extra prop to Avatar. We can just pass it straight in as an on click if I spell it, right. It should remove the vote. It does need to take in an index because it's removing something at a certain index of the array. So we'll just have to update our map. To also pass along the index. now doesn't happen straight when I click on my Avatar it will delete me. So if I accidentally vote too many times I can remove some votes again. Nice, and I promised at the start that we'd go through a bit how this widget code generator works. It is written as a figma plugin. So it's running in an iframe in a sandbox with a runtime a javascripty runtime given to it by figma. And similarly to the widgets. This is using the public figma plugin API. Um, so there's a whole website full of API reference and everything you'd want here. It's all documented and just waiting for you to build your own plugins with it. It can both read from and write to a figma file and like the widgets. It uses this figma global object that's provided at runtime for you to access. everything on the file But we're not going to go through all of this API documentation together. You can do that in your own time. If you want what I'm gonna show you is something fun. That if we open the console. in the figma electron app and get rid of all of the information. It says at the moment what we can do is type figma and get access to this global figma object here. So we've got loads of stuff. We've got metadata like the active users. That will be me. We've got functions to create things. We've got functions to access like all the Styles in a file or the components or the images the world is your oyster, really? If we use one of them we can say figma create rectangle. Rectangle in our file we can say figma create ellipse. It's created an ellipse and then we can also inspect these things in the file. So if we select this and then say figma Current page selection zero this is one I've done before selection is an array. So we just want to access the first thing. We can. Inspect all of this. So anything that you can access in the figma graphical user interface like the auto layout information the spacing the width the fill. The children we can get all of that via the plug-in API. So if we go into children we can see it's got the frame node the rectangle node in another frame node and drill down. Right to the bottom in there. And you are probably starting to join the Dots here between the information given to us by this plugin API and the generated widget code. It really is that simple that basically we have taken the properties given to us by the plugin API. We've changed some of the names to make them a bit more react like so for example Clips content false has been converted to overflow somewhere. Yeah, overflow visible Clips content false. We've got rid of any defaults mapped them to use the correct tag. So if it's a frame using Auto layout, we've mapped it to Auto layout. And then added. a HTML front end and created a plugin one thing that is potentially interesting is instances. So like we spoke about before with avatar having its own function. And not being defined in line if we look at frame 6 here. This is an instance. And this will come through as an instance node. And have a main component on it. And which is how we got the name of the thing to use for its instance tag. So main component and it is an instance of Avatar. Then what happens? From this figment design once we've generated the declarative component code. What we've got here when it's run as a widget in the the widget runtime will basically map it back to a canvas node back to something like we saw in the plugin API which is why we can get a nice one-to-one mapping on things like gradients or svgs or things that otherwise could be quite tricky. And this is also why widgets aren't just for fig Jam. You can also run them in the design file. widgets development simple vote here is our simple vote. And I can interact with it here in the design file. And it looks exactly the same. Cool. So yeah, this widget code generator. Like I said before is available on community if you want to use it and thanks for listening. If you enjoyed it, please please go ahead make your own widgets make your own plugins share them with us and reach out to me on Twitter if you've got any questions, thank you, everyone.