React Advanced

React Advanced Conference 2022

Jenny Lea

<p>Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.</p><p> by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a></p>

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 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 and most importantly for this talk I can add a widget. 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. 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 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 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 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, go back to BigJam, 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, frame six, seven, and eight, 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 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. And then we want to update this voters array when someone clicks on the button. I'm going to make an on click 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 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 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 our new voter to the list. And our on 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 going to 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 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 our photo from user profile. So I'm going to pass in to this. We're going to say it's going to take in a photo URL. 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. 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 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 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 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. 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 six here, this is an instance. And this will come through as an instance node and have a main component on it. Main component, 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. And then what happens from this Figma design once we've generated the declarative component code, what we've got here, when it's run as a widget in the widget runtime, we'll 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 FigJam. 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 our 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.
