Video transcript
26-minute video ·
Today I’m going to be showing you how to convert your designs from Figma to Sketch files using a Figma plugin called Convertify.
To use Convertify, we just need to install it from the Figma plugin directory. If you haven’t already done so, to do that we can just go up to our little Figma icon in the top left of the app and click on that, and then if you go down to “Community” or “Plugins”, it’s probably just easiest to search for the word “Convertify”. If you search for that you’ll see a result pop-up called “Convertify Figma to Sketch”. I’ve already got it installed, that’s why I’ve got a little checkbox here with the word “installed” next to it, but yours might just say “install” and in that case you want to go ahead and click on the button on the right hand side and wait for it to say “installed”, then you’ll be ready to go. Now that we’ve got the Convertify Figma plugin installed, I can switch back into my Figma project.
I’ve got a few projects that I’m going to go through just to show you what it looks like to convert different types of files; for now I’m just going to use this “Apple UI Kit” design; and the first thing we need to do is just right click anywhere go down to “Plugins” and then click on “Convertify Figma to Sketch”, and that’s going to fire up the Figma plugin we just installed a moment ago. Once it loads you’ll see that the interface is very simple, there’s only a few things going on here, the first one is the page name; you can see at the top it’s got the word “Cover Page” which correlates to the page that I’m currently on, if I were to change the page that I’m on, you’ll notice that the page name changes in the Figma plugin as well; it responds to whatever the page is currently being selected. The second thing you’ll notice is that we’ve got a little time estimate here; it’s estimating that on this page it’s going to take roughly 14 seconds to convert 557 layers, and that estimate will change again dynamically based on what page you select; if there’s more layers typically it’ll take longer to convert and if there’s less it’ll be much quicker; in this case I’m just going to use the cover page and it’s telling us it should take roughly 14 seconds.
The only thing to do here is click on the button that says “Convert to Sketch”, and as you can see with the icon it’s telling us that it’s going to convert our design from Figma to a Sketch file for us. I’m going to go ahead and click on that “Convert to Sketch” button now, and you can see here it’s telling us that it’s converting, we can see the little animation happening implying that the layers are currently being processed, and now it’s bundling our Sketch file, packaging that up for us, and there we go. It’s giving us a little download prompt, and by default it will name it whatever your Figma file is called and then in brackets it will add the page name that you’ve selected and today’s date as well; you can of course rename this if you want to, but in my case I’m just going to leave it as the default and save it to my desktop. Just click “Save”, and once again we can see the confirmation message is just telling us that the Sketch file is ready and telling us that we can download it. Now that I’ve downloaded it, I’m just going to go to my desktop and I can see here that it has indeed saved it to my desktop with the file name. We can also see here that there’s a file type of a “Sketch drawing”; which is a dot Sketch file.
Now that I’ve got that saved, I can just double click on that and that will open it up for me in Sketch. Here we go, I’ve got Sketch open, and you can see it’s converted our design from Figma as we’d expect. If I put those side by side just to make it a little bit easier for you to see, I’ll close off the Figma plugin and you can see if we line these up, it has converted them just as we’d expect from Figma. This is all editable text, so if we wanted to edit this layer, you can edit that text and that is all as you’d expect. It’s now saying “Sketch from Figma”, and I’m just going to update that.
You can see down here we’ve got these these little groups, these are being saved as Sketch groups, so I can drag those around and that’ll all move together. If I expand my layers you can see if we compare it to Figma, all the layers have been carried over; we can see “22nd of June” and “22nd of June”, and all the layers are in order and all as you’d expect. Same thing with images, layers have all been exported with images; we’ve got images, we’ve got an image fill over here, we’ve got shadows, we can turn those on and off just as you’d expect, and it’s really carrying over every layer one for one from Figma itself. That’s really cool! That was a one-click process; very, very quick, as you saw. This file only has about 500 layers, so that’s why it was it was fairly quick, but now I’m just going to go through a couple of other file types to show you what they look like as well. I’ll close off this file for the time being and just make Figma a little bit bigger once again, and I’m going to switch over to a much simpler file; this one is just a three frame file, it’s three very simple frames and I just want to show you the speed of of it converting a very simple file.
I’m just going to click on the “Convertify” icon, now that we’ve already run it once in this file, you’ll see it pop up on the right hand side in Figma; you can just click on the little “Convertify” icon and you’ll see the little subtitle that says “Convert page to Sketch”, just telling you what it’s going to be doing. That’s just a really quick way of firing up the Figma plugin again. Once again, it’s just giving us the page name; we can confirm that it’s going to convert the “Master Page” and because this file only has 57 layers, it’s telling us it’s going to take about one second. We can try that out once again just by clicking on the “Convert to Sketch” button, and it’s fairly accurate, as it took literally one second to convert that Figma design. That’s just an idea of how fast it can actually export files if you if you have a really small file; it’s very quick.
I can open that one up just to see what it looks like, and that’s opened it up for us in Sketch. The thing I wanted to call out in this file is that because I didn’t have the font installed on my computer, Sketch is telling me up in the top right hand corner here that it’s got missing fonts; if I click on that little “Missing Fonts” button, it’s just going to come up with a little drop down saying these three fonts couldn’t be found on the system. We can manually replace them, I can do that now, and I think that the ones used in the design were slightly different versions from the one that I had on my computer; if that happens to you, this is all you have to do, you just have to go through the missing fonts by clicking on that button in the top right and then once you’ve selected the replacements, just click on the “Confirm” button in the Sketch dialog, and you can see here it’s swapped those fonts out and now we’re looking very similar (or exactly the same, rather) to what we can see in our Figma file and once again these are now editable; I can update that textto say “Figma to Sketch” and that will update for me; I’ll just bring that out a little bit more, there we go. As before, all of the layers have been carried over, we’ve got our vector layers; these are these are fully carried over from Figma and I can move those around, obviously. I just wanted to show you what the font the missing fonts prompt would look like and show you how to replace those fonts if you do run into that issue, and also just show you the speed at which it can convert files with less layers.
Okay, now that we’ve done Figma file number two, I just wanted to show you another file; this is a little bit of a different type of file, this is one with multiple frames, multiple layers, multiple components being used and I just wanted to show you what it looks like to convert a file like this. Once again, we can go to the right hand column click on Convertify; I’ll fire that up once again and the thing that I wanted to demo in this file is if you are working in a much larger file with heaps of screens and heaps of things going on and you want to send this to somebody; it’s got an exact replica of what they would normally see when they open it up in Figma. I’ve just purposefully zoomed in on this exact spot here, I can even zoom in a little bit more if I wanted to or I could just zoom to fit and I just wanted to show you what it looks like when it replicates the zoom level over.
If we click on “Convert to Sketch”, I’ll just leave this running in the background, this one has over 2,000 layers; it’s going to take more like 54 seconds and the little note here just says it may actually be faster or slower depending on the number of nested layers or large images that the file has. You can see here it’s actually taken less than 54 seconds in this case but if you do have really big images that can slow down the conversion a little bit; I’m just going to save that and I’m not going to move the zoom level or the the bounds scroll level in Figma, and I’m just going to show you what that looks like when I open up the Sketch file for the very first time. If I double click on this and open it up you can see here that it’s exactly mirrored the zoom level and it’s exactly mirrored the positioning of where I had the the Figma view when I when I converted it; you can see here if we compare them we’ve got 22 zoom in Sketch and we’ve got a 22 zoom in Figma. Converting it from Figma to Sketch with that zoom level and with that positioning; in my my case I clicked on the “zoom to fit” function which centered everything; that means that when I send this file to another designer they’re going to have exactly the same overview exactly the same positioning and zoom that I wanted to have in Figma. Obviously because Figma is a multiplayer app where you can have different designers at the same time this this isn’t an issue in Figma, but I just wanted to show you how it does actually carry over that zoom. I if I were to do another example, and if I was working on this particular part of the the app or the design if I run the Convertify Figma plugin once more, and now I’ve got it zoomed in at 100, and I’ve got it focused on this little profile mockup with this little modal that should open it up in Sketch zoomed in at 100 and focus on this exact same artboard.
The other thing to note is it tells you down here that Figma will freeze up during this phase of the conversion where it’s going through all of the layers; I just want to point that out as well in case you’re wondering why the UI is unresponsive while the the Figma plugin is converting; that’s totally normal. I’ve just re-exported this one, and again if I double click on this and open it in Sketch, we should see a different zoom level and a different scroll level; we can see here if I put those side by side it has replicated that zoom level and it’s replicated the exact point where I scrolled to in the Figma design. That’s just a neat feature that the Figma plugin offers and it’s just a nice way of being able to zoom to fit everything or zoom in on a particular part in your Figma design before you actually package it up for another designer. In my case, I really like using the “zoom to fit” function and just making it show everything, just so whoever’s receiving that Sketch file will get a clear overview of what the file contains, but again, that choice is is totally up to you.
The next thing I want to show is a much larger file; this is a design system and this is one of the biggest ones that I’m aware of. This is the “Ant Design System”, it’s an open source design system and I’m just going to show you what it looks like to convert a file of this this size, because there’s quite a lot going on here; there’s quite a lot of components, there’s quite a lot of layers and I just wanted to show you what that looks like in terms of speed, but also what that looked like in terms of detail. I’m just going to convert it now because it’s going to take about three to four minutes, but this one has almost 10,000 layers, so this is a fairly large file. I’m just going to start converting this from Figma to Sketch now by clicking on the “Convert to Sketch” button, and once again you’ll see down here it’s telling us that it’s being converted, it’s converting the page. I just touched on this a moment ago, but it does let you know that Figma will freeze and that’s totally normal; for example if I try and click on anything Figma, is completely unresponsive and just while this is converting, I’ll touch on why that is happening. The reason why I can’t move the Figma plugin around and I can’t keep working while the Figma plugin is running is because the functions that the plugin is doing behind the scenes, using the Figma Plugin API, by necessity calling these Figma Plugin APIs basically hijacks the main thread of Figma; while the Figma plugin is doing intensive querying and intensive work behind the scenes, querying your Figma design data, Figma basically diverts all of the processing power to that that plugin process; that’s the reason why the UI completely locks up; it basically doesn’t do both things at the same time. Normally, this would be fine because a lot of Figma plugin functions are very quick or don’t do very much, but because this Figma plugin literally trawls through every single layer, in this case almost 10,000 layers, and is querying image data it’s manipulating data behind the scenes, it’s doing a lot of intensive work in order to generate these Sketch files from Figma and translate all those Figma layers into Sketch layers, converting all those layers, so that’s why it freezes the IU, basically. That’s a long a long way to say: it’s totally normal and you don’t have to panic or wonder if it’s broken; that’s also the reason why it’s giving you a time estimate there, because if you’re just seeing that kind of spinning around in circles you’re wondering “it is it actually going to finish or not?”, and as we saw in the last two, this isn’t really an issue when you have smaller files, but again that’s why I wanted to show you in real time what it looks like to convert a file with 10,000 layers.
Okay, now that the conversion process is done, you can see that it’s now up to the step of bundling the Sketch file, which means that the UI is responsive once again because the processing part is finished. It’s literally now just packaging up a Sketch file with all of the image assets, all of the layer assets, and all of the files for us. It’s just finished that, and you can see here it’s giving us the choice to save it with the project name and the page name; again I’m just going to opt-in for the default file name and save that to my desktop. I’ll close off the Figma plugin, and I’ll just make the window a little bit smaller so we can compare that. If I jump back to my desktop, you can see here it’s converted the Ant Design System; I’m going to double click on that file let Sketch open it up for us, and there we go. If I put those side by side once again, you can see that the positioning has stayed the same as we saw in the last segment and it’s basically converted all of our artboards with all the names that we’d expect, “Navigation”, “Data Entry” and I’ll give you a quick overview of the full file, because it’s quite large; but you can see that it has basically gone through and converted all of those. If I just zoom in a little bit, you can see what that looks like; if we jump to same one in Figma and try to compare those a little bit, now we’re basically looking at the same sections and you can see that it’s gone ahead and converted all those layers. Once again, I can jump in here and edit these files, edit these layers, that’s my Figma to Sketch text layer; I can edit that of course and these groups I can move them around as you’d expect. So, that’s what it looks like to convert a Figma file with 10,000 layers over to Sketch in a few minutes. Once again, doing this manually would be a project that would take days of time ,if not longer in this case, to convert all of these files and designs from Figma to Sketch manually. I’ve seen it happen before with designers I used to work with, where they had to do this for certain clients and it took days, if not weeks of time to get it done if you do it manually. So, that’s what it looks like to convert a really big file from Figma to Sketch..
The final one I want to show you is just another sort of wireframing kit, or design system kit; the reason I want to show this one is because there’s quite a lot of vectors in there, and I just wanted to emphasize what that looks like when they get carried over, too. If I just click on the “Convertify” icon again, I’ll close off my Sketch file and make Figma a little bit bigger. Okay, again,this one has about 7,000 layers, so I’m just going to convert that from Figma to Sketch now, as it’s going to take roughly three minutes. Again, it depends on how many nested layers there are and how many large images there are, I don’t think this one has heaps of large images, so the bundling time should be a little bit faster, but the number of layers and the number of nested layers is really what determines this particular phase of the conversion from Figma to Sketch, when it’s going through all of the Figma layers and extracting the data from them translating that into the Sketch format; that’s really where the intensive stuff happens and that’s where it’s trawling through all of those layers and sub layers in order to to get all those Sketch layers the way that they should be. Once again, this is just going to freeze up the UI for a little bit, it’s nothing to to worry about or panic about, it will eventually finish, so you can just leave it for for a couple of minutes and that’ll work. Once this converts, I’m going to show you a couple of things; the one thing that Sketch doesn’t support is colored backgrounds, so in our case here we’ve got a green background on the the canvas, but unfortunately Sketch does not support that. We’ll see in a minute that it looks a little bit different just because of that, but besides that it should convert everything else. There’s also a few other things that Sketch doesn’t support which Convertify kind of emulates and makes up for; things like frames, where you can clip frame content, that’s not actually supported in Sketch groups, so Convertify does some things behind the scenes to emulate that visually and make sure that it still looks the same.
Okay, we’ve just finished converting this wireframe kit, so if I close off my Figma plugin again, jump to my desktop and open up the wireframe kit file we just exported from Figma to Sketch, we can see that the Sketch file as I mentioned does not have a green canvas background because that’s not a supported feature in Sketch, but everything else has been carried over. Again, just before I converted, I just wanted to call out the vectors; all of the vector all of the vector assets or parts of the design have been carried over; things like these characters over here, we can see that they’re quite trendy at the moment, you’ve probably seen them in a bunch of places; if we just zoom in on those you can see here once again I’ve got missing fonts, and I’m not I’m not going to replace those this time, but if you do need to you can just click on the top right hand corner, and these particular fonts that were installed by the designer who did this design, I don’t have this font on my computer, that’s why it’s asking me to to replace them now that I actually want to be able to edit them, but I just did want to call out the the vectors mainly, rather than the typography anyway. You can see here that it’s converted those vectors, and they’re looking as we’d expect from Figma, they’ve all been carried over to Sketch, and that’s really nice. That was the the example for showing off some of the vector conversion; you can see here, it’s quite a big file as well, if we zoom out. All of the artboards have been converted from Figma to Sketch, and once again we haven’t had to recreate all of these layers’ you can see just how many layers there are by going through the number of artboards and the number of layers; it’s just crazy. Basically, we’ve just saved potentially days or weeks worth of work if we did need to convert this Figma design over to Sketch manually.
Okay, we’ve converted a number of files now, and I think that’s a really good glimpse at what the Figma plugin does, what it looks like to convert your designs from Figma to Sketch files, and also to show you the the variance in speed, the variance in performance and show you what those different types of layers look like; text layers, group layers, vector layers all those sorts of things getting carried over from your designs from Figma to Sketch. I hope that that’s been a valuable Figma tutorial for anyone who’s been trying to convert their files from Figma to Sketch without using those weird workarounds where you have to “copy as SVG” over to Sketch and end up with this really awkward, non-editable, version of your design in Sketch. Well, you don’t have to do any of that here; as we’ve just seen we can get all of that benefit with real layers from Figma to Sketch automatically, so you don’t have to manually get your designers to do this, you can just run the Convertify Figma plugin let it do all of the work for you to get those real Sketch files that don’t have any weird SVG hacks or anything like that, and just get those real layers converted from Figma to Sketch.
Thank you as always for tuning in! I hope you found this Figma tutorial valuable and I hope that it’s something you’ll be able to take back to your team or try in your workplace if you’re needing to convert your designs from Figma to Sketch for some reason; Covertify is the only Figma coverter plugin that you can currently get to convert your designs from Figma to Sketch. Feel free to give it a try! You can install it today and give it a go on your own designs and see how it goes. Thank you as always for watching, and we’ll be back very soon with more Figma tutorials just like this one.
Pro Bundle