How to convert Figma Components to Sketch Symbols using Convertify

Video Transcript

Today I’m going to be showing you how to export your designs from Figma to Sketch, including all of your Figma components, which will be converted to Sketch symbols.

To get started, we just have to go to the Figma Community and install a Figma plugin called Convertify. If you just search for the word “Convertify”, and under the “Plugins” tab you’ll see Convertify pop-up; if you just click on the “Install” button on the right-hand side, you’ll be ready to go.

I’m just using a simple design that I’ve duplicated from the Figma Community; it’s got a bunch of components in it, a bunch of text styles, a bunch of color styles, and we’re going to see what this looks like when we convert it from Figma to Sketch with those components. To run the Figma plugin you just right-click anywhere, go down to “Plugins” and click on “Convertify”. That’s just going to open up the Figma plugin we just installed.

By default, the design won’t get converted with all of the pigment components as Sketch symbols, it will convert them as regular groups and frames. To enable this feature you just have to click on the little settings icon next to the Sketch button and open that up; and you’ll see at the top there’s a toggle called “Convert Figma components to Sketch symbols”, and it’s currently in BETA. If you enable that toggle, that’s going to make sure that your Figma components actually get converted into Sketch symbols rather than just plain grouped layers and things like that. It’s worth noting that while this is still a BETA feature some of the instance overrides might actually mean it’s less visually accurate, but for almost all cases it’s going to work really well.

I’m just going to close that off now that I’ve enabled that setting. I’m going to close it, then all we need to do is click on the button that says “Convert to Sketch”; I’ve just clicked on that and it’s running through all of my pages now and converting all of those pages from Figma into a Sketch file, it’s going through layer by layer and doing that. This of course depends on how many layers your Figma file has or each page has; for example, this one’s taking a bit longer than the first two because it’s got almost 3,000 layers. You can see here it’s processing each layer fairly quickly, and once that finishes up we’ll be able to download this file to our computer open it up in Sketch, and then we can take a look at what it looks like with all those components converted. It’s just finishing up the final page now, and the final thing it’s going to do, considering we toggled the option, is now it’s just going through and converting all of the Figma components to Sketch symbols; those Figma components, that’s the last step that it does.

Now it’s just packaging up the Sketch file with all of our assets, and it’s ready to download. All we need to do is click on the “Download Sketch File” button and save that to your computer. I’m just going to save it to my desktop and click “Save”, and if I double click on that Sketch file on my desktop, that’s going to open up Sketch and hopefully load up our file that we just converted. There we go, I’ll just resize the Sketch window so we can see what’s going on. This is our converted Sketch file that we just exported from Figma, and you can see all of our layers are here, all of our pages are here, we’ve got our assets page, UI design page, all looking really good.

Because we enabled the “Covert Figma components to Sketch symbols” option, we also have a brand new page which wasn’t in the Figma file called “Symbols”. If you go on the symbols page, you’ll see here that it’s actually exported every single Figma component from the Figma file into the Sketch symbols page, and each of those are there. If we zoom out, we’ll be able to see quite a lot of symbols on the page. That’s quite a lot there, so that’s all the components and their variants. The cool thing about this is we can now use these, or they are already being used in our designs. If we jump into one of these frames; for example, if we check out some of these buttons, I’m just going to open up this frame, and you can see on the left here this is actually a symbol. These buttons are symbols that are being used, as opposed to regular groups; the cool thing about that is we can actually change these styles globally and actually update them across the board.

We can go to our symbols panel here, and you can see all the symbols that are looking good; we can also go to things like colors and text styles. For example, I could change something like this default green and I could make it pink, for example. I’m going to change a few of these so it’ll be a lighter one. I’ll just change that; I’ve just changed those primary colors, and if we jump back to our design you can see here that the colors that were being used on those components have now all been updated across the board. We’re able to update that in one spot and because these are all components using the global colors, we’re able to change those very easily.

The other thing that we could do is we can actually change the button designs themselves. If we go to these buttons; we’ve got a few different styles here, but what I can do is I can actually open up these and I can do something like remove that border radius. We can open up these, remove the border radius again, and I’m just going to do this is an example so you can see what it looks like. There we go, you can see here the buttons now don’t have a border radius because we just changed the border radius in the Sketch symbols page. That’s just an example of one way you can actually edit the symbols now that they’ve been exported from Figma components into Sketch symbols, and you can update your design in one go.

That should make it a lot easier for maintaining a larger design or just more design system based design; if you do need to do, that feel free to use that feature that we just went through in the Figma plugin and this should make it a little bit easier, as I said, for those much bigger files. Please know, this is a BETA feature, so if you are experiencing some issues, feel free to get in touch. The Figma plugin is being updated to to iron out some of those issues, but if you are noticing that it’s just for whatever reason not looking as accurate as it needs to be, feel free to either manually update the those discrepancies in Sketch, or you can actually just uncheck the “Convert Figma components to Sketch symbols” toggle, and that will export the file in the default way, without actually including the native components.

That’s the whole Figma tutorial for today, I just wanted to run through this brand new feature with you and show you how to convert those Figma components into Sketch files when you export your designs. Thank you for watching, and we’ll be back very soon with more Figma tutorials just like this one.