How to add page numbers to Figma slides automatically using Pitchdeck

Video Transcript

Today I'm going to be showing you how to automatically add page numbers to your slides in Figma using the Pitchdeck Figma plugin.

To get started. al, we need to do is go to the "Resources" icon at the top of your Figma file, click on that, and then search for "Pitchdeck"; under the "Plugins" tab you'll see Pitchdeck pop up. All you need to do is click on the "Run" button here, or I'd recommend clicking on the "More options" icon and then clicking "Save Figma plugin" and that will save it to your Figma plugins list for later.

I've already gone ahead and done that, so I'm going to go to my Figma canvas, just going to right click anywhere, go down to "Plugins", go down to "Saved Plugins" and then click on the "Pitchdeck" item that we just saved, and that'll run the Figma plugin that we just saved a second ago.

To get started, all you need to know if you're new to the Figma plugin, is that the Figma plugin basically works by treating any frames on your current Figma page as slides. In this case, we've got a bunch of slides and each of them are just being set to 1920x1080, and then all we're doing is basically including text layers and image layers inside of each frame and those get treated as the contents of each slide in the Figma plugin, where you can add animations, and embeds, and things like that. For this Figma tutorial, I'm not going to go through all those things in detail; if you want to check that out there's some other Figma tutorials on the YouTube channel that you can look at. In this case, I'm just going to assume that you've already got your presentation and design set up the way you want and all you want to do now is add some page numbers automatically, which we can do using a new feature in the Figma plugin.

To open up that feature, you just click on the little "Page" icon in the top left of your Figma plugin; we can click on this icon here, and that's going to add a new modal or a new pop-up window with some options here for our page numbers. What this does is it essentially creates a slide number Figma component and then it automatically updates the slide numbers whenever those are rearranged or added or removed in the Figma plugin. I'll show you what that looks like now, if you go ahead and click on the "Enable Auto Slide Numbers" toggle, I'm going to click on that, and you can see here when I enable that it actually creates a brand new layer in our Figma file which we can jump to easily by clicking on this little component icon here.

When we click on that, it'll automatically jump to that component in our Figma file, and you can see here that it's got three text layers inside of it; it's got a dark text layer, a light text layer, and a custom text layer, and what those do is it basically allows you to style and customize the page numbers depending on what kind of style you want to use for them. For example, you can see in this case it's automatically gone through and created instances of each of those components; we can see here we've got automatic page numbers on the bottom right of our frames, and we can customize the position of that. For example, if we wanted to change that to be the top right, we can just change that, and it'll automatically move that. We can make it top left, we can do center, all different positions depending on where we want to style those.

You can also do things like add leading zeros; if you want to add zero, for example, zero one, zero two, zero three; you can toggle that as well and that'll automatically do that for you.

Then in terms of the colors, as I mentioned, by default it will set it to this "Auto Text Color" setting, which essentially takes the background color of the frame; in this case, we've got a black background color, which is just a solid fill, and then in this one we've got a solid white, and so what it's doing is it's calculating whether this text layer should be dark or light based on the solid background color of each frame, then what we can do is we can actually customize the light and dark colors.

If we go to our component and then we go to the "Dark Text Color", for example, you can see by default it's set to black with a 75 percent opacity, but of course we can change that if we wanted to make it a different color; we could make that a more purple color and we can change that, and that'll automatically change it for all of our instances here. The same thing goes for the "Light Text Color"; by default, that's just set to white with a 75 opacity, we can obviously go ahead and change that if we wanted to. In this case, we could make it green and change that there, and that will automatically update anywhere that the dark or light versions are being used in the instances.

We can also change it from "Auto Text Color" to just using the "Dark Text Color" if you wanted to only make it use the dark text color for everything, you can do that; same thing with light, you can make it always use the "Light Text Color", or you can go with the third option and make it use a "Custom Text Color" if you want to just have a totally different color in its own kind of category, there's a third option which is the custom text color, and you can go ahead and just change that to whatever you want as well, and that will be applied to everything.

On top of just colors, you can of course style the text. For example, if we change this to top left, and then change the size, you can see when we increase that it's automatically anchored to the top left. The same thing would happen if we changed it to bottom right; if we go to the bottom right, and then we increase or decrease that font size, the instances are automatically constrained to the bottom right. That always allows you to scale the font up or down and keep the anchor position wherever the corner or the edges are in that instance, so that's really handy for doing that.

You can also change the font; we can change that to be bold, we can change it to be a totally different font if we wanted to, we can change that in here and you can basically just customize this however you want. Keeping in mind I'm doing all of this from the master component; we've got the component up here with our three text layers and these are always going to get injected into the instances automatically. You can basically style it in one place and have that style apply to every frame in your file automatically without having to go one by one, you can just style it centrally and that makes it really easy for doing that.

I'm just going to set that back to "Auto", and just use our other components that we had set up, and you can see if we change the ordering of these slides in our Figma plugin, for example, at the moment we've just got it set to sort visually, so we're doing it from top to bottom visually. If we were to reverse that, for example, and sort it from bottom to top, you can see here that the slide numbers changed automatically; we've now got 01, 02, 03, and we're ending at 09 up here because we reversed that order. You can also do this by manually dragging and dropping; if we made "Principle Six" slide one, you can see if we now go to Principle Six, it's made that as the first slide in the ordering of the numbers. Again, if we move that down, changed it to two, it automatically changes it to two. This is a really easy way of keeping all the slide numbers in sync depending on what they're set at in the Pitchdeck Figma plugin.

The same thing applies if you decide to remove some slides from the export; for example, if we didn't want slide six in there at all, we can just remove that and it removes the page number, and it will automatically recalculate all the other numbers based on that. You can see here, the last frame in this case is set to 08; if we start removing more, that'll just keep going down because the total number of slides is being decreased; those slide numbers take into account which slides and how many slides are active in the presentation itself through the Figma plugin. That's a really easy way to keep all of your page numbers in sync without having to manually recalibrate them or update them manually every single time you rearrange them.

That's essentially it; I just wanted to run through all the different ways that you can use this new feature to customize the slide numbers. You can see if the setting is active by seeing this little blue dot next the icon, next to that "Page" icon; that'll just let you know if the "Auto" slide setting is active. You can go in there, and if you want to turn it off, you can just go ahead and click on the "Enable Auto Slide Numbers" toggle again and disable it, and what that'll do is it'll just remove all of the instances that were being added automatically to all of your slides; those go away completely, but it will keep the component hidden, so it won't delete it entirely. The reason for that is just in case you've spent some time styling some of those page numbers, then when you re-enable it, it'll just resume those styles that you've already got set up in there, so you don't have to restyle them if you decide to temporarily disable the slide numbers from showing up. If you did want to remove it entirely from your file, all you need to do is disable this, and then you can go ahead and manually just delete the component; remove it entirely, and then if you then re-enable the "Enable Auto Slide Numbers" toggle, that'll just reset the component back to where we had it at the start, with the default styles and default values.

That's essentially what that looks like there, and of course these will get included with any exports. If you would now export this deck to any of the export options; if you click on the "Export" button, we can either export it to the Pitchdeck web application, which will let you present the slides in the browser and you can share that link with people, or you can export it to PowerPoint, or Google Slides, or Keynote, or we can also just export it to a PDF deck. If we export it to PDF, we can essentially just export that out as a static PDF file, and once that's done we can download it to our computer, and if I open that up now we can see the page numbers will be in there as expected; those are in there, each slide has its own page number just as we designed it in Figma, with the Figma plugin automatically adding those in to each of the slides.

That's what that looks like there; I think we'll leave it there for today I just wanted to run through this new feature with you in case you've been wondering how to automatically add slide numbers to your Figma pages or Figma slides this is a really easy way to go about doing it without having to manually manage a deck especially if you've got dozens of pages that are constantly getting added and removed and rearranged this is a really easy way of kind of putting that on autopilot and allowing you to style them centrally from this slide number component that the Figma plugin helps automatically generate um; yeah thank you as always for watching and we'll be back soon with more Figma tutorials like this one very soon.