Video transcript
11-minute video ·
Today I’m going to be showing you a quick tutorial on how to export your designs from Figma Slides to PowerPoint using the Pitchdeck Figma plugin.
To get started, all we need to do is go to our Figma app. What you want to do is open up a brand new Figma design file. Instead of the Figma Slides file, which we’re going to look at in a second, open up a normal Figma design file. Then, go to the “Resources” icon and search for Pitchdeck. Under the “Plugins” tab, 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. This will allow us to run the Figma plugin from our saved Figma plugins list.
I’ve already clicked on the “Save” icon, so I’m just going to go to my Figma plugins list by right-clicking anywhere, going down to “Plugins,” and then down to “Saved plugins.” I’ll click on Pitchdeck, and that will run the Figma plugin that we saved a second ago. If you’re new to the Figma plugin, the way it works is it helps you turn Figma frames into presentations automatically, including exporting them to PowerPoint, which we’re going to do today.
Now that we’ve got the plugin saved and running, we can go back to our Figma Slides file. We’re just going to add a brand new slide deck because I don’t have one designed already. You might already have your own, so you can use that one today. I’m just going to use this dark slides template, so I’ll click on “View Template” and then “Add All Slides.” This will automatically add all of the slides to my Figma Slides file.
By default, you might see the view looking like this, with all the slides listed on the left. For today’s purposes, we want to go to the grid view. Go up to the top left and click on “Grid View.” This will change the view to allow us to see all of our frames at once.
What you want to do is select all of the frames that you want to export from Figma Slides to PowerPoint, and we’re going to copy those to our clipboard. In this case, I’ll use the first row as an example; you would obviously use all of the slides you want. If you want all of the slides selected in one go, click on Command + A or highlight all of those slides. You can copy them to your clipboard by right-clicking and then clicking on “Copy.” Again, I’m just looking at the first row to simplify it. I’m going to highlight those slides, click on “Copy,” and then go back to my Figma design file. I’ll paste those slides by right-clicking on my canvas and clicking “Paste” here.
Once you’ve done that, you can load up those frames by either refreshing the layers with this button here, the refresh layers button, or rerunning the Figma plugin if you’ve already run it and closed it. I’ll click on the refresh layers button now, and that will load up all of my Figma frames from my page into the Pitchdeck Figma plugin. You can see here we’ve got all of our frames that we just pasted in from Figma Slides into our Figma design file, and those are all looking really good.
What we want to do now is export these to PowerPoint. We’ll go to the export button in the top right of the Figma plugin. Go ahead and click on “Export,” and then we’ll change the presentation export format in this dropdown here to go down to the presentation apps group and just click on the PowerPoint option. You want to make sure that the PowerPoint (.pptx) file is selected, and then you can adjust the settings here as you like. By default, it’s going to automatically compress the images, downsize any large image layers, and make the text editable. Those are the default options, but you can change these however you like.
I’ll go ahead and click on “Export for PowerPoint.” This will begin the export process of taking those slides from Figma Slides that we just imported into this Figma design file. It will automatically run through those and create a PowerPoint file. Once that finishes exporting, you’ll get a message saying that your PowerPoint file is ready. When that shows up, you can go ahead and click on the “Download your .pptx file” button. I’m just going to click on that now, and you can save that directly to your computer. Just go ahead and save it anywhere. I’m putting it on my desktop for now.
Once you’ve saved that to your computer, just double-click on the file, and that will open up the file in PowerPoint. You can see here I’ve got my Figma Slides exported into a real editable PowerPoint file that I can edit. You can see here that the text looks really good. It’s worth being mindful of the fonts. If you’ve got some Google Fonts that your Figma Slides design is using, in this case, we’re using the font “Inter,” you want to make sure that the Inter font is installed on your computer. Figma Slides is automatically using the Google Fonts version of Inter inside the app.
If you’re sending this to a client or using it on your own computer, ensure that the exact same font name is installed on your computer. That will ensure that the correct font loads up in your PowerPoint file too. But that’s looking really good. You can see that we can edit this content. It’s a real PowerPoint file created from the design we had in our Figma Slides file.
We’re basically exporting these designs from Figma Slides into this real PowerPoint file. This allows you to have a bit more flexibility with how you share your Figma Slides design. If you’re working with clients or stakeholders who need it in PowerPoint for any reason, this will give you the flexibility of designing it with the benefits of the Figma Slides interface, and then automatically exporting that through Pitchdeck into an editable PowerPoint file.
You can see here all of the slides have been exported as expected, and you can modify and edit all of this content as needed. I’ll show you one more example just to add a bit more flexibility to the designs. If you go back to Figma Slides and create a new file, in this case, I’ll go to “File,” then “New Slide Deck.” This will load up a new Figma Slides file. Again, I’m not going to use a pre-designed template; I’m just going to use one of these built-in templates here. I’ll click on “View Template.” Once that loads, go ahead and click on “Add All Slides.”
I’m clicking on that “Add All Slides” button now, and you can see that’s just generated all of the slides from that template. Again, ensure that you’re in the grid view so you can see all of the slides that you want to export from Figma Slides into another PowerPoint file. I’ve got the grid view already selected at the top here instead of the slide view.
You want to make sure you’re in Grid View, and that will allow you to quickly select all of those slides. Again, I’m just going to select some of these on the top row to give a quick example. I’ll select the first 12 and click on the copy button by right-clicking and then going to “Copy.” Again, we’re going back to our Figma design file, jumping out of Figma Slides back into a normal Figma design file. In this case, I’m going to create a brand new page in the same file, and then I’ll paste those in by right-clicking anywhere and clicking “Paste” here.
Once you’ve done that, you can either reload the layers by clicking on the refresh icon or refresh layers button here again, or if you’ve already closed the Figma plugin, you can simply rerun it. This will automatically load up those frames directly into the Figma plugin. You can see here that it’s loaded up those 12 frames, so all of those slides we just copied from Figma Slides into our normal Figma design file are looking really good.
Now that we’ve got those imported into Figma, all we need to do again is click on the export button up here. You can play around with these settings. If you want things like retina images, you can enable those kinds of settings and play around with all of these options here. I’m going to leave most of these as standard and click on “Export for PowerPoint.” One more time, this will run through all of the slides in our Figma design and export them all to a PowerPoint file.
You can see here our PowerPoint file is ready again, so we’re going to download your .pptx file. I’m going to save that directly to my desktop and open that one up. I’m just going to double-click on that. The thing I wanted to point out here is that you’ll notice that the font up here is a little bit out of alignment with our Figma design over here, and I’ll show you why that is.
If we jump into the text area, double-click on that item, you can see that the height of that text area is actually extending outside of its bounds. The height of the layer is about 230, but the text area, or the text kind of highlighting where we’ve got the little cursor, is extending outside of that. This is pushing the font size down a little bit or the font position down a little bit.
There are a couple of options. You can modify things like the line height to adjust that manually, or you can just edit that in the PowerPoint file itself and shift those down. For example, we could highlight that, shift it into the correct position, and that solves the issue. Again, this is more of an edge case; you’re not going to run into this with most fonts, but some typefaces do have that offset that might change some of the positioning.
You can see the other layers are looking quite good. The font is editable. You have to make sure that you’ve got the actual font installed. In this case, the “Dangrek” font is installed locally on my computer, which is why I’m able to edit this font visually. If you don’t have the correct font installed, it will fall back to a different font. If you’re wondering why the fonts aren’t aligned, ensure you’re installing the exact font used in the Figma file from our Figma Slides file, which are typically Google Fonts.
You’re pretty much always using Google Fonts unless you’ve got your own custom font installed that you’re using for your Figma Slides. Anyway, that’s basically it. I wanted to run through a couple of quick examples of how you can automatically take your designs from a Figma Slides file and get those into a PowerPoint file just by exporting them via the Pitchdeck Figma plugin.
A last note: the reason the slides are imported into a normal design file is that currently, Figma Slides doesn’t support Figma plugins. I suspect they might support Figma plugins in the future, but in the meantime, if you’re really keen on using the Figma Slides app or the Figma Slides product and still need to get those designs into a PowerPoint file, jumping into a normal Figma file and exporting them via the Pitchdeck Figma plugin is a really simple way to go about it.
With only that minimal step of copying your slides out of Figma Slides and then exporting them to PowerPoint via the Pitchdeck Figma plugin, I’ll 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.
Pro Bundle