Video transcript
9-minute video ·
Today I’m going to be showing you a quick tutorial on how to import slides from a PowerPoint presentation file into your Figma file using the Pitchdeck presentation Figma plugin.
To get started all we need to do is go to our Figma file, click on the little “Resources” icon at the top here, and if you search for Pitchdeck then under the Figma plugins tab, if you 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, and that will let you run the Figma plugin from your saved Figma plugins list. So I’ve already clicked on the save icon so I’m going to go to my canvas, just right-click anywhere, go down to “Plugins”, then go down to “Saved plugins”, and click on the Pitchdeck item, and 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 takes frames from your Figma page and allows you to turn those into a presentation that you can then export to various formats like a web presentation, PowerPoint file, keynote file, Google Slides, or PDF. However, today I’m not going to be focusing on those features, I’m going to be showing you how to take a PowerPoint file that you’ve already got and import the slides from that automatically into your Figma file that you can then edit and customize using the tools in Figma.
I’m going to use this example here, it’s just a minimalist presentation that I’ve got set up, and what we’re going to do is we’re going to import this file into our Figma file. And the other thing I wanted to just add is you can also add slide notes, so I’m just going to add those in here. So add slide notes to the first slide. I just want to show you how those get imported as well. So I’ll just save that and I’ll add one more on here. So more slide notes on the third slide. And once we import this in a moment, you’ll see these get carried over into our Figma file too. So I just wanted to make sure we included those.
Now that we’ve got our PowerPoint file saved, all we need to do is go to our Pitchdeck Figma plugin and you can click on this little “Import PPTX” drop zone down here or you can just drag and drop a file directly into that. So I’m going to go to my desktop, I’m going to take that PowerPoint file that we just saved which is a PPTX file and I’m just going to drag and drop that from my desktop directly into this little “Import PPTX” drop zone in the Figma plugin and let go. And once you let go of that, you can see that the file’s being loaded and it’s giving us a little status indicator of which slide it’s currently importing into Figma.
This process is going to depend on how many slides you’ve got in your file, how many images and layers are in each slide and it’s going to give you an update based on that amount of content. So once it gets to the final slide, you’ll see it kind of finalize here at 100%. And once it finishes that, you’ll be able to see that it gives you a success message saying that we’ve just imported 21 slides from our PPTX file.
You can see in the Figma plugin it’s automatically loaded those slides up. It actually creates a new page for that in our Figma file, just to separate it from any of the other content you’ve got set up. You can see here in the little brackets, it’s telling us that it’s been imported from that PowerPoint file. And if we zoom in, we can actually edit and inspect these layers as well. So, for example, we can edit this text. So we can edit that as we would normally in Figma. These are just regular image layers that we can now modify. If you want to shrink those or move those around, those are just editable layers in Figma that we had in PowerPoint before. Same with these ones.
You can see down here in our speaker notes section in the plugin, it’s automatically imported those into our speaker note in the Figma plugin. And you’ll see that on the first slide as well, just down here where we added those speaker notes a moment ago. So that’s looking really good. It doesn’t import things like animations. So if you do want to animate certain layers in your presentation for the web presentation format, you can manually go through and add those in. You can just select an animation and add those in yourself if you’d like to. Otherwise, you can just leave them as static as well. But that’s just one example of a file that I wanted to show you.
We’ll try one more just to give another example here. So we’ve got this portfolio PPTX file. So I’m going to drag and drop that one into the Figma plugin as well. And while that’s loading, you can see it’s just adding those slides in the same way. This one’s only got 10 slides so it’s going to be a little bit quicker. And you can see it’s now imported those 10 slides into our Figma file as well. Again, it’s creating a brand new page in Figma and automatically loading up those frames into our presentation Figma plugin as well. And of course, we can edit these. So we can zoom in and edit that content.
This is just regular text content automatically applied to the size and font that we had in PowerPoint. I’ll show you what that looks like in PowerPoint as well to compare. So you can see here we’ve got our design and we’ve got our content that we just imported. So you can see all the different slides that we just imported into Figma. And if we scroll down here, you can see that these are all editable as you’d expect as well. It’s worth noting that only certain types of layers or certain types of elements from the PowerPoint files are supported. If you go to “docs.hypermatic.com/pitchdeck” and check out the import PowerPoint file docs on the site here, you’ll get a bit of an extra detail of what elements are actually supported.
It’ll import slides, it’ll import images, text, shapes, tables. Currently just supporting the text content and speaker notes, but it currently doesn’t support things like charts or SmartArt, headers and footers, embedded videos. And I would also say layouts in general can be a little bit tricky as well. If you’re using a preset layout from a template that PowerPoint creates, those can also have some issues as well. So the best thing to keep in mind is you probably just want to keep these really simple. You want to make them sort of like these ones where it’s mostly just text layers and image layers or shape layers, and those are going to work quite well. But once you start getting into these more complex elements, you might run into some issues. So that’s just something to call out as well.
The final thing I wanted to go through is you might notice that some files just don’t seem to load. So I’ve got this other PPTX file here which was downloaded from the internet. So I didn’t create it from scratch in PowerPoint, and that may have something to do with it. It might have been created in a different version of PowerPoint or a different tool that exported it to a sort of strange version of PowerPoint.
If I try and drag and drop this file, you’ll see here that it’s going to tell me that it can’t open the file and it’s telling me to try resaving it from the PowerPoint app. So we can try that now. So if you open up this file, in this case, that doesn’t want to open in the Figma plugin, just double click on that, open it up with the native PowerPoint desktop app. So just make sure you’ve got Microsoft PowerPoint installed on your computer. And all we’re going to do is just save as. So you got to go to File, Save As, and we’re just going to save this as a new version.
I’m just going to call this one new and save it to the desktop, same format, so PPTX format, but we’re just going to resave this after opening it up in PowerPoint. So once you’ve saved that, just go ahead and click on Save. And you can see we’ve got a new PPTX file that we can try. So if we go back to our Figma file, drag and drop that new file that we just resaved from PowerPoint into the little drop zone area in the plugin, and you can see this time it’s loading up the slides. So that’s just something to call out if you do run into an issue where it’s not wanting to open up the file.
This is usually if the file’s been exported from a different program or if the file format’s just a little bit weird. Opening that up in the most recent version of PowerPoint and resaving it as a new PPTX file, that usually resolves that issue. So you can see here that I’ve got my slides now imported from that PPTX file. So if we open up that file, you can see that the content is getting brought over. Also just mindful of fonts, so if you’ve got fonts installed, you want to make sure those are installed on your computer and matching up in Figma.
Sometimes the naming can be a little bit weird as well. So in this case, you can see that the fonts aren’t getting applied correctly, but the font sizes and font styles and everything like that colors are all being applied. You may just need to go through and manually reset some of those fonts. So that’s just another thing to call out. As you can see, it’s not 100% perfect and it is still in BETA so this will improve over time but if you’ve got a simple enough presentation already designed in PowerPoint that you want to import into Figma to give yourself a little bit of a head start in case you need to redesign some of those slides in Figma from your PowerPoint file this is a really easy way of automatically importing those slides and automatically importing that text and image content from a PowerPoint file directly into your Figma file without having to manually go through and recreate every slide from scratch.
I hope that’s helpful if this is one of the use cases you’ve run into where you do need to get slides from a PowerPoint file into Figma sometimes there’s weird requirements at certain companies to do that so hopefully this is going to help your workflow if you are one of those people. So thank you as always for watching and we’ll be back with more Figma tutorials like this one very soon.
Pro Bundle