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 how to quickly add slide layouts to your Figma presentations with just one click, utilizing the Pitchdeck Figma plugin.
To get started, go to your Figma file, click on the little "Resources" icon up here, and search for "Pitchdeck." You'll see the Pitchdeck item pop up. Click on that under the "Plugins" tab. You can run the Figma plugin by either clicking this run button here or clicking on this little save icon, which will save it to your Figma plugins list for easy access later. I've already done that, so I'm going to go to my Figma file, right-click anywhere, go down to "Plugins," then "Saved plugins," and click on the Pitchdeck item. This action will run the Figma plugin we saved a second ago.
If you're new to the Figma plugin, it works by taking any slides that are frames, components, or instances on your Figma page and allowing you to load them in as slides to the plugin. For example, if we add a quick frame, go to the frame section, click on the presentation dropdown, and add a 16x9 frame, then click on refresh layers, you can see here that we've got a frame added to our page. You can add different layers inside of that frame, like headings, images, and all kinds of content to our slides, and that will get loaded into the Figma plugin. You can also add animations, links, and other elements to those layers.
There might be times where you don't want to manually do this yourself, and if you want to quickly spin up some slide layouts, the Figma plugin has a feature to help you do that. Access it by going down to the bottom of the slides list and clicking on this "Add slides" button. This action brings up a panel with a variety of preset layouts, common layouts you might want to use for your slides. You can go through, add the different types of slides that you want to include in your presentation, and you will see them added to your page just as you'd expect.
I'm going to get rid of the original slide that we had, go back to my Figma plugin, and refresh that. Now, we've got all these other slides added to our presentation. This is a really quick way of adding different slides to your presentation without needing to manually go through and create all these different layers. And these are all auto-layout as well.
For example, if we duplicate this text area, you can see that the layout automatically adapts. You have full control over the item spacing and things between those different layers. Additionally, we've got full control over the global text styles and global color styles. Over here, you can see different styles automatically added to the document that we can modify. You can change the font for our heading as well, and you'll notice the font in our design has completely changed across all the slides. You can do the same for colors; change the slide heading colors, the paragraph text, and even add an alternate theme.
If we toggle on the "use alt Figma color styles," any new slides added from the layout creator with that toggle enabled will automatically inherit those styles and colors. The same thing applies when the alt styles are turned off; new slides will inherit the normal colors and font settings.
If you want to use master slides, go to the "Master Slides" tab, refresh it, and you'll see any slide components added to your page loaded up under this panel. Clicking on any of these slides will add them as new slides but as instances of that component. If you change the master component, the instance will inherit those changes.
If you wanted to then export this to a different format, you can do that as well. Click on the export button in the Figma plugin, select your export format, and click on the export button. Wait for it to export those slides, and you'll get your presentation as a PowerPoint file, PDF, or any other format you're interested in. Once that finishes, click on the download button, save the file to your computer, and you can open it in PowerPoint. You'll see our slides exported from Figma, editable and ready to be modified as needed.
That's basically it for today. I just wanted to show you how to quickly use this new layout feature to add layouts, color styles, and text styles that can be easily managed from one place. You can update any of this content as you want, replace images and text, and it will all be ready for you to use. I hope this tutorial was helpful, especially if you've been wondering how to quickly add slide layouts without having to manually design these common layouts every time. I'm sure the options will expand over time with more layout choices. For now, you can jump in and give it a try with the ones that are available. Hopefully, this enhances the workflow for you and your team, making putting together presentations quicker and more efficient.
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