Building Figma’s Widget Code Generator

Hi, everyone. I hope you're having a lovely conference so far. My name is Jenny, and I'm an engineer at Figma. I'm based in Leeds, in the UK, so for 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 FigJam widget and then talk about how it was made.

On my screen now, you can see FigJam. This is Figma's online collaborative whiteboard tool where I can do things like add a post-it note, I can do some drawing, most importantly for this talk, I can add a widget. There we go. 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 FigJam files as fun and as flexible as possible, there is a public widget API, a component-based API, quite similar to React, which allows you to write your own widgets. And that's what we're going to do now.

So I've got, if we go into Figma 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 voted. So, and then also I've got a code editor on the other side and this is the code for what my widget project looks like. Again, it's super simple. I'm going to write all of my code in 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, npm run watch, it should start my widget running, put all its compiled code into code.js, and if I go back into FigJam, 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 the widget function is returning. And I can add some exclamation marks to this and they'll update in real time. So, hopefully this widget code is quite familiar to you. It looks just like React using JSX components and some specific Figma layout tags.

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 our biannual maker 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 a layout that looks pretty similar to the layout of the layers in Figma, and we can copy all of that and paste it into our text editor. It's complaining about avatar, so we'll just comment that out and come back to it in a minute. But 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, we'll 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 has probably got something to do with the thing that I just commented out.

So if we take this Simple Vote component and then use it inside our main widget code, we'll 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 has 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, frames 6, 7 and 8, these are all instances of a component called avatar, and instead of doing this inline 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 FigJam again, if 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 use state, we're going to say you 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. And then we want to update this voters array when someone clicks on the button. I'm going to make an onclick function. And when they click, we want to get your profile as the person who's voted, because that's going to let us get your profile photo. And to do that, we can say voter is Figma.CurrentUser. And Figma here is a global object that is provided in the widget run time 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 voter. I know that this voter can sometimes be null. It probably won't be, but just to protect against that, I'm going to say if we don't have a photo, voter, don't do anything. And if we do have a voter, we're going to set voters, get our original list, and add a new voter to the list. And our OnClick 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 VoteButton. And all of these tags can have an OnClick attached to them. So I'm going to put that OnClick 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 as 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 a photo from a user profile. So I'm going to pass it to this. We're going to say it's going to take in a photo URL, but a photo 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 going to 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 here in the properties and it expects a URL as the source. So we can just pass that props photo URL in 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 voting, 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, our 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 vote 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. And now it 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. 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 going to 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. 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 all the styles in a file, all the components, all the images. The world is your oyster really. If we use one of them, we can say Figma create rectangle and it's created a 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 0, 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 plugin API. So if we go into children, we can see it's got the frame node, the rectangle node, and 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.