Video transcript
13-minute video ·
Today I’m going to be showing you how to export compressed PowerPoint files from Figma using a Figma plugin called Pitchdeck.
The first thing to do if you haven’t already done so, is go to the Figma plugins directory in Figma; you can do that by going to the top left corner clicking on the little Figma icon going down to “Community”, and then in the search bar if you type in the word “Pitchdeck” and click on the “Plugins” tab you’ll see a result pop up called “Pitchdeck Presentation Studio”, and on the right hand side you’ll see a button that says either “Install” or “Installed”; I’ve already clicked in the install button, that’s why mine says “Installed” with a little checkbox, but if yours just says “Install”, if you click on that button it’ll change to look like mine and once it says “Installed” with a little check mark on it then you’re ready to go.
Once you’ve installed the Pitchdeck Figma plugin, you can jump back into your project. In my case, I’m just using a very simple presentation deck design based on Dieter Rams 10 Principles for Good Design. The first thing we need to do is just right click anywhere on the page, go down to “Plugins”, and then go down to “Pitchdeck Presentation Studio” and click on that; and once you click on that you’ll see the Pitchdeck Figma plugin loading up your slides. What this is doing is it’s just going through all the slides on the left hand side that we can see all of our top level parent frames, and it’s treating each of those parent frames as a slide.
Now that it’s loaded, we can see if we go down the list, all of these slides here are matching up with the frames that we’ve got on the left side here; you can see “Principle 7”, “Principle 6”, “Intro”, those are all correlating to our layers on the left hand side here; in this video I’m not going to be showing you how to animate the slides or add speaker notes or do anything of that nature, I have some other videos on this YouTube channel if you’d like to see an in-depth Figma tutorial on how to do that, but for this Figma tutorial I’m just going to show you a new feature which is compression, and specifically image compression for exporting these slides as a PowerPoint file that’s going to be slightly smaller (or a lot smaller, hopefully) than what we’d usually see without any compression.
To export this presentation that we’ve already got set up, I’m already happy with all the layers, I’m happy with all of the ordering, I’m happy with the speaker notes that I’ve already got in place; all I want to do is just export this presentation to a file that I can use in PowerPoint Keynote or Google Slides, and the way I can do that is just by going up to the top right hand corner of the Figma plugin here and you can see a button called “Export Presentation”, I’m just going to click on that and what that does is it just brings out a little export panel that will let us export this presentation from Figma to a variety of formats. In the top of the presentation Figma plugin settings panel you can see that we’ve got this little option called “Select Presentation Format”, and if I click on that, you can see that there’s a few formats that I can choose from; the first one is the “Animated Web Presentation”, if you click on that, you’ll see that it’s the “Pitchdeck Presentation URL” format; this option will essentially upload this presentation to a web application, the Pitchdeck web application, and you’ll be able to present this presentation from your browser. Then we’ve got some “Presentation Apps” options; we’ve got PowerPoint, Keynote and Google Slides. Then there’s also a final one at the bottom just for a static export to a PDF file, but today we’re not going to be focusing on that one, we’re just going to be having a look at these middle ones here.
To export this presentation to PowerPoint, we just click on the “PowerPoint” option in the drop down, and you can see that changes here’ of course we could change that to “Keynote” or “Google Slides”, but in this case I’m just going to set it to “PowerPoint”. Okay, there’s a few options once we’ve selected “PowerPoint”; you can see here that we’ve got an “Image Quality” section; that’s the one we’re going to be focused on now and there’s a couple of settings here: the first one is an option to use the retina images; checking this option will export all of the images in your presentation at 2x, they’ll effectively be double the size but they’ll remain the same dimensions; you’ll get really sharp, really crisp images at the expense of the speed of the export, this does take a little bit longer to export because there’s twice as much image data that needs to be exported from Figma and included into PowerPoint, but you are going to get much sharper images at that slower speed. The other thing is the file size will be larger as well; because we’re exporting that at double the size the file size will be roughly double the size two, so for now I’m just going to turn that off.
The one I’m interested in for today is the second option which has just been added to the Figma plugin; this is a brand new feature which allows you to compress the images before you package up the PowerPoint file. If I click on that option, the “Compress Images” option, you can see here again it’s just indicating that this is going to be slightly slower to export, because normally with you with you exporting uncompressed images that’s just going straight from Figma into the PowerPoint file, this will add a middle step where it’ll export the image data from Figma but it’ll put it through a compression algorithm before it actually packages up your PowerPoint file; that’s why it’s going to be a little bit slower. Now that we’ve enabled that, it has enabled this slider as well; you can basically grab this little slider notch and drag that up and down, and you can see here it’s changing the quality number at the end of the little label there and it’s telling us that the highest setting is “Best Quality” and then it goes down all the way down to “Low Quality”, and then there’s sort of a middle ground here, too. What I’m just going to do is show you the difference between compression and and no compression with this export.
If I turn off the compression, I’m going to uncheck “Compress Images”, I’m going to click on “Export for PowerPoint”, and this is going to export my slides my presentation to PowerPoint without any image compression. You’ll get a sense of what that file size is going to be initially and then we’ll get a sense of how much we’ll save via image compression. That’s generated the PowerPoint file for me, so I can go ahead and click “Save”, and that’s just saved it to my desktop. I can close off the Figma plugin and jump to my desktop and you can see here it’s saved the file the PowerPoint file, and it’s 3.8 megabytes. I can open that up just to make sure that it’s that it’s all working well; that’s going to be opened up in Keynote now just to preview it, and you can see here it’s exported it as we’d expect we’ve got our images which have been exported to; that was saved at 3.8 megabytes.
Now let’s re-run the Figma plugin, and this time I’m going to enable image compression and we can see what kind of file size we get once we compress those images; again I’m going to click on “Export Presentation”, it’s remembered my settings from before; I’ve still got my PowerPoint option selected; I’ll leave that and this time I’m going to enable the “Image Compression” setting, and I can drag that up and down, of course, but in this case I’m just going to set it to about 70, which is sort of a middle ground for quality, and I’m going to click “Export to PowerPoint”. Once again, it’s doing the same thing, however this time as I mentioned before, we’re going to see it compress those images instead of just saving them directly to PowerPoint. That’s doing it right now, it’s compressing all the images… and now it’s finished. It doesn’t take too much longer, it really does depend on how many images you have, it also depends on if you’ve got a lot of transparent images, a lot of PNGs to compress, as that does take longer than JPGs as well, these are mostly JPG, so that’s why it’s quite quick, and there weren’t as many images as you might have in your presentation as well.
Now that we’ve we’ve exported that, you can see here that immediately there’s a file size difference; we’ve gone from 3.8 megabytes down to 2.4 megabytes, and again I can just open that up; I’ll open it up in Keynote just to preview it, and you can see here that the images are all there as would expect, and if you look really closely you can tell that there has been some compression applied, but again, it’s very difficult to tell. If you were viewing this on a projector or a huge screen for presenting this to people, you would not be able to tell the difference in quality.
I’m just going to do one more export and just reduce the quality again, and let’s have a look at what kind of file size we can get if we bring that quality slider down even further. So, one last time I’m just going to click the “Export” button, and I’m just going to drag this down to about 40, which is low but it’s not as low as it could be; maybe I’ll just go to 35 just to make it even lower, and once again I’m just going to click “Export for PowerPoint” to export our Figma slides into PowerPoint, and once again you’ll see it start to compress these images in a moment, and it shouldn’t take too much longer, it may actually even be quicker than last time. There we go, it’s just finished saving it; I’m going to save that to my desktop once again, and if I inspect that this time we’ve made it down to 2.3mb; it’s kind of a bit of diminishing returns with the lower quality, and that may be based on the kinds of images that I’m using as well, they’re fairly simple. I can tell a little bit more that these have been compressed, but they’re actually not too bad considering how low the compression quality was set.
That’s a rough idea of what the compression settings can do for your PowerPoint files; again, this is a very simple file and there’s really not heaps going on as far as images go, the images aren’t all that large, they’re not all that detailed, so if you’re using photos more similar to this one then you’re probably going to notice even more savings. This can be really handy if you need to send your PowerPoint files or your Keynote files via Slack or via email or something with sensitive file size limits, so adding compression can be a nice way of getting those file sizes down if you are dealing with larger decks or if you’re dealing with using the retina image option and enabling that.
That was just a quick Figma tutorial on how to add image compression to your PowerPoint files, or Keynote files, or Google Slides files from your Figma slides and that’s all I wanted to show you today; it’s just a quick one, but I hope that you get some benefit from it in your own workflow; give it a go and see what it’s like. Thank you, as always, for watching and we’ll be back soon with more Figma tutorials just like this.
Pro Bundle