Video transcript
12-minute video ·
Today, I’m going to be showing you how to export your collaborative presentation slide designs from Figma to PowerPoint; or to a PowerPoint file, I should say.
To do that, we need to install a Figma plugin called Pitchdeck. If you haven’t already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term “pitchdeck”, you’ll see a result called “Pitchdeck Presentation Studio” pop-up. I’ve already got it installed and that’s why I’ve got this little check mark here and it says “installed”, but if you don’t, this button on the right hand side will say “install”, and if you click on that it’ll change to look like mine, and once it does you’ll be ready to go.
Now we can switch back into our Figma project today I’m just using Figma file that I designed as a slide deck for Dieter Rams “Ten principles for good design” to a deck with eleven designs, and essentially I want to take these slides out of Figma and I want to create a PowerPoint presentation that I can use in Microsoft PowerPoint.
To do that, we can run the Figma plugin we just installed. If you right-click anywhere and go to “plugins” and then go down to “Pitchdeck Presentation Studio” and click on that, that is just going to fire up the Figma plugin we just installed the, Pitchdeck Figma plugin; and once it loads, you’ll be able to see all of the frames from your Figma file. All of these frames on the left here will get translated into slides inside of the Pitchdeck Figma plugin; it’s currently looking through all the frames, looking through all the layers, the text layers, and image layers, and it’s constructing them into slides that we’ll be able to use in just a moment.
Now that it’s loaded all of our slides, you can see here that the slides have been mirrored to our designs. If we click through here, you can see we’ve got all of our slides as we would expect from our designs above. In the left hand side, you can see that we’ve got a list of all of our layers and those are being mirrored from the Figma layers in the Figma layers panel on the left here; you can see here we’ve got “intro”, “principle one”, “principle two”, and that’s “intro”, “principle one”, principle two; but you’ll notice that the layer order has been exactly reversed, and the reason for that is (maybe this is just me), but when I’m designing things in Figma and when I was designing this collaborative presentation, I would design this slide for example, and when I was happy with that, I would copy/paste that slide or that frame, and Figma would put it right next to it and then I could just edit the content and keep the the layer pretty much as it is; but in Figma, when you paste, essentially the layers each layer on top of each other in a reverse order; whenever you paste something, the layer will be moved to the top of the layer’s order in the left-hand side here.
What Pitchdeck does is, it automatically reverses those layers by default and assumes that you’ve been copy pasting your frames; that means that the order is actually going from bottom to top in terms of this layer order here, and that’s why we’ve got the correct order that would expect here, however if that doesn’t suit you, what you can do is you can reorder these frames by clicking and dragging on the little “drag” icons next to any of the slides in the Pitchdeck Figma plugin. All I did there was just hover over the icon and then I’ll get a little grabbing icon, if I click that, holding the mouse, and then move it up or down I can rearrange these frames super easily and that does not impact anything that’s going on in the Figma file; this is just related to the plugin. Editing this layer order here won’t mess up your designs or change anything in the original design, it’ll just tell Pitchdeck that this is the order that you want these frames in; for now I’m just going to leave it as is, and keep the intro where it should be.
The other thing you’ll notice is this little preview section here; this is an exact one-for-one with our slides, and what it’s going to look like when it gets exported. The titles are up here; and the other thing to note is underneath the preview we’ve got this “speaker notes” section and this is just a text field, a text area and you can type in any content that you want there; you can put bullet points in there, you can put a little paragraph like this one, you can just put a little sentence, or just a note for yourself; and these are the notes that will not be shown to the audience and won’t be shown inside of the presentation content, these are just for you as a speaker or whoever is presenting this presentation; if you need to add them you can add different notes to every slide and those will be available to you once we export our collaborative presentation very shortly.
Now that I’m pretty happy with the speaker notes, I’m happy with the ordering, you’ll notice here that we’ve got these animations set on all of the layers; by default those set to “no animation”; you can see here we’ve got this “no animation” setting, those are all defaulted to no animation, but I’ve already applied some animations which get saved between opening the plugin; however for this particular Figma tutorial, because we’re going to be exporting to a PowerPoint file, these animations unfortunately don’t get brought across into PowerPoint. These are primarily used for if you’re uploading the presentation to the Pitchdeck URL; we can see here if we open up the export formats just in the top menu bar here by clicking on the select box we’ve got two groups we’ve got “animated” and underneath that is the Pitchdeck URL option, which we’ve got selected by default, and then we’ve got “static” format, we’ve got “PDF file”, “PowerPoint file” and “Keynote file”; that means that because it’s static, all of these animation settings do not get carried over to any of these static formats, they’ll only be carried over to the Pitchdeck URL format.
That’s just worth keeping in mind in case you’re wondering why you’ve animated these things but you’re not getting animations in your PDF file, PowerPoint or Keynote; these are just not supported in those formats because we’re using very specific and custom animations that will only work in a web-based environment, like the Pitchdeck one.
If you do want to see how that works, I’ve got another Figma tutorial up on our YouTube channel, and you can get a really deep dive; it goes for about 30 minutes and goes through all of the details you need to know about animations and takes you through the upload process and shows you what a presentation actually looks like when you do that option, but for today we just want to go from Figma to PowerPoint.
In this case, I’m just going to open up that options panel go down to the “PowerPoint file” option and click on that, and when I select that you’ll see that it’s changed up here, and it’s also changed my button to say “Export PowerPoint”; because I’m ready to go and the design from Figma is looking really good, I want to get it out of Figma to PowerPoint; I’m just going to go ahead and click on “Export PowerPoint”, and what this is going to do is it’s going to generate slides for a PowerPoint file; that’s a native PowerPoint file that’s going to come out of Figma in just a moment. It’s going to take all of our Figma designs and put them into a PowerPoint presentation.
You can see here it’s just prompted me to save a file; so I’m just going to save that to the desktop. By default it just names it whatever your Figma file Figma document is called, but you can obviously change that if you want to; I can just rename that and you can see here it’s just changed it for me to look like the way I want. I’m just going to click “Save”, and as you can see here it’s just confirming that our PowerPoint file is ready and we’re able to open this in either PowerPoint and Google Slides or Apple Keynote, or just share it with somebody.
Now that that’s been saved I can open up finder and go to my desktop and you can see right here I’ve got my PowerPoint file which I can double click; I don’t have Microsoft PowerPoint on my computer but I do have Apple Keynote and this PowerPoint file will open up in that just fine as well. There we go; that’s Apple Keynote running now, and you can see here we’ve got all of our slides directly from Figma, and that’s all of them as would expect; we’ve got background colors set to white, we could obviously change that in here if we want to, and you can see all of the other elements still say the same; I’ll set that back to white now. We can move around our layers if we’d like to, and the other neat thing is if we go to open up our presentation notes, if you just go to “view” and then go to “show presenter notes” (this might be different in PowerPoint), but if I click on that, you can see here that the text that we added in Figma has been carried over into our speaker notes, and I can edit those if I want to, or I can get rid of some of them and remove those, but that’s all been loaded in; that’s really neat.
The other thing we can do is, because these are just images, we can add effects to them if we like, we can change opacities, and do all the normal stuff you’d want, like add animations. We could add a “blur” effect there and that would work; all of the layers from Figma have essentially been imported one-for-one into a PowerPoint file; you could open this up in Microsoft PowerPoint (as I said I’m just using Apple Keynote at the moment to give you an idea of it), but this is a PowerPoint file that will open in PowerPoint, Keynote or Google Slides, if you prefer.
That’s that’s all there is to. It’s very straightforward as you saw; it only took you know maybe five to ten seconds to export our collaborative presentation from Figma to PowerPoint; it’s very very quick.
I’m just going to close it off now, but if you need to make changes to it, you can you can either make those changes in PowerPoint, or if you prefer to leave Figma as your source of truth, you can just make your updates in the Figma project file and rerun the Pitchdeck Figma plugin, which you can do just by going over to the right hand side here, under “plugin”, and clicking on the “Pitchdeck” little pancake icon, and that will rerun the Figma plugin. You can just keep exporting your collaborative presentation designs from Figma to PowerPoint from as many times as you want, and it’s just going to keep doing it as many times as you need to; that way you can keep your collaborative presentation design in Figma as your source of truth for your slides, along with your design elements and your components, and just keep exporting it from Figma to PowerPoint as needed.
I hope that’s been helpful, if you’ve been wondering how to get your slides out of Figma into PowerPoint, this is the way that you can you can go about doing that. I hope that it helps you or your team with something that you’re working on or if you’ve been trying to solve this problem for yourself. Thank you as always for watching, and we’ll be back very soon with more Figma tutorials for you to check out.
Pro Bundle