How to add scrollable slides to Figma presentations using Pitchdeck

Video Transcript

Today I'm going to be showing you how to easily add scrollable mockups to any presentation from Figma using the Pitchdeck Figma plugin.

This can be really handy for presenting website mockups or just longer pages that aren't going to fit into the normal size of a monitor or a TV or whatever you're presenting the presentation on. To get started, all we need to do is install the Pitchdeck Figma plugin by going to the "Resources" icon at the top of your Figma file, searching for the word "Pitchdeck", and and under the "Plugins" tab you'll see Pitchdeck pop up. To run the Figma plugin, all you need to do is either click on this "Run" button here, or I'd recommend clicking on the "More options" button here and clicking on the "Save Figma plugin" link, which will automatically save it to your Figma plugins list for easy access later.

I've already gone ahead and saved it to my Figma plugins, so I'm just going to go to my canvas now, I'm going to right-click anywhere, I'm going to go down to "Plugins" and then I'm just going to go down to "Saved Plugins", click on "Pitchdeck", and that's just going to run the Figma plugin that we just installed a moment ago. As you can see here, what the Figma plugin basically does, if you're new to it, is it takes any Figma frames that are on your current page, and it basically treats them as slides. For example, we've got a bunch of simple slides here each of them have a few different elements; we've got some text layers and some images and things like that and those each get treated as a different layer inside of each slide, but for today we're just going to be mainly focusing on how to add scrollable slides into your presentations using the Pitchdeck Figma plugin.

For example, this is an example of a normal sized frame, this is just a 1920 by 1080 frame, and as you can see it fits nicely into what would normally be a regular screen size, but for this presentation we actually want to present a few website mockups and those are much much longer. These are like, you know, 5,000 pixels long; in this case, what we can do is we can add these longer frames to our page and Pitchdeck will now automatically detect if they're scrollable. If we go through these frames, you can see here that because these ones are longer, it will automatically make them scrollable inside of our presentation. We can go through them in more detail rather than having them squished all the way into fitting into this frame, making them really short and narrow, this allows us to automatically scroll through those longer frames inside of our presentations that are exported from the Figma plugin.

I'll show you what that looks like now; all we need to do is go to the export panel up here, so we're just going to click on the "Export" button and make sure that the "Pitchdeck Presentation" option is selected. Please keep in mind that this isn't going to work for any PowerPoint exports, for example; PowerPoint files need to have all of the frames be the same size, but for our Pitchdeck presentation, which is going to be available in the browser, we can upload that and have these scrollable. I've already created this URL before, but if you haven't, there'll be a button that says "Upload Presentation", I'm going to click on "Update Presentation", I'm just going to click on that now, and this is going to upload the slides that we've added to Figma from the design. You can see here it's basically going through each of the frames uploading any images for each slide, and it's creating those as a URL that will be able to view in the browser.

It's just finished uploading those images, so I've got a couple of options here; I can either send a URL with a separate password, or I can copy this passwordless URL to automatically log in in the browser. I'm just going to do that quickly now, I've just clicked on the little "Copy" icon, I'm going to go to my browser, I'm going to go to the address bar and just paste that in, and once that loads you'll see here that we've got our slide that we loaded in from the Figma plugin. We've got all of our usual slides here which are all animated and fixed size as you'd expect, but the ones that we uploaded that are scrollable we can also select and now scroll within the browser, and we get a little notification here as well.

We can scroll through this and present it to clients, or for clients looking at this link on their own, they can go through and take their time and scroll through the whole slide, and you don't have to worry about the content being squashed down to fit into the height of the slide, you can just slide through those and scroll down the content. We can see that for the other ones as well, we've got this other one; again, it lets you know briefly that it's scrollable just to avoid any confusion. This one's just a Museum website design that I got off the Figma Community, and finally we've got a third one here which is another website mockup also scrollable that we can now scroll through and check out as well.

That's basically it; this is a new addition to Pitchdeck, it just came out this week. If you've been wondering how to automatically add scrollable slides, this is now an automatic option that gets added into the web presentations that you upload from the Figma plugin, and the thing that triggers it is basically if any slide is longer than it is wide, it will automatically create a scrollable selection. For example, the cutoff would basically be a square frame, so if you had a frame that's exactly square, like 1920 by 1920, in that case it would still just be fit into the the presentation slide, and it wouldn't scroll at all. As soon as you get taller, if it's 1920 by 2000, it will automatically convert that into a scrollable one and allow you to scroll through any of those extra bits of pixels at the bottom of the frame.

I just wanted to keep it really quick for today, and show you this new feature in case you've been wondering how to add scrollable website mockups or scrollable pages into your Pitchdeck presentation, this is a really quick way of going about it, and hopefully it gives you a little bit more flexibility with the types of content that you can present when you're using the Figma plugin and the web app to present things to clients and stakeholders. We'll leave it there for today; thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.