How to add Master Slides to PowerPoint exports from Figma using Pitchdeck

Video Transcript

Today, I'm going to be showing you how to automatically include master slide layouts in your PowerPoint file exports from Figma using the Pitchdeck Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little "Resources" icon up the top here. If you search for "Pitchdeck" under the "Plugins" tab, then click on the Pitchdeck item. You can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this little "Save" icon here to save it to your Figma plugins list for easy access later.

I've already done that. So, I'm going to go to my canvas, just going to right-click anywhere, go down to "Plugins", then go down to "Saved plugins", and click on the Pitchdeck item. That's just 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 allows you to take any of the frames, components, or instances directly on your Figma page and load those up into the plugin as slides for a presentation. You can export that presentation to multiple formats, but for today, I'm just going to be focusing on exporting it to PowerPoint and showing you how to create PowerPoint master slides using Figma components to help define those.

To get started, all I'm going to do is convert a couple of these frames that I've got on my page to Figma components. The way that I do that is basically just by clicking on any of those in Figma, right-clicking it, and going down to create component. You can see it changes it from a frame to this purple sort of color here. I can do the same thing for this intro slide as well. So, I can go down to create component, and now we've got two different components as part of our slides.

What we can now do is refresh our slides, and you can see here, while these ones are frames, if we go to our first two now, you can see those have been turned into components. So we can jump to those if we want to as well.

The reason why that's important is defining these slides as components is going to make sure that those get included as master slides when we export the presentation to PowerPoint. I'll show you what that looks like now.

If you go to the export panel just by clicking on the export button in the top right of the Figma plugin and just make sure that the PowerPoint format is selected, click on PowerPoint. Then you want to go down to the PowerPoint settings down here and enable this setting that says create PowerPoint master slides from components. I'm going to toggle that on, and then I'm just going to click on the export for PowerPoint button.

We don't need to compress the images for this Figma tutorial, but you can definitely do that as well. So I'm just going to click on export for PowerPoint, and this is going to export all of our slides to a PowerPoint file that we can download from Figma.

Once that's finished, you just have to go ahead and click on the download your pptx file button. So click on that and just save it to your desktop or wherever you prefer. If you open up that file just by double-clicking on it, you can see here that it opens it up in PowerPoint, and we've got our slides as you'd expect.

These are all editable slides that we can modify in PowerPoint, and it's been exported directly from Figma. So the cool thing is because we enabled the master slide option, if we go up to the new slide panel up here and click on the little arrow where it says insert new slide, if you click on that, you can see here we've got a couple of PowerPoint master slides. So we've got two master slides, which correspond to the two components that we just set up in Figma - the intro and the principal one slides.

You can see here when we go to add a new slide, we can add an intro master slide and also a principal one master slide. So what that allows us to do is it lets us edit that content. This is basically getting added as placeholder content, so these slides are actually empty, and these are just placeholders. So it's got the text style, so we've obviously got the text style that was defined in the actual Figma file, but these are empty placeholders with some example text taken from our Figma content here.

Here and so what that allows us to do is it allows anyone that we've shared the presentation with to add brand new slides based on the Styles and layouts that we've defined in Figma. For example, we can add an image to this placeholder here. So if we click on insert picture from file, that's going to allow us to browse our computer for an image. So, I'm just going to add this image here, and you can see that gets swapped into our PowerPoint master slide, and again, we can update this content here and adjust that as needed. If we want to add different content, we can adjust that width to make that fit, and then, obviously, you've got your body content here as well.

The body content can be added there, and that's basically what that looks like. You can obviously move this around, but what it's doing is it's providing you master frames with predefined content areas and styles for someone to easily add new slides to the presentation.

There are a couple of extra things you can do here. The main one is that you can include these images as static images if you want to do that as well. So, for example, if you wanted this master frame here to always have this image and not make it a placeholder image, what you can do is you can actually lock that layer in Figma. So, for example, if we lock that data photo layer and then we re-export the deck. So I'm just going to click on the export button again. I'm going to export it with the create master slides from components option still enabled, click on export for PowerPoint again.

This time when we re-export it, this image that we've just locked will be added as a static image. So if we save that now and open up this brand new file and then we add a new PowerPoint master slide. So if we go back to the new slide options, insert a new slide, and click on the intro master slide, you can see here that it's added our text content as placeholders. We've got our placeholder heading area, but you can see that the difference between this one and the other deck that we exported is that the master slide doesn't have a placeholder for the image.

You can see here that the image is just static; it can't be moved, it can't be changed directly from here. You would have to go into the master slide edit area in PowerPoint and edit it from there. But by default, this image is going to be static, so it's not going to be a placeholder. All the text is, but the image won't be.

This can be handy if you've got things like logos or little images that you want to include in your PowerPoint master slides, and you don't want them to be editable. All you need to do if you want to keep those as static is just lock the layer in Figma, so lock that image layer, and that will automatically be flagged to not turn that into a placeholder.

That's basically it. I just wanted to show you the fundamentals of using the Pitchdeck Figma plugin and Figma to define these component slides, which will then be used as master slides for your PowerPoint exports, as long as you've got the create master slides from components toggle enabled. You can also include these in your keynote and Google slide exports, but the important thing to be mindful of is that unfortunately, those ones don't support the editable images at the moment. Hopefully, this will change in a future version, but for now, they seem to use the editable versions as text, even though they're meant to be images.

I would avoid using those ones for the master slides if you need editable image content, but it will definitely work for the text, and it will still include the images as static images. So that's just something to be mindful of, but for this tutorial, just stick with PowerPoint if that's what you're using, and it'll work as expected, just as we looked at in this tutorial together.

Let's 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.