How to export Figma to Canva with one click using Convertify

Video Transcript

Today I’m going to be showing you a quick tutorial on how you can automatically export your designs from Figma to Canva using the Convertify Figma plugin. To get started, all you need to do is go to your Figma file, go down to the little actions icon down here at the bottom of the toolbar, and if you search for Convertify under the Figma plugins tab, if you click on the Convertify item, you can run that Figma plugin by either clicking on the run button down here, or I’d recommend clicking on the save icon next to that. That will let you run the Figma plugin from your Figma plugins list. I’ve already clicked on the save icon here. I’m just going to go to my Figma file, right-click anywhere, go down to plugins, and then go down to saved plugins, and click on Convertify. That’s just going to run the Figma plugin that we saved a second ago.

If you’re new to the Figma plugin, the way that it works is it basically gives you a bunch of export and import options. Today we’re just going to be focusing on the export from Figma options, and we’re going to select the export Figma to Canva option. With that option selected, all you need to do is either click on the export this page button, which will export all of the frames on your current page out for importing into Canva. Or if you only want one or two or just a handful, you can select the frames that you want and then you can click on the export selected frames button to just export those. Just to keep it simple, I’m going to export this whole page. I’m going to click on export this page, and that’s going to start the Canva conversion process.

This is basically going to take every layer from our Figma frames in Figma here, and it’s going to convert all of those out to a file that we can then import into Canva. Because Canva imports PSD files, this is actually generating a Canva-specific PSD file with a bunch of fixes and tweaks in it to make it ready for importing into Canva. Once that wraps up, depending on how many layers you’ve got and how many images you’ve got, it’s going to bundle that PSD file up. Once that finishes, it’s going to allow us to download it directly to our computer. You can see here it’s telling us that the file is ready. All we need to do is click on the download PSD for Canva button down here. Once you click on that, just go ahead and save it anywhere on your computer. I’m just going to save it to the desktop. Then you’ll have a PSD file on your desktop.

You can see here that we’ve now got this PSD file that we’ve just exported from the Figma plugin. All we need to do now is go to our browser and open up canva.com. If you sign into your own Canva account, you’ll just be on the homepage here. All you need to do is drag and drop that file that we just exported, the PSD file from your desktop, into the browser window while you’re on your Canva homepage. That’s going to automatically upload the item. You can see that it’s uploading the item into Canva now. Depending on your internet speed, this is going to take a few seconds or maybe even up to a minute. Okay, that’s just finished uploading now. You can see here we’ve got a little thumbnail preview. It’s uploaded the file correctly, and you can see that’s just been put in our uploads folder.

Now that we’ve got that uploaded, all we need to do is click on the item. You can rename it if you want, but I’m just going to click on the thumbnail here. That’s going to take me to the edit page. You can see here if I zoom in, this is all editable content. We can change this content. We can move it around because these are individual layers. This is going to allow us to edit our layers from Figma directly in the Canva editor. We’ve basically exported all of those layers from our Figma file into Canva, and now we can edit them in here if you need to get it into the Canva platform for any reason.

I’m going to show you one more example just to catch an edge case that you might run into. You notice down here that it says that Canva has an import limit. Canva supports PSD imports up to 300 megabytes in size. If it’s bigger than that, Canva basically won’t import the file. You’ll notice here that the one we exported is under that; it’s about 220 megabytes. But for larger pages or pages with larger image assets and things like that, like this one here, it’s going to come out above 300 megabytes. What we can do is run the Figma plugin again. I’m just going to right-click on the canvas, go down to plugins, and go down to saved plugins and click on Convertify. That’s just going to run the Figma plugin in this new Figma file here.

In this case, you can see that we’ve got an option down here, this toggle option after we’ve selected the export Figma to Canva option. We’ve got this option down here to split exports into separate PSD files. What this does is it basically takes each frame on your current Figma page and splits each of those out into their own PSD file rather than bundling them all together into a single file. I’m going to enable that option now, and I’m going to click on the export this page, and that’s going to export the page. But this time, as we just saw, we’ve enabled that toggle. It’s going to export the PSD files individually rather than bundling all the frames up into a single file.

You can see here it’s just bundling those last files. It’s packaging them up into a zip file. All we need to do this time is click on the download zip button. I’m just going to click on that now. Again, I’m just going to save that to my desktop. If I go down here, you’ll see that we’ve now got a zip file instead of a single PSD file. This contains all of our PSD files that we just exported. If we open up that folder, you can see here that there’s a PSD file for each of these frames. Each of these frames has been included in the file names, so you know which one’s which.

Now all we need to do is the same process. We just need to take whichever files we want to upload or import into Canva and go back to our homepage here. You can import multiple files at the same time just by selecting them all and dragging them into the browser. Today, I’m just going to keep it simple and drop in just the first one and show you what that looks like just for the sake of time. That’s just finished uploading the file, and you can see here again it’s swapped out the thumbnail. All we need to do again is just click on that thumbnail here. That’s going to take us to the Canva editor. You’ll notice again we’ve got individual layers. We can click on these layers. We can edit that content here. Again, the images and other layers are all editable as well.

That’s basically it. I just wanted to show you a quick tutorial on how you can export your Figma designs directly from Figma and import those into Canva. This is going to be a really easy way of doing it. It also gets around the issue of not being able to import Figma files natively, as Canva likes to suggest exporting the files as SVGs or just static images and doing it that way. This way allows you to keep all of the layers intact, and you don’t have to compromise with SVG paths and weird layer structures that aren’t going to really match up exactly with your Figma designs. Hopefully, that helps. If you’re using Canva and Figma and need to pull your assets out of Figma and into Canva for any reason, this is hopefully going to make that process a lot easier for you. We’ll leave it there for today. Thank you as always for watching, and we’ll be back with more Figma tutorials like this one very soon.