Template Slides in Figma (Video)

Learn more about using Figma as a presentation tool:

presentation.design/posts/figma-for-presentations

‍

Video Transcript:

Welcome. So if I was going to try to sort of replicate presentation software in Figma, what I would do is create some template slides, just like master slides in PowerPoint. So the first thing you want to do in a new Figma file is title it. So you want to come rename it. Um, I'm just going to call this template slides for the sake of this demo.

[00:00:25] Um, so we want to create some slides, but first you want to have like some backbone to it. So the first thing I'm going to do is come and create a separate page, and I'm just going to call this Template. Okay. So, and the reason that I do this, it's just so it's a different workspace. And when you export a PDF from Figma, it's going to grab every frame on a page.

[00:00:50] And so if your template slides are on a different page, they won't show up in your PDF exports. We can go over that later, but so I'm gonna hit F and then I , just tap. I'm gonna go to zero, zero, 1920 by 1080 is my preferred slide size. Um, and then what I'm going to do is let's make this, the, um, the like actual slide.

[00:01:15] We'll start with that. Uh, when, you know, you're making a deck, start with the slide, the cover slide, but for the template, like it's more important. It's like what the slide looks like. So I'm gonna hit the T key. I'm going to come in here. I'm going to do the slide title.

[00:01:34] Roboto is fine for this exercise. Let's make it a little bit bigger. I want to make these like 90% height, like negative one here. And we're going to give it like 24. Okay. Left, aligned top aligned. Um, let's put this at a hundred, a hundred just for this exercise. And then let's make these like 40 total and like 64 high.

[00:02:01] So all that to say, you know, whatever style you like, um, I'm gonna make this Medium too, so we've set a style for our slide titles, and I'm also going to save this as its style in Figma. Um, so that there's a couple of ways to edit this. You know, if you change your mind and want to, you know, scale this a little bit differently.

[00:02:23] Um, so I'm going to come in here and I'm going to create a text style. Um, I'm just going to call it slide titles.

[00:02:32] And I'm going to create some body text, just so there's a placeholder. Um, so let's do body text and let's make this, so we'll go. Tried 24 looks a little small. We'll go 32, you can always change this later, right? That's I guess the whole point is being able to change this later. So I'm going to give this 120 and I think like the 24 is nice.

[00:02:57] Maybe we'll keep like a nice paragraph spacing. Um, and then I do not want this to be right. I want this to be regular and maybe. Let's do it different. Let's just play around, um, maybe something with. A little bit of serif would be nice. I, you know, this is your own style. Maybe you have like a style guide already that you're working off of whatever works for you.

[00:03:26] Um, let's see, where are we? This is, you know, obviously the place to get lost in the sauce. So does not matter. Let's just do Baskerville that isn't even the right Baskerville. Okay. That's a separate problem for a separate day. So, what I want to do is create maybe like two column layout. Yeah. Let's do that.

[00:03:47] Let's call this top title two columns, but it's important to name these because you will be picking them later just from a list. So we'll, let's make this 880 by 720. Um, I think that's good. Let's see, we're going to option drag this. Create a second one. So no that's a little too close. So if I make these 780, what does that gutter look like? Now you can use layout grids and stuff to customize this further.

[00:04:26] Um, I'm going to make these 800, sorry, to waffle. And then I want to make sure that this one is also so perfect. I think that's good. I think, yeah, that's good. So you've got that set. I also want to make this a style again so that we can change this later. Um, very important. And you might want to do this for your footnote style, like a small text, and you might want to do this for your slide title, but for now, let's just start with that.

[00:04:58] I'm going to click on the whole frame and I'm going to create a component. You can just add a description. If you want, you can even link to your documentation. I'm good with just this. I'm going to duplicate it. So command D I'm going to shift this over. Okay. And then I'm going to detach this one and I'm going to call it, um, top title three column.

[00:05:23] How's that. Okay. So maybe we want like a three column layout. So I'm going to also give this one a component and then we want to make these, like, let's do 540.

[00:05:38] And then one more

[00:05:40] These distributed evenly? Yes, they are. They're all 50 apart. Perfect. Um, and then what else? We probably want a blank slide. Um, if you have a footnote, for example, you might want to create like a footnote style on all of these and then have a blank one with just the footnote. Um, but let's just detach this and call it.

[00:06:16] Um, top title only, and then pull off the body text on this one. And again, we're going to make that a component and then maybe we want one more for now. That is the slide, the presentation title, the cover slide. Right. So I'm going to attach this one more time. Cover slide. Um, we do not want this to be the slide title, so we're just going to detach that and we're going to make this, like, whatever we're gonna make it large.

[00:06:49] Um, We're going to make it large again. And we're going to bottom align this one. I think this is probably too big, but that's fine. I think that's fine. And then what we're going to do is we're just going to, maybe I should've just left one of those slide. Yeah. That looks, nice subtitle. Okay. And then we're going to make this one also.

[00:07:17] So another thing we wanna do is make a style for these fills. So we're going to come here, you're going to add this one. We're going to call it slide background. Okay. And then when you do is take all of these and you can apply the same thing. So you can come here slide background. Now they're all the same. And so if you decide to change that later, you can change that in the styles.

[00:07:44] And so that's sort of the benefit of this is you can change it here on your template slide for an individual template, or you can change it globally. So this is for all the slides. Um, great. So great start. And then, uh, we'll probably want to do the same for the text. So let's do this. We're going to do 33, nice.

[00:08:06] We're going to call this one, um, text color. Create that, and then what you can do is if you grab like one, you know, this is 000, right. You can come over here and go select all with same.

[00:08:25] Fill. Yes. So, it's going to select all of them. And then we can just come here and go text color, and now they're all the same. Cool. So you've got that under control. Come back to your presentation page. Now it's blank what you want to do is create frame again, and I forgot you can, you know, you can come in here and grab this.

[00:08:47] This is the same size 1920 by 1080. It doesn't matter. I like to always start my first slide here. And then, um, so we're going to call this cover slide and then we're going to go to assets. Um, you can go to assets or you can actually, um, and it's under local components and you can drag these over and then you just want center.

[00:09:11] This, you can also like center it this way by tapping the middle of both. You can also go over to the template and you can copy this. And when you paste it, it's going to paste it as a, um, instance. So that works too either way. Now, the reason we do that is we want to layer things in here and I'll show you what that looks like.

[00:09:32] So I'm just going to duplicate my cover slide. I'm just going to hit command D and then if you click on the instance, you'll see that it's just the instance highlighted here. If you come over to the instant swap menu menu here, you can swap it here. So you've got, um,

[00:09:52] my first slide.

[00:10:06] right. So I've customized this a little bit and what's cool. Is these instances you can swap them once the text has been entered. So right now it's just column one column two column three. And if you switch this to two columns, you'll see that it carries that text with it. Um, so that's really handy. And then when you y'know duplicate this, you can, um, so I'm just gonna call this one slide one, slide two.

[00:10:37] Um, when you duplicate this again, you can come in here, you could swap this for Top Title only. Now the reason that we layer it is if you want to bring in an image. So let's say like, we're, this is our image, right? You still want to be able to have this inside a frame? You can't nest new things inside instances.

[00:10:57] So I can't put this in here and that's why we have a frame in a frame. Um, and that's why you want to do it that way. Uh, plus just the benefits of being able to swap these and have like a master somewhere like you can come back here and you can decide that, you know, I want this one, just the two column to be a different color.

[00:11:18] Um, or if you wanted to come to the styles menu and you're like, ah, I want these all to be like, uh, you know, a different typeface, like, right. So you've got like a bunch of different ways to customize and that's why, you know, it's kind of nice to have, um, it's nice to have like a couple of different layers of functionality in using, you know, using components.

[00:11:43] You're using styles, right.

[00:11:48] Okay. And then you can put your image here and then you can see it's layered in. Now. If you click on just one of these, go to export and export it as a PDF, right. You're just

going to get this one slide. And if you select all three of these, and then you go to export and you export as PDF, you're going to get three separate PDFs.

[00:12:14] But if you go to the menu file export frames to PDF, like I said, it's going to export this as a singular PDF of every frame on this page. And so the way it works is just like, when you present this, it's going to go left to right top to bottom. So if you order your slides like this, you know, vertically.

[00:12:39] It's still going to be in the correct order. And if you do this still gonna be in the correct order, so left to right top to bottom. Um, but if you do like this Figma, doesn't respect these titles. So it doesn't know that, you know, one and two need to follow in that order. So you always want to make sure that like left to right top to bottom, and that's going to work for presenting and for exporting as PDF.

[00:13:07] So that was like the quickest dirtiest overview. I hope that was helpful. And there's more information on presentation.design, I have an article that I'll link that, um, is just our latest, like sort of Figma features that are really helpful for presentation design. Let me know if you have other questions.