How to create and present animated presentations from Figma using Pitchdeck

Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide deck designs from Figma into a real animated presentation that you can actually present.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to an animated presentation.

Now that we've got that installed, we can jump back into our Figma design file, and in this case I'm just going to use this Dieter Rams "Ten Principles for Good Design" collaborative presentation pitch deck that I designed in Figma; and this is just a really nice demo to see how it all works because it's quite simple and we'll be able to clearly have a look at how to present this directly from Figma. So, the first thing we need to do is open up the plugin by right-clicking anywhere, going down to plugins and then clicking on "Pitchdeck Presentation Studio"; this is just going to run the plugin that we just installed the Pitchdeck plugin and what it's doing right now is it's looking through all of these frames on the left hand side, and it's interpreting each frame at the parent level of the the root level of the page as an individual slide; each each frame is treated as a slide and then it's going through all of the layers in each of those frames and it's interpreting them as individual layers that can be used as elements inside each slide for animations and things like that.

Now that the Pitchdeck Figma plugin has finished loading, you can see here that it's interpreted all of our frames. If we have a look behind here you can see that all these frames have been added into the plugin and each frame is being treated as a slide; you can see up here we've got 11 slides.

The first thing to note is that while it is mirroring the frames from the side here, you might notice that the ordering is a little bit different; in fact, it's exactly reversed. The reason for that is because typically when you're designing in Figma, you'll tend to design one frame and then reuse that frame for the next frame and just change the content; when you copy/paste things in Figma it will copy paste it next to the the frame right next to it, but in the layers panel here it'll actually add it above the current frame; you end up with this strange sort of reversed layer order and that's the reason why the Pitchdeck Figma plugin automatically reverses the slide order by default, because it assumes that you've been copy pasting this whole time and your first frame is at the bottom and your latest frame (or last frame) is at the top.

What it does is it just completely reverses that; straight away you get the correct order that you'd expect for your slides, but having said that if you've done it a different way or you just want to update the order, you don't have to touch any of the frames in Figma, you can leave those as they are; you'll see over here in the Figma plugin when we hover over this little "drag" icon in our layers, if you click and hold that and then drag it you can actually move these layers around freely in the Figma plugin itself, and these are independent of the layers over here; if you update the layer order in here your original Figma file as will not be modified it just is kept in the Figma plugin itself; if you want to move those around you can just drag them and drop them and that will reorder these frames super easily; now this one's frame one and this one's frame for but we do want the "intro" at the top; I'll just put that back up, but you can see there how quickly you can reorder all those frames or create a custom order or just mess about with them just by dragging and dropping them there.

The other thing to note is that if you delete some frames in Figma or if you change something around, you can just click on this little refresh icon here and what that will do is it will just load in a fresh set of frames from Figma; these are kind of already loaded in now, so if you make any changes they won't show up straight away in the Figma plugin but if you do need to make some changes or add new slides or delete slides, the way you can do that is just by changing them in your Figma design clicking on the "Refresh" icon and that will once again load all of those frames and and reinterpret them as fresh slides; but for now we're we're happy with our design we just want to animate it and export it as a presentation we can actually use.

Okay, so the first thing to note is that obviously this is our preview area; whenever we change a slide here, this will change the title and the preview of the slide; this is exactly what's going to show up in our presentation once we export it shortly. There's another section underneath that preview which you can see here; the label says "Speaker Notes" and speaker notes is just a text area where you can add any text that you like; you could put bullet points in here, you can add a paragraph, you can add a few words; anything that you like really. The purpose of the speaker notes is (later on we'll see it shortly), but when we export this collaborative presentation, these speaker notes will get carried over; so if you're presenting this to an audience you can basically leave these notes here and get them later when you're presenting and they'll be stored against these frames. That's just a really nice way of adding some extra context that you don't want the audience to see, and it's just for your personal use down here; you simply just type in some text, you don't have to hit save or anything, it'll just be stored there and that's pretty neat.

The other thing you've probably already noticed is that these layers are not static. Obviously in Figma they're just static, they're just some pixels on a frame, but Pitchdeck allows you to animate these frames. By default, they don't have any animations applied to them, but I've already animated these frames and those animations get saved when you close and reopen the plugin, and that's why you can see that these frames I've already got some nice animations on them.

If you do want to animate some of your slides, for all of the elements of your slides you can choose which ones you do (and don't) want animations on. You can see here when I hover over these layers in the right-hand side, this is basically representing the layers from our Figma file; you can see here it's a it's a one-to-one match with all these layer names; at the top here we've got this this image, we've got text, all these layers of text, and there's a drop-down box here (a select box) where we can click on that, and you'll get a whole suite of animations that you can apply. These are predefined animations, you can just pick one and they will they'll work; what we can do is change that to "scale", you can "rotate" it if you wanted to for some reason; it's a bit extreme, but why not do something crazy like "jello" or something like that where it just kind of comes out; these are a little bit attention-grabbing. The more conservative ones would be at the top where just a very smooth sort of "fade in" and "fade out" and you can change the timing as well; if you want that to come in last you simply drag the timeline over to the right here, and that'll come in after two seconds; you can change that to be however you want, you can also make that go for three seconds and have a really smooth and slow.

The other neat thing you can do is if you've already setup your animations on one frame or you've set up a certain animation let's say on this image that you really like, you don't have to manually recreate that on every single other layer if you don't want to; a quick way of copying those layer styles over to other layers it's just by highlighting the layer that you want the animation for and you'll see this button pop up, if you hover over it only, you'll see a pop-up that says "Copy"; if you click on that copy button it says "the animations have been copied", and what you can do is go to any other frame or any other slide and any other layer and you just hover over that and you'll see that the "Paste" button is now enabled. All you have to do is click on paste, and that will get carried over from whatever you just copied; you can see here now the image animation is exactly the same as the one we just copied, and you can do that from any layer to any other layer and it's just a really nice way of being able to store an animation and distribute it across other layers without having to go into the select box and manually select that animation every time and then drag the timeline if you already know what animation you want; that's just a really simple way of doing that, if you want to go about doing it that way.

Of course, the animation styles are completely up to you; there's there's a lot of options, and if you don't want an animation you can simply set it back to the default and just click on "no animation", that will just disable it; you can see here that just never animates at all, and that's kind of neat. I'll just copy that back again; if I copy that from a different slide I can re-enable that back on here just by copy pasting it, or I can just go to "no animation" and then change it back and it will keep the timeline; it won't remove that if I decide to just turn off the animation to see what it looks like, you can do it that way.

I didn't already say; obviously it changes the preview on the fly, so whenever you change an animation like this as we were just doing, it changes it on the fly but if you've already changed it and you just want to kind of keep looking at it or playing it, this little "Play" icon on the right-hand side of the animations toolbar, if you click on that that will just keep replaying it and you can do that as many times as you want just to see that animation continue. That's roughly it; the animations are designed to be very, very, simple; very straightforward and very easy to replicate across different frames, and that's what they look like. You can have fun with that you can make it adapt to any certain design aesthetic or branding that you that you have, if you have sort of an animation guideline or if you want something a bit more crazy or a bit more fun compared to the more sort of smooth and conservative animations at the top, that's completely up to you.

Now that we've set up our frames, we've ordered them the way we want, we've added our speaker notes, we've added all of animations that we want, we're happy with it; what we can do next is we can export or update this this presentation. I've already created a link before, but if you haven't this will say "Upload Presentation" and if we click on this little select box here you can see that if there's a few formats, and there's two groups as "animated" exports and "static" exports; static exports are things like PDF files PowerPoint files Keynote files; these are things that can get saved onto your computer, and I'll go over them in a separate Figma tutorial, but for today we're going to be looking at the animated one, because we want all these animations to actually do something.

What we can do is, we can (we've already got it selected), but if you select the "Pitchdeck URL" export format and yours might say "Upload Presentation" if you haven't done it before, but mine says "Update Presentation" because I've already created one. I'm just going to click on "Update Presentation" and what this is going to do is, it's going to generate frames or slides from all of this data that we've just put in, all of our image data, all of our speaker notes, all of our animations, all of our layers and it's going to create a presentation URL that we can use and present from anywhere; we'll see what that looks like in a second, at the moment it's just uploading all of the image assets, all of the animation data online, and in a minute you'll get a URL a password-protected URL; you'll only be able to use it if you have the password, and we'll see what that looks like in a second. It'll depend on how many images you have and how fast your internet connection is; I'm in Australia, so my internet connection is horrible (amongst many of the worst ones probably in the world), but we'll wait for this to finish uploading and then I'll show you what it looks like; hopefully it won't take too much longer.

The other thing to know is that if you've already uploaded this and you just want to get the details out (I'll show you in a second), but this little "padlock" icon up here, if you click on that, which you can (I'll show you in a minute), you'll be able to get this URL and password that you're going to see in a second straight away; you don't have to re-upload it every single time to get this link that we're about to see, you can simply get it just by clicking on that icon.

Alright, we're finally done! The Australian internet has worked, and we've got our link. You can see here that it says are a secure presentation link is ready we can copy the secure link below which is this one and the password and this is going to let us present our deck; what I'm going to do is I'm going to copy this password and then I'm going to open up this secure link and you can either do that by copy pasting this link by copy that copying that button, clicking that copy button, or you can click on this secure link icon; that's what I'm going to do.

Okay; I've got my URL here and this has just opened up the URL that we've just clicked on, and you can see that we've got a prompt to login to this deck, and because I've already copied the password, all I need to do is paste that here; I'm going to just paste it and you can see the "Login" button is now available; if I click on that (I'm just going to minimize my Figma window for the time being), I'm just in Chrome at the moment, and you can see here that it's loaded up our presentation after it's authenticated with our password. This is neat, this is exactly what we just exported from Figma; and you can see that we've got this little control panel down here in the bottom left, and there's a few things to go through; I'm going to go through all these with you just so you can see how it all works.

The first thing to know we've got simple controls; if you click on next that brings in our our next slide with all the animations that we set in Figma there's also a slide selector; if you do want to jump to a certain slide straight away you can see all of our frame names have been turned into slide selections; if I want to jump to number six or number nine, I can quite easily do that using this selector and I can use previous and next buttons as you would expect, you might not be able to see this but if I also use my keyboard; if I go "left arrow" on the keyboard and "right arrow" on the keyboard, I can navigate through those frames; if I push the "spacebar", that will also advance the frames as you would expect from something like Keynote or another presentation platform; that's a really easy way to present as well.

The other thing you may have noticed is that our toolbar just disappeared, and the reason for that is it's set to automatically disappear once it's inactive for a few seconds; if you just don't move your mouse, the mouse cursor disappears and the controls disappear; but to get them back, all you have to do is just move the mouse again and they'll pop right up. It will also not hide it while you're using the toolbar, so if you've got your mouse over the toolbar section and you're actually doing stuff, it knows not to to get rid of that; if you've got your mouse down here and you're wondering why it's not going away, you just have to move your mouse away from that toolbar and then it'll disappear and get out of your way; once you've done that, you can navigate with the keyboard once you've actually closed that off and don't want to show it to anyone, that's a really nice way of doing that.

We can also go into full-screen mode; if you click on this little full screen icon on the top the bottom right where it says "fullscreen", if you click on that that will actually take us into the proper "HTML fullscreen" mode; I have no browser window now; end-to-end the screen is just purely my presentation right now. This is perfect if you're presenting on a TV, or presenting on a projector to an audience, you want to go into full-screen mode and make it really seamless. Again, I'm just controlling this right now with my keyboard, using the "left and right arrows" and the "spacebar" if I want to just jump to the next frame. If you're in full-screen mode and you push the "Esc" key you can close it, which I've just done, or you can also click on (you can't see it in this recording maybe), but at the bottom it says "windowed", and if you click on the "windowed" button, which is exactly where the full-screen button was, it just changes to say windowed; if you click on that that'll bring it back to this windowed sort of version; that's really neat. The full-screen mode is awesome for presenting to an audience if you don't have all this desktop stuff or or Chrome window anywhere, that's really nice.

The other thing that we can do is enable the pointer; if you've if you've used laser pointers in real life you will have an idea of what this is; if you click on pointer you can see here that we now have this this red laser beam virtual laser beam that I can use to to point at things; that's really nice, I'm just using my mouse right now to move that around it just follows your mouse and if I again go back down here down to the bottom toolbar you'll see that it's selected the red laser pointer by default but you can scroll left and right with this using your mouse and you'll notice that there's a bunch of different options If we want to use, let's say the "nyan cat", we can select "nyan cat" and that will let me use nyan cat as my cursor. This is kind of just for fun; obviously, if you want to be super professional you can use the the red laser pointer, but if you're like me and you want to use Nicolas Cage's face to sort of highlight things, that option is available.

There's there's a whole bunch of them; we've got Xzibit, Fry from Futurama, there's this funny dog/curious dog, we've got Carlton from The Fresh Prince, you can make him dance on things; there's this there's quite a lot of them; Dodge, Keanu Reeves; just many, many. This one is very funny, I don't know what you would ever use this for, but it made me laugh and I thought it would be quite funny; so that's in there as well. You can play around with those if you want to just have fun with the pointers, that's how you do it. If you want to turn the pointer off you simply just click on pointer again, and that will be toggled off, and once again you've got no pointer.

The next thing I want to cover is the notes section; if you click on "notes", this will open up another window; you can see here I'm just dragging this over here, and you can see on the right-hand side now we've got this this whole new panel that we didn't have before. If I go down here, you can see that at the bottom of my controls it's telling me that we're now "connected to the remote control" and on the remote control it's telling me that we're "connected to the presentation"; these two things are now linked they can talk to each other, so if we click on next in the controls, it will change the slide in the main window. These are two totally separate windows, but they can interact with each other; I can jump around here, I can go to different frames, and the cool thing is you can see up here it's telling me what slide I'm currently on, what slide I just came from, and what the next slide is going to be.

This little navigation bar up here will tell me that above that I've got a slide timer; this is just keeping track of the entire presentation I can pause that and reset it I can start it again pause it and start it this allows me to keep track of how long I've been speaking and it's just a really nice way of keeping track that you're not going over time if your presentation has a time limit and of course you'll notice the speaker notes the speaking it's that we added in Figma and now showing up per frame or per slide whenever we select a new one; you can see here that the notes just keep changing and those are specific to each each frame these never get shown to the audience these are only shown to wherever you've got this; the cool thing you could do is you could have this presentation window over here on one monitor and then you could put your control panel or speaking that's frame on another monitor and control that from a laptop or control that from a secondary screen and that way you can just have all these displayed to yourself including the timer; that's really neat.

The other cool thing which ties into what we were just looking at is the pointer; if you click on this pointer icon in the remote control you can see it brings up this little interface and it's enabled the the remote control on the right hand side and if we drag this little icon around just by using the mouse; if you click and drag on that icon again you can completely remote control that that laser pointer from a separate screen and again you can obviously change those cursors, and this is two way binded as well; for some reason you changed in the presentation mode you can see in the other window it's getting changed and the same thing obviously happens the other way; you can see here and same if we enable and disable the pointer you can see if I enable it from one it also enables it in the other and disables it from the other as well; that's pretty neat that you can do that.

You can change that as much as you want control it from the secondary window and that just completely correlates to the main presentation; you've got a you've got an idea of where that's going to be if you're not actually looking at it the whole time; I can just turn that off again and if we close this off now if we happen to close that window you can see down here it immediately tells us that we're now not connected to the remote control if you want to recon you simply just click on the notes button again and wait for that to open and you can see it's now changed to connect it again and now we're connected; if you do accidentally close it or it drops out you can you can totally just just close it reopen it from here and it'll reconnect itself automatically and now you can see that we've gotten control over it again just by reopening it.

The other thing that you can do which I think I'll have to cover in a separate video (because I don't have a video set up at the moment), but what you can actually do is instead of just using this notes window on your computer and control it from a different screen, the alternative thing you can actually do is control it from your phone. You'll notice next to the "notes" button there's another button called "remote"; if you click on "remote", this will bring up a QR code, and if you've got your iPhone or your Android phone or your smart phone with you, what you can do is open up the camera, hover it over or point it at this QR code that we're looking at now, and if you open up the link that it prompts you with, that'll take you to the browser and on your phone what you're actually going to get is exactly the same interfaces we just looked at in this window here.

This interface is going to load up on your phone, and you're going to be able to do everything that you just did in this remote control from your phone, including the laser pointer you can touch on the touch screen and drag that laser pointer around you; can touch these buttons and and change the slides; you can make these selections; you can do your timer you can read your speaker notes, all from your phone; that's a really cool feature if you prefer to walk around while you're talking or you're not close to the laptop that you're actually presenting from you can do it all remotely just by opening up that opening up that QR code on your phone.

I'd recommend testing that out I can't show you that on my phone right now because I'm not recording my video on the phone but that's how you do it you just open up the remote button scan this QR code and you'll be ready to go exactly the same thing you'll see once you connect to it on your phone this will change to say you're connected to the remote and your phone will also tell you you're connected to the presentation; it works exactly the same way as the notes window but the remote just lets you go mobile and actually take it with you on your phone via the internet; that's super fun.

That's essentially what it looks like; you can obviously customize this presentation back in Figma or if you want to change it, but once it's on this link, you're you're pretty much good to go you can present this from anywhere you as long as you have a browser; that's all you need, it's just a cloud-based presentation and you just take that URL and password that we looked at before with you. As I said before, we'll go back into Figma and I'll show you how to re-access that password if you do need it.

So, I'll jump back into Figma; you can see here this is what we got once we uploaded or updated the presentation to the link we're just looking at. If I close off that Figma plugin and reopen it; and the way you can reopen it quite easily if you've already run the Figma plugin once is, you can go over to the right-hand side here and under "Plugin", you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that icon, what that's going to do is it's just going to relaunch the Figma plugin without you having a right-click, go down to plugins and go down to the "Pitchdeck Presentation Studio" Figma plugin again; that's just a really nice way of launching it back up; once again it's just loading up the frames from our Figma file.

The neat thing about this is it's all collaborative; the the cool thing is because everything is in Figma, and you're already using Figma for all your designs and component libraries and brand and all that sort of stuff, and you've probably got multiple designers or content authors, or production people, all using Figma to generate a presentation like this; whether it's to present to a client or present to another stakeholder or somebody internally because you're using Figma, you get the collaborative design features for free Basically any presentation becomes a collaborative presentation; you're just making these collaborative presentations, and then get all the benefits of being able to export it directly from Figma using this plugin.

Again to get that URL and password back you don't have to re-upload the presentation again if you haven't stored it somewhere if you didn't email it to somebody and just want to really quickly access it; all you need to do is click on this little "padlock" and that'll bring up this little panel here and give you the same URL and password that you you got when you confirm the upload; again you can copy/paste those the password and the URL if you want to send it to somebody, or if you just want to open it really quick, you can just click on that link again where it says "secure link", you just click on that and that'll open up your browser and just use the password again to to get back into it and you can close that off just by clicking on this or clicking anywhere else.

That's pretty much it you can see how everything kind of came together at the end there all of our speaker notes which we saw all of our animations that ended up being in the presentation the order of the slides all worked out the way that we expected it all kind of comes come straight from Figma and I think that's really cool because again if you're doing everything in Figma already and you're already kind of collaboratively creating presentations in Figma you don't need to use a tool like PowerPoint or use a tool like Keynote where everything is disconnected from Figma and you kind of just want to use Figma as your source of truth for creating pictures or presentations and this lets you do that just by translating all that that good Figma design work into of course animations and things that are more specifically designed for a presentation like speaking notes and remote controls and things like that.

Okay, I'll leave it there; I think that was a fairly comprehensive overview of what you can do with the Pitchdeck Figma plugin in terms of generating presentations. In another Figma tutorial, I'll go over these other export functions that I mentioned, which would be exporting your collaborative presentations from Figma to PDFs, exporting presentations from Figma to PowerPoint files, exporting presentations from Figma to Keynote files and exporting presentations from Figma to Google Slides. We can do all of that as well, but for day today I just really wanted to go over the fundamental concepts of Pitchdeck and explain how it works demonstrate all of the the features that are currently offers, and show you how to take your collaborative presentations from Figma into a real platform that you can present with, and get all those cool things like animations for free.

Thank you as always for watching, and I hope that you've learned something from this Figma tutorial that's relevant to what you want to be using Figma for. Of course, if you have any feedback, please let me know, as I'm always trying to make these plugins the best that they can be. Thank you again, and we'll speak to you again very soon.