Transcript for:
Importing PowerPoint Slides to Figma

hey everyone this is Adam and 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 pitch deck presentation plugin so 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 pitch deck so that's p t c d c k and under the plugins tab if you click on the pitch deck item you can run the 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 plugin from your saved 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 pitch te item and that's just going to run the plugin we saved a second ago so if you're new to the plugin the way that it works is it takes frames from your fig 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 uh 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 so I'm going to use this example here it's just a minimalist presentation uh 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 so now that we've got our PowerPoint file saved all we need to do is go to our pitch deck plugin and you can click on this little import pptx uh 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 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 so 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 and it's going to give you an update based on that uh 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 pbtx file so you can see in the plugin it's automatically loaded those slides up uh 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 so you can see here in the little brackets it's telling us that it's been imported Ed 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 uh edit that as we would normally in figma uh these are just regular image layers that we can now modify so if you want to shrink those or move those around those are just editable layers in figma that we had in PowerPoint before uh same with these ones you can see down here in our speaker notes section in the plug-in it's automatically imported those into our uh speaker note in the 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 uh 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 uh if you'd like to otherwise you can just leave them as static as well um 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 Le here so we've got this portfolio uh pptx file so I'm going to drag and drop that one into the plugin as well and while that's loading you can see it's just adding those uh 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 so again it's creating a brand new page in figma and automatically loading up those frames into our uh presentation plugin as well and of course we can edit these so we can zoom in and edit that content so 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 uh as you'd expect as well so it's worth noting that only certain types of uh layers or certain types of elements from the power Point files are supported if you go to docs. hyper. comom pitch and check out the import PowerPoint file docs on the site here you'll get a bit of uh an extra detail of what elements are actually supported so it'll import slides it'll import images text shapes uh tables currently just supporting the text content and speaker notes but it currently doesn't support things like charts or smart art uh 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 uh from a template uh 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 uh 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 so 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 uh file in this case that doesn't want to open in the 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 so 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 and you can see we've got a new uh pptx file that we can try so if we go back to our pigma file drag and drop that new file that we just resaved from PowerPoint Dr Drag and Drop That Into The Little Drop Zone area in the plug-in 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 uh opening that up in the most recent version of PowerPoint and resaving it as a new pptx file that usually uh 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 uh so also just mindful of fonts so if you've got fonts installed uh 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 uh 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 so 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 uh 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 uh go through and recreate every slide from scratch so I hope that's helpful if this is one of the use cases you've run into where you do need to get uh slides from a PowerPoint file into figma uh 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 figment tutorials like this one very soon