Video transcript
12-minute video ·
Today I’m going to be showing you how to export your slide deck presentation designs from Figma to PowerPoint files, containing editable text layers. This will also work for Keynote and Google Slides as well; but I am going to be showing you how to make it editable, so you’ve got text that comes from Figma and gets carried over to PowerPoint, and you’ll be able to hand that file over to somebody and allow them to edit the content in their tool of choice.
To get started, the first thing we need to do, if you haven’t already done so, is install a Figma plugin called “Pitchdeck”. The way you can do that is just by going up to the top left hand corner of your Figma app, clicking on the little Figma icon, and if you go down to “Community” or “Plugins”, and you go to the search bar and type in the term “pitchdeck” then if you go to the “Plugins” tab, you’ll see a result pop up called “Pitchdeck Presentation Studio”, and on the right hand side you’ll see a button that says “Install”, if you click on that “Install” button, it should change to look like mine, where it’s got a little check mark and says the word “Installed” next to it. Once it looks like that and it’s been installed, you’re ready to go, and you can jump back into your Figma project.
I’m just using a fairly simple deck design with 11 slides, and it’s just based on Dieter Ram’s 10 Principles for Good Design. This is just an example of what a slide deck could look like, and I’m going to use this as an example to show you how to export this from Figma over to PowerPoint with editable text. The first thing we need to do is just right click anywhere on the page, go down to “Plugins” and if you click on the plugin called “Pitchdeck Presentation Studio”, you’ll see the Figma plugin load up. This is currently loading up all of our frames from the left hand side here and it’s turning those into slides; we can see all of the slides I’ve correlated to all the layers in the Figma layers panel. In this Figma tutorial, I’m not going to be going into detail about animations, I’m not going to be going into detail about speaker notes and how to present a web presentation and things like that; today, I’m just going to be focused on showing you how to export this Figma slide deck design to PowerPoint or Keynote or Google Slides and keep all of the text editable; that’s really what I want to show you today. If you do want to see a video tutorial about how to add these animations, how to add slides slide notes, how to actually present the presentation, you can go to our other YouTube Figma tutorials, and we’ve got a couple on there that’ll go into way more detail about all those bits and pieces.
Okay, I’ve basically got my slides the way that I want them, so I’m ready to export this slide deck design to PowerPoint from Figma. All I need to do now is just go to the top right of the Figma plugin and click on “Export Presentation”, and you can see here it’s just pulling out a little export settings panel and there’s a few little sections in here; the first one would be the “Select Presentation Format” option; this is just a drop down that you can click on and it reveals a few different export formats; the first one is the “Pitchdeck Presentation URL”; this will actually create a web based presentation, and then we’ve got at the bottom a “Static Deck” option, this will export your deck to a PDF, but the ones we’re interested in today are the “Presentation App” options; that’s “PowerPoint”, “Keynote” and “Google Slides”; today, I’m just going to be looking at how to export to these particular formats and how to make the text editable once you do export it.
In this case, I’m just going to use Keynote as an example and I’m going to show you what it looks like normally to export this for Keynote or for PowerPoint from Figma, so I’m just going to select that “Keynote” format, I’m going to click on “Export for Keynote” and click that, and what this is doing is it’s just exporting these slides into a Keynote file that we can open in a moment. This isn’t going to be an editable, it’ll be editable as far as the images and layers go, but the text layers in this example will not be editable they’ll be rendered as images; we can just open that up now that we’ve exported it to our desktop from Figma, and once it loads we’ll be able to see what’s going on here. As you can see all of the layers have been kept intact, we’ve got all of the layers as we’d expect, which is great, the only thing is these layers have all been exported as images; even the text layers are images, I can’t edit them, I can’t double click on them because they are in fact images. That’s great in some cases when you don’t need to have editable text, when you just want to export this from Figma to PowerPoint and be able to present it in PowerPoint, then that’s perfectly fine and rendering it as images is going to make sure that it’s you know pixel perfect to the original typography that you get.
The next thing I’m going to show you is how to actually export this with a different option, and that’s going to allow us to edit this text once we do export it from either Figma to PowerPoint, Figma to Keynote or Figma to Google Slides. I’m just going to close that off I’m going to restart the Figma plugin, you can do that by just going over to the right hand side, clicking on the little “Pitchdeck” icon and that will just loaded up the Figma plugin. Once again, it’s just loading up the slides there we go it’s been been loaded up. Again, I’m not going to change anything here, I’m just going to re-export this presentation; I’m going to go back to the top right hand side and click on the “Export Presentation” button and it has recalled our presentation format from the last export; it’s still set to “Keynote”, I could obviously change that to PowerPoint, or I could change it to Google Slides, but i’ll just stick with Keynote for now. The option that we’re interested in is this new option that’s been shipped in the Pitchdeck Figma plugin; at the bottom here you can see a label called “Editable Text in Keynote”, and it’s currently in “BETA” status. What we can do is we can actually enable this checkbox or this little toggle; this says “Use Editable Text (instead of images)”, and what this is going to do is contrary to the last file that we just exported with this setting disabled, enabling the setting is now going to export it using this editable text feature, and it’s going to allow us to edit that text in our presentation app; be that Keynote, PowerPoint or Google Slides; it’s going to keep all of that text from Figma and bring it all over. I’ve enabled that feature and I’m just going to click “Export for Keynote” once again, and this time it’s going to use a slightly different export method, it’s going to retain all of that text so that we can actually edit it.
Okay, it’s finished exporting. I’m just going to click “Save”, and put that on my desktop, and you can see here that we’ve got our new file once again. I’m just going to open that up with Keynote, and at first glance it looks the same but if I click on these layers, you can see that it’s a little bit different this time these are not images these are actually text layers; instead of rendering out an image it’s actually rendered out text from Figma; this “text is from Figma” sentence obviously makes no sense, but I’m just editing editing the text. You could give this file to somebody else who’s not a designer who doesn’t use Figma and is much more comfortable in PowerPoint, Keynote or even Google Slides, and they can edit this; this this text is all editable, you can change the text style if you wanted to for some reason, that would be that would be fine, and then you’ve got all of your settings here; you can change the font size if you wanted to do that; I can make that smaller and that changes the font size I can change the color; if I wanted to change the text color just for this word I could definitely do that and just a bunch of different options; I can change the alignments; all of the options you’d be used to if you were just creating this from scratch in PowerPoint or Keynote, but obviously the benefit here is that we were able to design it in Figma and then bring it over to PowerPoint or Keynote and either continue editing it there, or you know letting somebody else take over and maybe just update the copy or something like that if they really wanted to do that.
Those are the two different options; there’s different use cases for both, where clearly sometimes you you may not actually need to have the text editable and sometimes you might just want to retain the sort of pixel perfect nature of some of the typography; Figma does have more fine grained control over typography, even with the spacing here, there’s only limited options for line spacing and things like that, with Figma you obviously have much tighter control over a lot of the typography; you’re going to lose out on a little bit of that by exporting it to text from Figma to Keynote or PowerPoint, there’s definitely going to be use cases where you’ve got somebody on the team who just prefers to work in PowerPoint, Keynote or Google Slides instead of Figma, or maybe they just aren’t invited to Figma for some reason, then this is the way that you can go about doing it if you need to get them involved and export the presentation for them to be able to edit.
That’s all I have to show you today; it’s just this new feature in the Pitchdeck Figma plugin that I wanted to to reveal and and give a bit of a sense of what it looks like and how it works, because in the previous Figma tutorials you could only export these slides to images; all the text was just images, and at the time there was no option to be able to export it with editable text. That feature has just just come out recently, and that’s why I wanted to make this tutorial to show you how you can use it in your own projects. Thank you as always for watching, and we’ll be back very soon with more Figma tutorials.
Pro Bundle