Used in this video
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Video Transcript
Today, I'm going to be showing you a quick tutorial on how to automatically arrange and tidy up your slides in Figma using the Pitchdeck Figma plugin.
To get started, all you need to do is go to your Figma file, click on the little "Resources" icon at the top here, and then search for Pitchdeck. Under the "Plugins" tab, click on the Pitchdeck item. You can run the Figma plugin by clicking on this run button here, but I'd recommend clicking on this little save icon here. That'll save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my canvas, right-click anywhere, go down to "Plugins," go down to "Saved plugins," and then click on "Pitchdeck." That's just going to run the Figma plugin we saved a second ago.
If you're new to the Figma plugin, it basically allows you to add a bunch of frames or components as slides onto your Figma page and then load those up into the Figma plugin. You can add animations and links and then export them to various formats. I'm not going to be going into detail about that today; instead, I'm just going to be showing you how to use some of the new tidy features and sorting features to help organize your slides in the Figma file.
The first thing you'll notice is that if we move around our slides on the page, it's obviously going to get pretty messy pretty quickly. Having said that, we can use the order that's on the page to sort the slides in the Figma plugin. For example, if you wanted to sort these slides visually, we can do that in the Figma plugin. For example, if I go from right to left, you can see now it's basically taking the last slide in the columns and making that the first slide. The order in the Figma plugin is different to the order in the Figma file, so that's just the first thing to keep in mind.
The second thing is that we can also drag and drop these manually. So, if you wanted to change the order of these in the presentation Figma plugin, you can do that by dragging and dropping. You can also remove slides from the presentation just by unchecking them. These won't get exported in the exported formats like PDF, PowerPoint, or the web presentation. I'm just quickly running you through those basics to show you how this is now going to work with the Sorting feature.
Now, if I go ahead and click on this little page icon up here in the top left of the Figma plugin and open up this panel, you can see that I've got an option for automatically sorting and tidying our Figma slides. We can basically say how many slides we want per row. In this case, I'm just going to say 12. We've also got an option to add a fade effect for any unchecked slides. I'll show you what that looks like in a second. First, I'm just going to tidy these up by clicking on the reorder and tidy Figma slides button. Clicking on that now, you can see it instantly tidies up the slides based on the order that we already had set up in our presentation over here. Slide one and slide two have been added in that order, whereas the other slides at the bottom have been added down here. The same thing would be true if we rearrange these again. For example, if we swap these around and made this slide go down here, then jump back into our page icon, open up that panel, and again click on the reorder and tidy, that's going to automatically rearrange those slides once again.
Basically, the order in the Figma plugin is the source of truth for this new feature. Whatever you set the Figma plugin order to will automatically be tidied up in here. You can change this to be eight slides per row or make it a really long one at 20 slides per row. As I mentioned a second ago, you've also got this toggle over here to add a fade effect for any unchecked slides. If you toggle that on and then reclick on this button here, that's automatically going to fade any of the unchecked layers in your presentation plugin to an opacity of 33%. That kind of just visually knocks them back. So at a glance, you can get a sense of which slides are actually active and which slides aren't active. Of course, if you re-enable those in the Figma plugin, check a couple more back on, and then opened up the panel again, reorder them again with the toggle enabled, that will automatically re-enable the opacity on those. If you want to get rid of that effect entirely, just turn off the toggle and again click on the reorder and tidy button. That will just make sure the opacity gets reset back to 100%.
That's basically a quick overview of how you can use this new feature to really quickly automatically tidy up your slides. If you're moving things around in the plugin over here and rearranging slides, and you don't want to have to manually reorder them on the page, which can get a bit annoying, you can now just do that in one click. Again, you just go to the pages icon, click on the little reorder button, and that will automatically tidy up your slides.
I hope that's helpful if you've been wondering how to quickly tidy up your slides into a grid and reorder them based on your Pitchdeck slide order over here, this is a brand new feature that will help you do that really quickly and hopefully save a lot of manual time dragging and dropping slides around on your page. Thank you as always for watching, and we'll be back with more Figma tutorials like this one very soon.
Adam Brock
Founder of Hypermatic
The secret weapons used
in high performing teams.
World-class teams of designers, developers and copywriters use our Figma plugins to 1,000x their daily workflows.
TinyImage
タイニー
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Try TinyImageGet started today
Pitchdeck
ピッチ
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Try PitchdeckGet started today
Convertify
コンバート
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Try ConvertifyGet started today
Emailify
メール
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Try EmailifyGet started today
CopyDoc
コピー
Everything you need to easily export, import, localize and update text in your Figma designs.
Try CopyDocGet started today
Bannerify
バナー
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Try BannerifyGet started today
Crypto
ロック
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Try CryptoGet started today
Favvy
ファビー
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Try FavvyGet started today
Pixelay
ピクセル
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Try PixelayGet started today
HyperCrop
クロッパー
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Try HyperCropGet started today
Commentful
コメントフル
Supercharge your Figma comments and gather external feedback from stakeholders.
Try CommentfulGet started today
Weblify (Beta)
サイト
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Try WeblifyGet started today