Video transcript
6-minute video ·
Today I’m going to be showing you a quick tutorial on how to export your slides from Figma out to static JPG images or static PNG images from your Figma design files. Also from your Figma slides files as well. I’m going to show you both of those shortly.
To get started, all we need to do is go to our Figma file, go to the little actions icon at the bottom toolbar here, and then you just want to search for Pitchdeck. Under the Figma plugins tab, if you click on the Pitchdeck item, you can run the Figma plugin by either clicking on the save icon down here, or you can click on the run button over here, and that will run the Figma plugin.
Because I’ve already clicked on the save icon, I’m just going to go to my Figma canvas, right click anywhere, go down to Plugins, then go to Saved Plugins, and then I’m going to click on the Pitchdeck item. That’s going to run the Figma plugin we saved a second ago.
If you’re new to the Figma plugin, the way that it works is it basically treats any frames on your Figma file as slides, and then you can use the Figma plugin to construct a Pitchdeck presentation which you can then export to various formats. Today we’re going to be focusing on exporting your slides out to PNG images and JPG images.
If you click on the export button, you’ll notice that there’s a bunch of different formats we can export including a web presentation. You can export to PowerPoint, Keynote, and Google Slides or a PDF. But today we’re going to be focusing on this static option, and we’re just going to change this option to JPG images here.
After you’ve clicked on that, you can go ahead and click on the Export to JPG button. That’s going to run through and export all of the frames from your Figma slides as per their order in the Figma plugin. Once that’s ready, you can click on Download Your Zip File, and you can save that anywhere to your computer.
If you double click on that zip file and open up that folder, you’ll see that we’ve got all of our slides exported as JPGs. If we open these up, you’ll notice that these have been exported at 2x retina resolution. They’re going to stay super sharp. You can present those, make them full screen, and that’s going to look really, really sharp when you go to present that.
That’s in the JPG format. We can also export them to PNG if you need to use PNG format. Again, I’m just going up to the corner in the Figma plugin, the top right corner, and clicking on the blue export button. We’re going to change this one more time to PNG images instead, and I’m going to click on the Export to PNG button.
That’s again going to run through and export all of my slides to PNGs. These have some very light compression on them as well, just to make them slightly smaller than the native images that get exported from Figma. You’re going to get that really good quality-to-size ratio balance.
Once it finishes exporting, again we’re going to click on the Download Your Zip File button, save that again to our computer, and if we open up that zip file and open up the folder, you’ll see that this time we’ve got PNG files. These have all been automatically named so that when you run through them, they’re automatically going to be in the correct order. Again, we can open that up and you’ll see it’s very sharp. It’s a 2x retina resolution. Again, if you’re presenting this full screen just as JPG slides that you’re running through with your keyboard, that’s going to look really, really sharp.
That’s basically how you can do it. I said we’ll also look at the Figma Slides file. At the moment we’re just in a normal Figma design file. But if you are using the Figma Slides file, which is a different file format in Figma, you can also use that to create presentations using the Figma Slides format. Again, we can run the Figma plugin from here as well.
All you need to do is, again, you can either go down here to the actions item or, because we’ve already saved the Figma plugin, I’m just going to right click on my Figma Slides canvas. I’m going to go down to Plugins. You’ll see here under Recents we’ve got Pitchdeck, or we can go to Saved Figma Plugins and again click on the Pitchdeck item. That’s going to run the Figma plugin inside of our Figma Slides file as well.
You’ll notice the interface is the same. We’ve got all of our slides as expected, and this is going to use the ordering from the Figma Slides file. Compared to in the Figma design file, we can rearrange the ordering using this drop-down list here, and that’s going to rearrange the order in there. But for Figma Slides, because all of the ordering is done using the Figma Slides interface, it’s just going to mirror whatever we’ve already got in there. I just wanted to flag that really quickly.
Once you’ve finalized your slides in Figma Slides, we can do the exact same thing. We can go to the top right corner, click on the export button, and again we’re going to change the presentation export format to either JPG or PNG. I’m just going to use JPG for this one. Click on JPG images, then click on Export to JPG.
Once again, that’s going to go through all of our slides in our Figma Slides file. It’s going to zip those up, and we can click on the Download Your Zip File button. I’m just going to save that to my desktop. I’m going to unzip that file just by double clicking on it. If I open that up, you’ll see again we’ve got all of our slides exported in order using the JPG export.
If I open that up again, very sharp. It’s a 2x retina export. That’s going to look really good when you present it full screen or just send the images over for review or any other use case. It’s going to look really good and you’re not going to get any pixelation or anything like that.
I just wanted to run through that today to show you how to quickly export your slides from Figma design files and also Figma Slides files. If you want to really quickly export them out to static JPGs or static PNGs, this is a quick way of going about it. It’s going to zip those up for you. It’s perfect for sending via an email or sending via a Slack message or something like that if you want to get the raw slides out for someone to use or review in JPG or PNG format.
I’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.
Pro Bundle