How to export presentations from Figma to Google Slides using Pitchdeck

Video Transcript

Today, I’m going to be showing you how to export your collaborative presentation designs from Figma into Google Slides.

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.

Now, I’m just using a Figma file that I that I designed myself, which covers Dieter Rams “10 principles for good design”, and this is just a simple deck design that I came up with in order to show you roughly what it looks like to export it and; to export this to Google Slides all we need to do is right click, go to “plugins”, and click on “Pitchdeck Presentation Studio”. This is going to fire up the Figma plugin that we just installed a moment ago, the Pitchdeck Figma plugin, and once that loads, it’s basically just going through all of our frames here on the left hand side in our Figma design, and it’s treating all of the top level frames as as slides; each frame is considered a slide to the Pitchdeck Figma plugin; that’s what it’s doing now, it’s just going through all those slides, loading in all the layers and rendering all the images.

Now that that’s loaded up, we can see here that all of our slides have been added from our design, and as you can see here, we’ve got all of our layers from Figma loaded up into Pitchdeck. The thing you might notice is that the layer order is the opposite of what you see in Figma; in Figma we’ve got “intro” at the bottom and “principle 10” at the top, but in our Pitchdeck Figma plugin we can see “intro” at the top and the last slide is at the bottom. The reason for that is when you copy paste frames in Figma, as I was doing when I was making this collaborative presentation slide deck design, every time you copy one, it will add it next to the original frame which is good, but weirdly it kind of adds each layer on top of each other in this layer panel here; it’s basically getting loaded in reverse in some sense; Pitchdeck automatically flips that order in the Figma plugin because it assumes that you’ve been designing it that way, and it will automatically reverse that order; the top one becomes your first frame, hopefully.

If that’s not the case, what you can do is reorder these yourself and it’s it’s really easy; all you need to do (if you do need to change the order of these slides for any reason) is, if you hover over the little hover “drag” icon you’ll see a grabbing cursor appear, and if you click and hold your mouse and drag that slide up or down, you’ll be able to very easily reorder it in the list of slides; I’ve just re-ordered this one to number five, I can reorder it back to the top, and that’s just a really easy way to reorder your slides without having to touch Figma the design file in Figma. You can see here when I move these, it doesn’t impact my ordering or anything to do with the slides or the frames in Figma; the ordering is just meant for Pitchdeck to know what order you want the slides to be in. That’s just a really, really quick and simple way to to reorder your frames.

The other thing that you’ll notice underneath the slide preview is that we’ve got some “speaker notes”; speaker notes are added to every single slide as a text box or a textarea, and it’s just a free text space for you to type whatever you want, or paste whatever you want, and these won’t be shown to the audience or anyone that you’re presenting to, these are purely used for adding some little notes or talking points to each of your slides; you can put different notes in each slide, and we’ll be able to see those later when we export this collaborative presentation from Figma into Google Slides.

The other thing that you’ve probably noticed is that these slides are being animated, and that’s being done over here on the right hand side using these animation tools. Something worth noting is that because we’re going to be exporting our collaborative presentation from Figma to Google Slides, these animations unfortunately won’t be carried across to the Google Slides. These animations are just designed to be used for the “Pitchdeck URL”, which is the default export format, and we won’t go into that format in this particular Figma tutorial.

I do have another Figma tutorial on that on our YouTube channel; if you’re interested in how that works, you can check out that video, it goes for about 30 minutes and it’ll give you a complete overview of how all the animations work and what it looks like to present an animated version of your Pitchdeck using things like a remote control, controlling the deck from your phone, having laser pointers and all this kind of cool stuff; but today we’re just going to be looking at how to export our collaborative presentation slide deck design from Figma to Google Slides; which again, won’t carry over these animations, so please don’t spend too much time on the animations if you’re only going to be exporting to Google Slides from Figma, because they unfortunately won’t get carried across; but you will be able to add animations if you want to in Google Slides itself, once we make that jump from Figma to Google Slides, which I’ll show you in just a moment.

Now that we’ve got all that covered, I’m happy with the ordering, I’m happy with my speaker notes, I’m happy with the slide deck presentation designs; they’re all completely matching up with with the designs that I’ve got in Figma, and now I want to export the presentation from Figma to use it in Google Slides. What we need to do is click on the export format drop down here, and we’re just going to go down to the “PowerPoint file” option; if you click on “PowerPoint file” and then you’ll see the button has changed to say “Export PowerPoint”, and that’s what we want to do (this will make sense in a moment).

If you click on “Export PowerPoint”, what that’s going to do is, it’s going to go through all of our frames and convert them into slides, and more specifically convert them into a PowerPoint file with all of our slides from our collaborative presentation design. Now the PowerPoint file is ready, and it’s going to give us the option to save it to our desktop; I’m just going to do that now, and you can rename this if you like; I’m just going to rename it to “Dieter Rams Slide Example” and save it to my desktop.

Now that’s on my desktop, what I’m going to do is I’m going to minimize Figma and I’ve actually already got a blank Google Slides document ready in the browser; all I did was, I’m signed into my Google account, I’ve got Google Slides open. If you just search for “Google Slides” or however you usually get to Google Slides and open up a blank template; once you’ve done that, you can go to “File”, and then go to “Open”, and then under “Upload”, what you want to do is you want to grab your file that we just exported; in my case I’ve already got this file on my desktop now called “Dieter Rams Slide Example”, I’m going to drag and drop that into this little window here; you can see I’ve got it ready to drop I’m just going to let go and that’s going to upload the PowerPoint file that we just exported from Figma, and it’s going to upload it into google Google Slides.

It’s just finishing uploading now, and once that finishes processing you’ll see here that it’s actually opened it up already for us, and there we go. You can see that we’ve got all the slides that we just had from Figma; everything from Figma is now in Google Slides and it’s looking really, really nice.

You’ll notice a few things here, I’ll just run through a few things that I think is pretty neat; if we go from go from the start we’ve got each element is individual; I can actually move these around if I want to, which is really cool, and I change those. The other thing you’ll notice is down at the bottom here, I’ve got all my speaker notes; the speaker notes that we just had a look at in Figma, they’ve all been pulled across into Google Slides, and I can make that bigger if I want, I can edit these and add more notes, or get rid of some notes if there’s if there’s too many (or if I don’t want them anymore). I can just get rid of those; that’s all completely editable, it’s been carried over, and that’s pretty cool.

The other thing that we can do is, as I mentioned, none of the animations that we set in Figma get pulled through into this this Google Slides document, but we can animate these elements now that they’re in Google Slides. If you click on anything you want to animate, in this case I’m just going to use this image of the radio, and if you click on the “animate” button up here, that’s just going to reveal the animations settings for your Google Slides. I’ve got the image selected and now I can basically just click on any of these animations and play them; and you’ll see here if I advance the slide that that comes in as you’d expect, I can stop that, I can change it, I can make that fly in from the right, and then play that again. That’s pretty fast, but you can see we can essentially animate it the way that we’d like in Google Slides; all these elements are individual, they can be manipulated on their own, and you can pretty much go to town on your animations however you like in Google Slides; and that’s pretty cool, that means we can we can pretty much move all this stuff around and add animations where needed.

The one thing to know is that the text layers are not editable; and the reason for that is they’re being exported as SVG images, and that just means that you don’t need to install fonts; fonts that are missing your slides are not going to look really wonky and totally swap to “Times New Roman” or whatever the fallback font might be, the the idea is to make them as close as possible to the original collaborative presentation designs from Figma; and of course that’s just not going to work in some cases when you don’t have certain fonts installed. If you’re loading this up on a different computer, it’s just not going to really work; for now, at least in this version of Pitchdeck, it will export these as images which are totally independent of each other, but unfortunately they can’t be edited in Google Slides if you do need to change the text, but having said that if you do need to change the text, all you need to do is go back to Figma and re-run the Pitchdeck Figma plugin; re-export the PowerPoint file and and open it in Google Slides and you’ll you’ll have a brand new file with with all your updated text.

While it’s unfortunate it’s not able to be edit it in Google Slides at the moment, it’s currently that way because the design is kind of taking precedence; making sure it renders exactly the same way as you intended from your Figma design once it gets into Google Slides is the top priority at the moment. That’s basically what you can do there, everything else is as usual, you can basically use Google Slides as you already know how to or if you’ve used it before, all this is doing is essentially giving you the starting point of whatever you designed in Figma with your speaker notes is now in Google Slides automatically; you don’t have to create all this or copy paste it from Figma or if you can or whatever, export your images and import them; none of that crazy stuff. You could have a few dozen slides and it’ll import them all straight away, and and that’s going to be really a huge time saver if you do want to use Google Slides to present something you’ve designed in Figma.

That’s pretty much it; I’m going to jump out of Google Slides now. I think we’ve covered all the basics of what you can do in there, and you can obviously look up Google Slides tutorials if you want to get more into the animation side of things, but I won’t be covering that in this Figma tutorial.

Back in Figma; as you can see here, it’s just notifying us that the PowerPoint file was exported correctly. I can basically close out of that now, as I don’t need to to run it again at the moment, but if I do need to reopen it later and export another PowerPoint file to open in Google Slides, all I need to do is go back over here on the right hand side column in Figma and you’ll see a little pancake icon with the word “Pitchdeck” next to it; if you click on that, it will relaunch the Pitchdeck Figma plugin for you, and that just means you don’t have to go to the right right click menu go to “plugins”, go to “Pitchdeck Presentation Studio” and find it; you can just quickly relaunch it from the sidebar.

That’s everything for today I hope this has been a valuable Figma tutorial if you’ve been wondering how to get your Figma collaborative presentation slide deck designs exported from Figma to Google Slides; this is the easiest way to do it, using the Pitchdeck Figma plugin. There’ll be more Figma tutorials if you’re interested in other Pitchdeck formats; if you go to our YouTube channel, you’ll be able to follow along with other Figma tutorials, but for now this one is a complete guide to exporting your collaborative presentation slide deck designs from Figma to Google Slides with just a few clicks, as we just saw. Thank you as always for watching, and I’ll be back very soon with even more Figma tutorials just like this one.