How to export presentations from Figma to PDF using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to export your collaborative presentation slide designs from Figma into a PDF pitch deck or slide deck.

To do that, we just need to install a Figma plugin called “Pitchdeck” and if you haven’t already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to “Community” or “plugins and search for the term “Pitchdeck”; underneath the plugins tab you’ll see a result pop-up that is called “Pitchdeck Presentation Studio”. If you haven’t already installed it, you can go over to the right hand side where you’ll see an “install” button, and if you click on that install button it’ll change to look something like mine, where it’s got a little checkmark and says “installed” next to it; once it looks like that, then we’re ready to go back to our project and export these collaborative presentation designs from Figma to PDF.

Okay, I’m just using a design that I made up for Dieter Rams’ “Ten principles for good design”. All I’ve done here is create a whole bunch of frames, currently at 1920 by 1080 resolution, but you can make those whatever you want; and what I’m just going to do is run the Figma plugin that we just installed. If you go to right click and then go to “plugins” and then just go down to “Pitchdeck Presentation Studio” and click on that, that’s just going to fire up the Figma plugin that we just installed a moment ago, and what it’s doing now is; it’s looking through all of our frames and it’s essentially converting those into our slides; Pitchdeck is going to interpret each frame as a single slide; whatever you’ve got at your top level of the page in terms of frames, that is what Pitchdeck is going to be looking for and treating each of those frames as a single slide.

Now that we’ve got it loaded up, you can see on the left here that we’ve got 11 slides loaded in that matches up exactly with what we would expect to see in our design; we’ve got the “ten principles” plus the intro, and the first thing you might notice is these frames are actually in a different order; the ones that we can see in the plugin and the reason for that is when you copy and paste frames in Figma when you’re designing something, like when I was designing this deck, whenever I was happy with the first frame what I would do is I get the layout right, and then I would copy and paste the frame, and it would put it next to the existing frame (which is what I wanted), but what it also does is every time I paste a frame in, it incrementally adds a new frame above the one that I just created; and instead of going from top to bottom, Figma orders the frames from bottom to top.

Knowing that’s probably going to be the case for you as well, I made sure that the Pitchdeck plugin by default will simply reverse the frame order as the initial load order, hopefully just to make it a bit easier for you designing your deck. However, if you haven’t done it that way or if you just simply want to reorder the deck, you can do that by clicking and dragging on any of these little handles on the left here next to any of these slides, and you can see there I’ve just dragged that up to the top and then I let go, and that’ll reorder the frame for me.

I’ll give you an example of exporting from Figma to PDF and then I’ll reorder the frames and show you what that looks like if I want to save it out again. Just so you can get a bit of an idea of what that looks like; to export this slide deck from Figma to a PDF file, all we need to do is go over to the top here where we’ve got our formats and where it says “Pitchdeck URL”, I’m just going to click on that and you can see we’ve got a few different formats here we’ve got a “Pitchdeck URL”, which is the default format, and then underneath the static group we’ve got “PDF file”, “PowerPoint file”, “Keynote file”, and of course for this presentation of this tutorial we just want to select “PDF file”.

I think it’s just worth touching on, you’ve probably noticed that these slides are animating, and the reason for that is over here in the right-hand side we do have access to all the elements inside of our frames inside of our slides and we can actually apply animations to each of those; I’ve already done that and Pitchdeck has saved those animation settings for me. However, because we’re exporting to a PDF file, PDF does not support any sort of animation; it’s totally flat. Exporting this deck to a PDF just means we probably want to send it to either a stakeholder or email it to somebody, or maybe get somebody to review the deck content itself.

There’s a variety of reasons why you might want a PDF deck, or just ease of use, but it’s worth noting that these animations only get applied to the “Pitchdeck URL” export format; and I won’t be covering that in this Figma tutorial, but if you are interested in that, I’ve got another Figma tutorial up on our YouTube channel which goes for about half an hour and it does a really deep dive into exactly how those all this animation stuff works; and then it shows you how to export that to a presentation URL and then it gives you a complete demo of what that actually looks like when you export it; you can do all sorts of cool things, like use your phone as a remote control, you can use laser pointers, you get your your slide notes in there, it’s pretty neat; but for this tutorial I’m just going to show you how to export your slide deck from Figma to PDF; so let’s do that now.

I’ve selected the “PDF file” format and the buttons change to say “Export PDF”; I’m going to click on that. Now, what that is going to do is it’s going to take all these frames, it’s going to look at the order that we put them in, and it’s going to convert all of those into a single merged PDF deck with all of these frames in it, and this deck is going to be compressed as well; whereas a typical PDF from Figma can be quite large, we’re going to be exporting it through Pitchdeck which actually shrinks the size and keeps the quality.

We’ve we’ve got it ready now, it’s telling us that our PDF file is ready, we can save the generated PDF to the computer now; we’ve got a save dialog that’s just popped up, and by default it uses the document name; whatever you’ve called your Figma project, that will get auto populated in the save field with today’s date as well (date and time), just in case you’re exporting a bunch of these and need to timestamp them, of course you can remove that; if you wanted to remove that you can simply do that there. I’m just going to export that and I’ll just do “original” at the end just add a little bit of a version to it and then when you’re ready with that you can click on “Save”. I’m just going to save it to my desktop, if I go to my desktop now in the finder window, you can see here that it’s saved to my desktop as “Dieter Rams Slides Example Original dot PDF” and in this case I’m just going to use the spacebar to open that up, and that will open up the Mac preview for this PDF.

You can see here, it’s rendered it out beautifully, this is all vector text, we’ve got our image looking very nice, and I can click through that or slide through it and all of our slides are here as you’d expect. It’s looking really, really nice; we can of course also open that up in “preview” the full one, but for now I’m just going to use the kind of miniature iOS preview to navigate through; you can go up and down on that but of course you could also open this up full screen and use it as an actual presentation, too, which would be pretty neat.

I’m just going to minimize that again, and as mentioned, I’m going to relaunch the Pitchdeck Figma plugin and reorder those frames to see what that looks like. To relaunch the plugin you don’t need to right-click and go to “plugins” again; once you’ve run it once in a project, if you go to the right-hand side of the Figma window you’ll see a little column with a title called “Plugin”, and if you look for the little pancake icon with the word “Pitchdeck” next to it, and click on that; clicking on that will immediately re-run the Figma plugin without you having to go into the right-click menu again and browsing for that plugin, especially if you have a lot of Figma plugins that can take some time; that’s the easiest way to relaunch it is just on the side there.

Okay, it’s opened it back up. It’s currently reloading the frames, and it’s doing this because you may have made some changes to to your frames. If you have made changes to the frames while the plugin is already open, this little “refresh” icon here will actually also refresh these these frames and refresh the slides, and get a fresh copy of all the positioning, and all the images and text, but while it’s running, it’ll keep a sort of a cached version of it; so you don’t have to keep going back and forth and refreshing it every time just to make usual changes.

Now that we’ve tried exporting the deck with the default ordering, I’m just going to quickly show you how to change that ordering and get a different export order for your PDF deck in Figma. I’m going to leave the intro the same, this is a bit of a weird deck to reorder because the slides already have numbers on them, but let’s just say for argument’s sake that number two should actually be much further down and actually number nine or principle 9, you want to actually bring up to the top for some reason. We also want to bring principle 10 up to the top and and maybe even move the intro underneath that; now we’ve got some very strange ordering where seemingly the last slide is the first one followed by the intro and then kind of just goes a bit all over the place, but that’s the ordering that we want, maybe we’ve got a crazy art director who wants to go a bit a bit Pulp Fiction with it and rearrange all the slides. We can do that and you can see there it’s just really, really smooth and easy to reorder those frames, and as I said before that will not impact the ordering of your Figma file; that will remain intact, this is purely just to tell Pitchdeck what ordering you want these slides to be in, and that will get saved between the plugin running as well; if you set this order now and close the Figma plugin when you reopen it this order will stay the same; you don’t have to keep reordering it, it will remember that for you.

As before, to export this collaborative presentation from Figma to PDF we just need to go to the export format go down to “PDF file” click on that and “Export PDF” has been updated in the button; if we click on that button now, exactly the same as last time it’s going to go through those frames, convert them into slides merge them into a PDF, compress the PDF, and give you a really nice output file. Once it’s exports we can also have a look at that file size to compare that as well; I’m just going to leave the file name default this time to show you what that looks like; I’m just going to click “Save”, go back to finder and now you can see here we’ve got our new PDF file; where slide 10 for some reason is the first one because that’s the way we wanted it, followed by the intro and followed by 9, followed by 1, 3, 4, 5, 6, 7, 8 and then the very last one is 2 as we specified before.

That’s looking really good. As I mentioned briefly, the file size is 876 kilobytes; it’s less than less than a megabyte, and that is perfect for sending via an email or sending over Slack; it’s just a really lightweight PDF. As I mentioned, if you export that directly from Figma as a single PDF the file size will be much, much, much bigger; it’s just the way that Figma saves PDFs by default but they’ve been optimized in Pitchdeck to make it optimized for portability. Essentially, being able to send it using a very small file size of email or yes Slack or whatever you want to use, cloud storage to transfer that PDF. That’s our two PDFs, look at the original one with the original order and the modified order to show you how that works; but both looking really, really crisp and and really nice each time. I think if you need PDFs of your collaborative presentation deck then you’d be very happy with those.

This is just confirming that the PDF was saved we don’t need that anymore; so, we can close the plugin and that’s all there is to it; we we don’t need to do anything else, those PDFs are ready to go, and as seen before, the original Figma file is completely unchanged, it’s still the source of truth; the ordering is still the same, but we can of course rerun that plugin and see that ordering that we just saved. I’ll just do that now is kind of a last example and then we can we can part ways; you can try this yourself, once again it’s just loading those frames and turning them into slides inside of Pitchdeck, and once that loads we should see all of the layers that we just had in the ordering that we just specified before closing the Figma plugin. You can see here now, it’s defaulted to 10 being the first slide followed by 2 and 9; it’s kept our ordering from before, and again if we wanted to rearrange that, it’s very simple; just slide click and drag and slide and those will be rearranged for you; and there we go, that’s back to the original order. You could obviously export that again, but I’ve already got two copies of the PDF and and I’m very happy with them.

That’s it for today; if you are interested in exporting to these other formats that I mentioned before, or interested in the animations and how to create a an animated collaborative presentation from your deck, maybe after you’ve done the PDF version and you want to do a bit of a fancier one. please check out the other Figma tutorials that are on our YouTube channel and you’ll be able to find very in-depth Pitchdeck Figma plugin tutorials on how to do any of these other formats as well.

Thank you as always for watching, and we’ll be back soon with more Figma tutorials just like this one. I hope this has helped you with any problems that you’ve been having in your team, or if you’ve just been wondering how to export your slide decks from Figma to PDF; then I hope this has helped and and as always, working with Figma and being able to use it as a tool where everyone can use it, as opposed to other tools where it’s very siloed; it’s just awesome that you can create these collaborative presentations in Figma and export them to all these different presentation formats; you basically get that collaboration baked in by defaults and then the Pitchdeck Figma plugin will really help augment that collaborative presentation design work, and and serve as a way to get it out into multiple formats, like the PDF file we just we just had a look at.

I’ll leave you with that; until the next, time thank you again for watching, and we’ll speak to you again soon.