Video transcript
13-minute video ·
Today, I’m going to be showing you how to export your collaborative presentation designs from Figma to Keynote (or Keynote file), that you’ll be able to open on your computer and present as a real presentation outside of Figma based on your own slide deck designs.
To do that, we need to install a Figma plugin called “Pitchdeck”. If you haven’t already done that, you can do it by clicking on the top left Figma icon in the toolbar up here, and if you go to community or plugins and search for the term “pitchdeck”, you’ll see a result called “Pitchdeck Presentation Studio” pop-up. I’ve already got it installed and that’s why I’ve got this little check mark here and it says “installed”, but if you don’t, this button on the right hand side will say “install”, and if you click on that it’ll change to look like mine, and once it does you’ll be ready to go.
I’ve just jumped back into my Figma design, and this is just a collaborative presentation slide deck that I designed in Figma based on Dieter Rams’ “10 principles for good design”; it’s just 11 slides, and what I want to do today is take get slides outside of Figma to Keynote and make this into a real presentation that I can use. To do that we need to run the Figma plugin we just installed by right clicking anywhere, going to “plugins”, and then clicking on “Pitchdeck Presentation Studio”, and once you do that it’s going to fire up the Figma plugin that we just installed, and it’s going to look through all of your frames on the left hand side here, and it’s going to treat each of those frames as an individual slide in your slide deck.
Make sure you’re running this in a file that just contains the slides or the frames that you want in your deck; if you do have other frames in there, it’s going to treat them as slides, too. Okay, it’s gone through and it’s looked at all of our frames, and you can see here that we’ve got a list of 11 frames from our collaborative presentation slide deck design, and they all look as you’d expect them to look.
The one thing to note is that the ordering is exactly reversed from the ordering that we see over here in the left-hand side in Figma; we can see at the bottom of this list we’ve got “intro” and then gradually working its way up from “principle one” to “ten”, but in Figma, in the Pitchdeck Figma plugin here, you can see “intro” is actually coming first, and then it goes from “one” to “ten” after that; and the reason it does that is because typically when you’re designing something like a pitch deck or a slide deck as a collaborative presentation in Figma, usually you’ll create a slide and you’ll be happy with that layout, and you might want to copy paste it and when you copy paste it, Figma will paste it next to the slide that you already had (which is great), but it also adds the new layer on top of any of the old layers that you already had; it effectively keeps layering upwards instead of in in the reverse.
So, Pitchdeck kind of accounts for this by default and assumes that you’ve done your design that way, and it’ll order it in reverse to correct the order from start to finish; but having said that, if if you do need to re-order the slides or if you’ve done it a different way, you can very easily re-order them just by hovering on any of these “drag” icons in the slide panel on the left here in the Figma plugin, and if you click and drag you can simply just re-order those frames or those slides; you can see here we’ve just moved number one down to number four, I can move that back; you can move any of these around in any order and these are completely disconnected from your Figma design order. If you do want to re-order these slides just for your presentation export from Figma, you can feel free to do that and it won’t mess around with your actual layer order in your original presentation design, that’ll all be left alone, but the Pitchdeck Figma plugin will look at this order as the source of truth.
Now that we’ve got our slides, as I said, you’ve got a preview here with with all of the content of each of them. The thing that you want to have a look at underneath that preview is this little section called “speaker notes”; speaker notes is just a little area with a text box or a text area where you can actually write notes per slide which can be used when you’re actually giving your presentation and these won’t be shown to the audience at all; these are just used for your own use, if you’re presenting on a second screen or you’re using Keynote to present and you want to use the slides speaker notes feature, this will automatically be put into the speaker notes that you’ll be able to see once you export our collaborative presentation from Figma to Keynote.
The other thing that you’ve probably noticed is that we have some animations on all of our layers here, and these are being controlled by this panel over here; however, it is worth noting that because we’re exporting from Figma to Keynote in this Figma tutorial those animations won’t be won’t be seen in the in the Keynote presentation; if we open up our export formats here you can see that we’ve got two groups, we’ve got an “animated” group which just has the “Pitchdeck URL” export format, and we’ve got a “static” group which has things like “PDF”, “PowerPoint” and “Keynote”; the animations will only be applied to this first format, which is the “Pitchdeck URL”; that is the default format for creating presentations, if you upload a presentation to that, it will give you a URL where you can actually present this deck, and you’ll get all the animations, you’ll get the slide notes, you’ll get a remote control to control the slides from your phone if you want to; there’s all these different features it offers. If you do want to know how that works, there’s a separate Figma tutorial on our YouTube channel; you can check that out, it goes for about half an hour and it’ll give you a deep dive and a full demo of how that works and what you can do with it.
For today, because we’re going to be exporting our presentation design from Figma to Keynote, just be mindful that any animations you do apply here will not get carried across, and the reason for that is these are very specific web-based animations that don’t have any relationship to Keynote; Keynote has very different animation styles that that don’t map to these animations; they’re just static when you export it, but you can apply animations once the deck is in Keynote if you’d like to, and I can show you how to do that in a second after we export this collaborative presentation design from Figma to Keynote; let’s go ahead and do that now.
I’m happy with the ordering, I’m happy with the design, I’ve got all my speaker notes set; so, to export this presentation from Figma to Keynote, all we need to do is click on this little drop down up here; this is our export format selection, and if you go down to the bottom of the list where it says “Keynote file”, click on that, and you’ll see here that it’s just changed the button to “Export Keynote”. All we need to do is click on that button now, so I’ll click on that, and what this is doing is it’s generating an actual file that can be opened in Keynote natively outside of Figma. It’s taking all your presentation designs and turning them into slides.
Okay, it’s telling us our presentation Keynote is ready, it’s letting us save it, and by default it just uses the the document title from your Figma file; I’m just going to leave that as is and click “Save” to my desktop. It’s telling me that I can save the the Keynote file to a computer and open it in Keynote or I can share it via email or Slack or anything else I prefer; in this case I am going to open it on my on my computer. To do this, you can just double click on the file that you just exported, or you could open up Keynote and open it manually if you wanted to, just by going to “File”, “Open”, and then double clicking on the file we just exported.
Now I’m in Keynote after double clicking on the file that we just exported from Figma; this is a slide deck presentation that we just we just designed in Figma, and as you can see, all of the slides are there, the order is the same as we expected, and all of these elements are real elements that we can click on and move around, they all change, the background property has already been set to white, but we can change that if we wanted to, and that will show through with all of the the other layers that we’ve got.
As I mentioned before with the with the speaker notes, if you go to “view” and then click on “show presenter notes”, you can see here, it’s just revealedthe presenter notes or speaker notes that we added in Figma, and those have been carried across to our Keynote presentation; whenever I change a slide you can see down here that those are being pulled in, and I can edit those of course, or change them, now that we’re in Keynote; and that’s what it looks like.
If you do need to apply animations; as I said, they don’t get carried across from Figma into Keynote, they only get carried across into the Pitchdeck web URL format in the other tutorial; but if you do want to add animations to these slides, now that you’ve got them in Keynote, you can totally do that as well. The way you can do that is by going to “animate”, just in the top right here, clicking on a layer that you want to apply an animation to, clicking on “add an effect” and then you get this drop down here where you can add different effects. If I do a blur effect that’s going to blur that in for me; I can choose this other one; that’s that’s quite a crazy animation but you can totally do that as well, and you can keep changing those of course. I don’t know what that one does; oh yeah, it’s a lens flare; you can play around with these of course, but the neat thing is that all of your assets from Figma have now been migrated into Keynote, and you can play around with these, you can move them, you can scale them of course, and pretty much do whatever you want. Of course, you can present that as well by clicking on the “play” icon and doing it that way.
That’s essentially it; it’s really simple and really quick to do this, and I think the cool thing is if you’re designing these presentations collaboratively in Figma, you get all the benefits of being able to design collaborative presentations in a tool that you really like, without having to just jump straight into Keynote in an isolated way; you can keep Figma as your source of truth for your collaborative presentation slide deck designs and whenever you do need to export your presentation from Figma to Keynote, you can simply re-run the Pitchdeck plugin as many times as you want, keep Figma as a source of truth; and keep re-exporting to Keynote whenever you need to.
You can relaunch the Pitchdeck Figma plugin really quickly by just going over to the right hand side, and you’ll see the little pancake icon with “Pitchdeck” next to it; if you click on that, that will relaunch the Figma plugin straight away; and that way you don’t have to go to right click, go to “plugins”, and find it in there, you can just do it with one click on the right hand side there.
I hope that’s been helpful for anybody who’s been wondering if they can export their collaborative presentation designs from Figma to Keynote; and the answer is you can, but at the moment the only way you can do it is by using the Pitchdeck Figma plugin that we just went through. I hope that helps you or your team with anything you’re working on, or if you’re just trying to solve the Figma to Keynote problem that you’ve been having, this is definitely the way to go about it. Thank you again for watching, as always, and I’ll be back very soon with more Figma tutorials just like this one.
Pro Bundle