Resources and tips around creating and designing slide decks, general presentation guidance, and tool workflows and pro-tips.
![figma presentation speaker notes](https://assets-global.website-files.com/5ff78d023b75cb5e6b483d65/5ff7a17fbf330e069064500c_streamline-icon-designer-giving-a-keynote-3%401400x1400.png)
![](http://sokolural.site/777/templates/cheerup/res/banner1.gif)
Using Figma for Presentations: 2021 Update
January 23, 2021
![figma presentation speaker notes Using Figma for Presentations: 2021 Update](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c454bdeb2b0673a11af0b_Screen%20Shot%202021-01-23%20at%204.48.09%20PM.png)
In 2017, I published Using Figma for Presentations . At the time, Figma was still in beta (and didn’t even have prototyping yet!), and most design teams I knew were skeptical about it as a tool — and of collaborative designing as a concept.
Since then, Figma has grown to hundreds of thousands of users, with design teams from some of the most recognizable brands in the world using it daily. Also, since then, I joined and left Figma as a design education manager and community advocate, and have started my presentation design agency, Zacht Studios .
I’m still betting on Figma to be a significant player in the presentation tool game. I wanted to update that 2017 article with the new strategies I’ve learned and the new Figma features added since to create and present with Figma even better.
First, I like to set up a new Figma file with the intention of creating a presentation:
Template Slides
I like to stick these on a separate page in my Figma file to keep my documents tidy.
Using Figma Components, create the base of each slide type. For example, a title slide, a section break, a top title, and a blank slide with just a footnote.
![figma presentation speaker notes figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c2140f6d548bc35b2a54e_Screen%20Shot%202021-01-23%20at%202.14.26%20PM.png)
Since I am setting these as Components, I can use them in this file, and I will also publish them to the Team Library, so anyone at Zacht Studios can access them.
The next step is to go back to that original page and start making a deck. I create a new Frame of the same size and place an Instance of one of my Template Components inside it. The reason I do this, instead of just placing an Instance on the canvas by itself, is because I’m going to want to layer other content on top of it.
Figma Instances support Overrides. An override is changing a property of an object that is part of the Component. In this case, that could be changing the title of a slide, or it could be something like changing the color or typeface of an element just in one instance. The benefit here is, for example, having a 30 slide presentation created, with each slide having unique content, and then being able to make changes to the template layout rather than each individual slide separately.
You can also set Styles in your file — or use existing Styles from your Team Library — to adjust type and color choices (among other things) across multiple slides at once, including the template slides.
Before I get too far in the content-creation process, I like to set up some additional structure for my slides:
Figma’s grids are powerful. For me, they help maintain consistency, a critical piece of good presentation design . I usually use just one grid layout of columns for an entire project, but there is a lot of flexibility in Figma if you feel comfortable using multiple grid systems. You can pick any Frame to start with and then save your grid layout as a Style. Then you can use it on any Frame.
Auto Layout
Figma’s auto layout helps maintain spacing rules that you create. Much like Grids, it is another structure that can help maintain consistency.
![figma presentation speaker notes figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c376e6aae5f0eefa30f44_Screen%20Shot%202021-01-23%20at%203.47.58%20PM.png)
Now that I have foundational structures in place to lay my content out with confidence, I can use these additional Figma features to mimic more traditional presentation tool features:
Any text or text box in Figma can become a hyperlink. Select the text you want to add a link to and the chain icon appears in the toolbar at the top-center of the interface. These are clickable in the Presentation view (more on that in a second) and in exported PDFs. You can also add hyperlinks in Comments.
You can export your deck as a single PDF file by going to File > Export frames to PDF. Figma will generate a PDF with every Frame on the current Page — another reason to set up your Template Slides on a separate page. Figma organizes Frames left-to-right, top-to-bottom and your PDF pages will follow that order (so will your slideshow in Presentation view, unless you adjust with the Prototype panel).
Sharing/Collaborating
This hasn’t changed much since my original article: “By clicking the share button in the top right corner, you can enter an email address to invite others to collaborate, or generate a shareable link.”
Some of my favorite Figma collaborative features, that eclipse presentation tools like Google Slides, are Observation Mode and Embedding .
When in Presentation mode, using the keyboard shortcut "⌘\" on macOS or "^\" on Chrome OS and Windows hides the toolbar and footer.
If you are going to embed a Figma file on a webpage or share the Presentation mode link with someone else, you can add "&hide-ui=1" to the end of the URL to keep the toolbar and footer hidden there as well.
Alternatively, you can use the Prototype panel to do this by setting the Device to "Presentation".
Animation (aka Prototyping)
Figma is, first and foremost, an UI design tool. With it being flexible enough to do other types of design work, like presentation design, it’s many features can be used beyond their original intention. Prototyping app screens is a core competency, but using that to animate slides and create Keynote-like transitions is more than possible. Smart animate is the Figma equivalent of Keynote's Magic Move.
![figma presentation speaker notes figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c3c25f296c0f0c8c4c5ab_Screen%20Shot%202021-01-23%20at%204.08.42%20PM.png)
Community: Files
Via the Share menu, you can publish your file to the Figma Community . Check out our resources, available for free at figma.com/@zach (me) and figma.com/@zacht (Zacht Studios). Other Figma users will be able to create a duplicate of your file to make their own (they will not be able to edit your original file).
![figma presentation speaker notes figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c3c9aab235f382a471b9d_Screen%20Shot%202021-01-23%20at%204.10.38%20PM.png)
Community: Plugins
As of writing this article, there are hundreds of plugins for Figma .
Here are a few of my favorites:
- Stark , contrast checker and colorblind simulator
- Unsplash , free stock photography
- Material Design Icons , Google's icon library
- LottieFiles , use Lotti animations in Figma
- Brandfetch , easily find and place company logos (great for deck making)
- Map Maker , for generating maps directly on the canvas
Additional Tips
Open your file again in another window with Presentation mode so you can see what your audience is going to see in the presented version of the slide.
![figma presentation speaker notes figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/600c41b8c41110c6b06ef252_Screen%20Shot%202021-01-23%20at%204.32.51%20PM.png)
Use Swap Instance to quickly try out your other layouts for a slide or build out additional slides quickly.
All that to say, there are a lot of great features intended initially for screen design that extend to making great slides fast.
If you have questions or additional tips to share, please reach out: [email protected]
presentation.design is a resource hub by Zacht Studios , The Presentation Design Agency.
Need help creating that presentation template or pitch deck for your company? Zacht Studios is a team of skilled creatives focused on company storytelling and fundraising.
We’ve crafted pitch decks, marketing materials, and unforgettable stories for some of your favorite companies like Adobe, Square, Etsy, and SpaceX. Plus, we’ve supported startups in raising more than $1.41B to date.
Curious to learn more? Reach us at [email protected]
![figma presentation speaker notes](https://assets-global.website-files.com/5ff78d0359c9db1633418052/653a554e7eb6fd8866e00ef1_1500x500.jpeg)
Made by Zacht Studios , The Presentation Design Agency | Listen to our creative interview podcast, Bézier
Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →
![figma presentation speaker notes LogRocket blog logo](https://blog.logrocket.com/wp-content/themes/logrocket/assets/logrocket-logo.png)
- Product Management
- Solve User-Reported Issues
- Find Issues Faster
- Optimize Conversion and Adoption
Creating presentations using Figma
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2023/06/chinweuzegbu.jpg?w=150&h=150&crop=1)
In the design world, creating effective presentations is crucial. Ask any designer, and they’ll tell you that the ability to articulate design concepts can be the difference between an idea that soars and one that nosedives.
![figma presentation speaker notes Figma Logo](https://blog.logrocket.com/wp-content/uploads/2023/12/figma-presentations.png)
And when it comes to crafting these presentations, Figma stands out.
Not only is it a versatile design tool that lets you customize your slides however you want, but its prototype feature allows you to create the sort of unique transitions you won’t get with any other tool.
Surprisingly, creating stunning presentations in Figma is pretty straightforward. This guide is going to show you how you can do it. We’ll also review the pros and cons of creating presentations in Figma.
So, if you’re ready to start creating presentations that captivate your audience, let’s jump right into the steps involved.
Step 1: Create a Figma account
To use Figma, you’ll need to create an account. If you don’t already have an account, go to Figma and click the Sign up button in the top right corner. Enter your email address and password in the fields provided. Click the Sign up button, and you’ll be logged into your Figma account immediately.
Step 2: Create your first presentation frame
Open a New design file . You can rename the file by clicking Untitled at the top of the page. Next, click the Frame tool (F) and select Presentation > Frame 16:9 from the templates on the right:
![figma presentation speaker notes Frame Tool in Figma](https://blog.logrocket.com/wp-content/uploads/2023/12/frame-tool-in-figma.png)
Once you’ve created your first frame, rename it by double-clicking the blue title on the top left of the frame. Enter a new name for your frame and press Enter :
![figma presentation speaker notes Cover Slide New Frame](https://blog.logrocket.com/wp-content/uploads/2023/12/cover-slide-new-frame.png)
You can also change the background color by selecting the frame and picking a color from the Fill options on the right sidebar.
Step 3: Add your title text
To add title text, click the Text tool (T) and write your title. Stick to one or two words per line and use a different text box for each line. To modify your text size, color, and so on, go to the Text menu on the right sidebar.
![figma presentation speaker notes Text Menu for Title](https://blog.logrocket.com/wp-content/uploads/2023/12/text-menu-for-title.png)
With your title text sorted, it’s time to move on to the next step.
Step 4: Add your cover image
Start by drawing the shape that will house your image. It can be a rectangle, ellipse, or any other shape you prefer. We’ll be using a trapezoid for this example.
Draw a trapezoid by using the Pen tool (P) . Next, click the trapezoid and go to Fill in the right sidebar. Select the colored square to open the Fill properties. Click the image icon and select Choose Image :
![figma presentation speaker notes Fill Properties on Right Sidebar](https://blog.logrocket.com/wp-content/uploads/2023/12/fill-properties-on-right-sidebar.png)
Select the image you want to use and click Open . The image will automatically adjust to fit the shape you drew earlier.
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2023/01/Screen-Shot-2023-01-17-at-2.48.23-PM.png)
Over 200k developers and product managers use LogRocket to create better digital experiences
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2022/08/rocket-button-icon.png)
Once your image is in place, it’s time to move to the next step.
Step 5: Create your first transition
The first transition will open the image vertically, while the text will slide in from the left. To achieve this, start by duplicating the entire frame. Select the frame and hit Ctrl/Cmd + D .
On the left frame, reduce the image height to about 1/6th of its size. To do this, select the image and divide the H attribute by six from the right sidebar. Then, align the image center vertically and reduce the image layer opacity to 0 percent:
![figma presentation speaker notes Updating Height Attributes in Sidebar](https://blog.logrocket.com/wp-content/uploads/2023/12/updating-height-attributes-in-sidebar.png)
Next, select the first text box, press Shift , hold down the Space bar , and drag it left until it is outside the visible rectangular frame. Ensure that you hold down Shift and Space to avoid the text box from actually going outside the frame. We need the text to remain within the frame for the transition to work.
In the image below, notice how the text appears outside the visible frame but is still within the Cover slide frame in the layers panel:
![figma presentation speaker notes Text Outside Visible Frame](https://blog.logrocket.com/wp-content/uploads/2023/12/text-outside-visible-frame.png)
Repeat the process for the other text boxes, dragging them a little further each time to create variety in the transition. Then, select all text boxes from the layers panel and reduce their layer opacity to 0 percent.
To finish the transition, go to Prototype from the right sidebar. Select the left frame and go to the blue circle that appears on the right side of the frame.
A plus sign will appear. Click on it and drag the arrow to connect it to the right frame:
![figma presentation speaker notes Drag Arrow to Connect Frames](https://blog.logrocket.com/wp-content/uploads/2023/12/drag-arrow-to-connect-frames.png)
In the dropdown menu that appears, click on Instant and choose Smart Animate . Select Ease in from the animation options. Adjust the timing to 1000ms. You can leave everything else in default.
Test your transition by clicking the Play button. If you’re happy with it, return to Design mode to continue working on your slides.
Step 6: Add more slides
We’ll use a different transition style from the second frame to the third. The image will shrink, and the text will go outside the frame. To achieve this, rename the second frame to Slide 1 . Duplicate it ( Ctrl/Cmd + D ) and you’ll have Slide 2 .
Go to the new frame and move the text boxes outside the visible frame (just like we did previously). But this time, move them to the right. Then, set their opacity to 0 percent:
![figma presentation speaker notes Moving Text Box Outside Frame](https://blog.logrocket.com/wp-content/uploads/2023/12/moving-text-box-outside-frame.png)
To achieve the image shrinking effect, click on the image, hold down Shift , and drag the bottom-left resizing handle inwards until it’s about 1/6th of its original size. Next, set the image layer opacity to 0 percent. You’ll have a blank canvas to add all the elements you wish to include in Slide 2.
Add your heading and body text to Slide 2. Also, add an image the same way you did for the cover slide:
![figma presentation speaker notes Cover Slide Image Two](https://blog.logrocket.com/wp-content/uploads/2023/12/cover-slide-image-two.png)
Let’s add some animation to create a smooth transition from Slide 1 to Slide 2.
Select the image in Slide 2, and copy it using Ctrl / Cmd + C . Go to Slide 1 and paste the image ( Ctrl / Cmd + V ). Resize the image to 1/6th its original size and set the opacity to 0 percent. Move the image to the back using a shortcut ( Ctrl / Cmd + [ ):
![figma presentation speaker notes Moving Small Image onto Cover Slide](https://blog.logrocket.com/wp-content/uploads/2023/12/moving-small-image-cover-slide.png)
This action will create a zooming transition effect.
To animate the text in Slide 2, select all the text boxes and group them ( Ctrl / Cmd + G ). Copy this group and paste it into Slide 1. Move it to the right of the frame using the dragging technique ( Shift + Spacebar ) we used for the cover slide. Set its opacity to 0 percent.
Next, go to Prototype . Connect Slide 1 to Slide 2. By default, Figma maintains the attributes of the previous transition. Leave it as is:
![figma presentation speaker notes Prototype Side Panel](https://blog.logrocket.com/wp-content/uploads/2023/12/prototype-side-panel.png)
You can play the prototype to ensure that everything works as it should. Once everything is in place, we can move on to the next step.
Step 7: Add mockups
As a designer, your presentations will often involve mockups of your design. So, let’s go over how to add mockups to your presentation slides.
Go back to Design mode and add a new frame. This frame will be Slide 3 . Next, create a mockup. You can use Figma plugins like Clay Mockups 3D , Mockuuups Studio , or Vectary 3D Elements to generate quick mockups.
Paste your mockup inside the new frame and resize it to fit:
![figma presentation speaker notes Pasting Mockup in New Frame](https://blog.logrocket.com/wp-content/uploads/2023/12/pasting-mockup-in-new-frame.png)
To ensure a smooth transition, copy the mockup and paste it into Slide 2. Scale it to about 1/6th its original size. Position it in the middle of the frame, reduce its opacity to 0 percent, and send it to the back. This action will cause the mockup to zoom in when presenting.
Go to Prototype mode and connect Slide 2 to Slide 3. Leave the animation settings as is.
Step 8: Label mockups
Duplicate the mockup frame. This new frame will be Slide 4. Use the Text tool to add a title and description to explain the different features in your mockup. Group the title and description together and name it:
![figma presentation speaker notes Label Next to Mockup](https://blog.logrocket.com/wp-content/uploads/2023/12/label-next-to-mockup.png)
To connect the text to the feature it’s describing, draw a line with the Line tool (L) . While drawing, hold down Shift to keep the line straight.
Next, we’ll add an indicator. Draw a circle with the Ellipse tool (O) . Reduce the fill opacity to 50 percent and add a Background Blur of 20:
![figma presentation speaker notes Circle Fill Settings](https://blog.logrocket.com/wp-content/uploads/2023/12/circle-fill-settings.png)
Group the line and indicator together and label it.
To add labels to the next feature in your mockup, duplicate the frame (Slide 4) and add another bullet point indicator and text. Repeat this process for all the features in your mockup, duplicating the frame each time.
Next, go to Prototype , connect the slides, and press Play to see if everything works correctly. If you’re happy with the slides, it’s time to wrap things up.
Step 9: Create the final slide
Once you’ve added all the information you need in your presentation, end the presentation with a final slide.
To do this, duplicate the previous frame to create another slide. Use the Text tool (T) to add a final word for your audience. Center the text vertically and horizontally.
Next, copy this text and paste it into the previous frame. Scale it down to about 1/6th its original size. Press K before scaling it to keep it formatted. Center the text vertically and horizontally. Reduce its opacity to 0 percent and send it to the back:
![figma presentation speaker notes Centering Text and Sending Back](https://blog.logrocket.com/wp-content/uploads/2023/12/centering-text-and-sending-back.png)
Go back to the final slide. Use the dragging method to move all other elements except the “Thank you” text outside the visible frame. Drag them in different directions for a more dramatic effect:
![figma presentation speaker notes Moving All Elements Except Thank You](https://blog.logrocket.com/wp-content/uploads/2023/12/moving-all-elements-except-ty.png)
Finally, go to Prototype and connect the final frame to the one before it. Click Play to see the finished presentation.
Step 10: Share your work
After all the hard work, it’s time to share the finished project with your audience. So, here, we’ll be going over how to Export your work, Share it with your team, and Present it to an audience.
To export your slides as a single PDF file, go to File > Export frames to PDF . Figma will export every frame as a PDF page in your slide deck. Your slides will be organized from left to right and top to bottom, meaning the leftmost frame will be the first PDF page, and so on. Note that if you export your slides as PDF, there’ll be no animation effects.
To share your work with others, click the Share button in the top right corner of the Figma interface. Enter an email address and click Invite , or simply copy the shareable link and send it to anyone you wish to invite to the file.
To present your work in Figma, click the Present button in the top right corner or press Ctrl/Cmd + Alt + Enter . Once in presentation mode, switch to fullscreen by pressing the Spacebar .
Voilà, that’s how you create and share a presentation in Figma.
But is Figma really the ideal tool to use for your next presentation? Let’s help you decide by analyzing the pros and cons of using Figma for presentations.
Pros of creating presentations using Figma
Real-time collaboration.
Figma is great for team projects as it allows multiple users to collaborate in real time, promoting teamwork and efficiency.
With Figma, you can invite up to 500 collaborators to your file (200 can have editing access). Now, that’s a large community of collaborators.
Easy export and sharing
Figma allows you to share your presentations in different formats, such as PDFs, JPGs, or interactive prototypes.
Compatible with multiple platforms
A major pro of Figma software is its ability to work smoothly across various operating systems (Windows, macOS, Linux) and browsers, ensuring compatibility and promoting accessibility.
Access to a plugin library
Another great benefit of using Figma for presentations is the easy access to a library of plugins that can speed up your workflow.
Time efficiency
Figma allows you to duplicate and reuse design components, which comes in handy when you want to create multiple slides with similar layouts.
These are just some benefits that make Figma a powerful tool for creating collaborative and highly accessible presentations. But as we know, every tool has its downsides, and Figma is no exception. So, let’s examine some disadvantages of using Figma to create presentations.
Cons of creating presentations using Figma
Learning curve.
To use Figma efficiently, you must know your way around the interface. For anyone using the software for the first time, there might be a learning curve that can slow down the creative process. This can be an issue if you need to build a presentation with people who have no experience with Figma.
Limited offline access
Although Figma offers an offline mode, there is a limit to the features users can access. This limitation can be an issue when you need to edit or access your presentation from areas with limited internet connectivity.
Design-focused, less presentation-focused
Figma is primarily a design software best suited for designing user interfaces, so it might lack the advanced features you’ll find in dedicated presentation software.
Needs enough RAM and a decent graphics card
For Figma to run smoothly, it requires the right amount of RAM and a decent graphics card. So, if you’re using an older computer, you might not have the necessary specs to run this software.
Now that we’ve analyzed the pros and cons of using Figma, we believe you have enough information to decide if it’s the right tool for your next presentation. So, let’s wrap things up, shall we?
Figma is a powerful and versatile collaborative design tool that you can use to create stunning presentations. Its prototype feature allows you to create unique transitions that make your presentations stand out.
Although there are some drawbacks to using Figma, such as the learning curve involved, the tool has many benefits that make it worthwhile, especially since it’s what many of us designers use in our day-to-day. So, if you’re looking for a tool that you can use to share your ideas in a visually appealing and accessible way, Figma is a great option.
LogRocket : Analytics that give you UX insights without the need for interviews
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today .
Share this:
- Click to share on Twitter (Opens in new window)
- Click to share on Reddit (Opens in new window)
- Click to share on LinkedIn (Opens in new window)
- Click to share on Facebook (Opens in new window)
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2022/06/footer-cta-dots-left.png)
Stop guessing about your digital experience with LogRocket
Recent posts:.
![figma presentation speaker notes Validation research techniques to test value and viability assumptions](https://blog.logrocket.com/wp-content/uploads/2024/06/Validation_research_techniques_to_test_value_and_viability_assumptions.png?w=420)
Validation research techniques to test value and viability assumptions
Learn the different types of value and viability assumptions and a few methods for validation research testing.
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2023/08/nikitisza.png?w=150&h=150&crop=1)
14 principles for designing products for teenagers
Teens are an exciting group to design products for, but we need to consider age, lifestyle, and generational differences.
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2022/08/bart-krawczyk.jpeg?w=150&h=150&crop=1)
Creating UI animations: Tutorial, tools, and best practices
Explore a few different types of UI animations, how they differ from motion graphics, some principles of animation to follow, and more.
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2023/01/ericchung.jpg?w=150&h=150&crop=1)
Using Visily’s AI wireframing and prototyping
Discover what Visily is, why it’s disrupting the UX tools market, and the AI capabilities it enables you to use.
![figma presentation speaker notes figma presentation speaker notes](https://blog.logrocket.com/wp-content/uploads/2023/09/redaattarca.jpg?w=150&h=150&crop=1)
Leave a Reply Cancel reply
- iPhone X, XS & XR
- iPhone 7, 8 & SE
- Apple Watch
- Google Pixel
- Galaxy S10, S20 & S21
- Galaxy Note
- Android Phones
- Android Tablets
- Phone Mockups
- Computer Mockups
- Laptop Mockups
- Tablet Mockups
- Smartwatch Mockups
- Social Media
- Productivity
- Real Estate
- iOS UI Kits
- Android UI Kits
- macOS UI Kits
- Other UI Kits
- Illustrations
- Figma Plugins
![figma presentation speaker notes](https://figmaelements.com/wp-content/uploads/2020/06/pitchdeck-presentation-studio.png)
Pitchdeck Presentation Studio Figma Plugin
Home / Pitchdeck Presentation Studio
- December 1, 2020
Create and present slide decks with animations, videos and links from your Figma designs
• Super easy animations and real-time previews inside Figma. • Embed GIFs and YouTube/Vimeo videos anywhere in your slides. • Attach clickable URLs to any elements in your slides. • Quickly re-order slides by visual position, Figma layer order or drag and drop. • Automatically generates password protected presentation URLs. • Simple, seamless and easy to use presentations in the browser. • Includes speaker notes, timer, laser pointer, and slide controls. • Control your presentation from your phone by scanning a QR code. • Present in fullscreen with notes and controls on a second screen. • Export to PowerPoint, Keynote, Google Slides and PDF. • Relaunch directly from the Figma sidebar in your projects.
— To use Pitchdeck
1. Install Pitchdeck and create a new Figma project. 2. Create as many frames (slides) as you need for your presentation. 3. Add any images and text to your frames to design your slides. 4. Run Pitchdeck inside the page containing your frames. 5. Apply some animations, embeds, links or notes to each slide. 6a. Select the “Pitchdeck URL” format and click “Upload Presentation”. 6b. Or, select PDF/PowerPoint/Keynote/Google Slides and click “Export”. 8. Enjoy your presentation!
For step-by-step video tutorials: • Create and present an animated deck – https://youtu.be/CgHfcrm3oXw • Embed videos and GIFs – https://youtu.be/sT8Rt1DLnCM • Add clickable URL links -https://youtu.be/vyqGdJy8Hdw • Export to PowerPoint – https://youtu.be/IkiG4PWJZEM • Export to Keynote – https://youtu.be/yJ3W1pjS0LI • Export to Google Slides – https://youtu.be/BkMRUL5SvmE • Export to PDF – https://youtu.be/W_W8aYQvg28
— Additional Notes
• 16:9 ratio frames are recommended (eg. 1280×720 or 1920×1080) for the best results.
• If your presentation contains many slides with large images, please note that Pitchdeck may take a bit longer to initially load (and refresh) your frames.
• If you add or update any layers in your Figma file while Pitchdeck is already running, you can click the “Refresh” icon in the Pitchdeck header menu to refresh your layers and make them show up in the Pitchdeck slides and animation previews.
• Pitchdeck will automatically detect if a layer contains areas of full transparency and set “PNG” as the default export format, otherwise it will be set to “JPG”. You can override this to set the export format of any layer to JPG or PNG by adding your own export setting.
• You can set a solid background colour on any slide by setting the “fill” of that frame to the colour you’d like in Figma.
• Presentation URLs will automatically expire after a 30 day period of inactivity (30 days after the link was last accessed and viewed); if you would like to re-activate the URL after it has expired, simply run Pitchdeck in the Figma file and click “Upload Presentation”.
![figma presentation speaker notes](https://figmaelements.com/wp-content/uploads/2020/06/borders.png)
Find and Replace
![figma presentation speaker notes](https://figmaelements.com/wp-content/uploads/2020/10/color-scale-generator.png)
Color scale generator
![figma presentation speaker notes](https://figmaelements.com/wp-content/uploads/2020/12/figpug-units.png)
FigPug Units
- Design Systems
- Sketch Resources
- Adobe XD Resources
- HubSpot Themes
- Framer Templates
- HelpScout Templates
Figma Elements © 2023 | Sitemap | Made with ❤️ in Netherlands FigmaElements is NOT officially associated with Figma, Inc. We are a non-official community looking to share valuable resources to all Figma designers worldwide.
- Skip to Content ↓
- Skip to Footer ↓
Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.
Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.
Export Figma to Sketch, XD, After Effects or Import XD, Illustrator, Google Docs, PDF to Figma.
Easily create and export responsive, production ready HTML emails (eDMs) from Figma.
Everything you need to easily export, import, localize and update text in your Figma designs.
Animate and export production ready banners from Figma to HTML, GIFs and Videos, in seconds.
Securely share your Figma designs and prototypes as password protected URLs or PDF files.
Export production ready favicons (with code) for your website or PWA from Figma in seconds.
Compare and visually QA your Figma designs against real website URLs using smart overlays.
Supercharge your Figma comments and gather external feedback from stakeholders.
Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.
Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.
Magically create and present stunning slide decks from your Figma designs.
Want to turn your designs into a presentable slide deck, or export them to PPTX or PDF? Pitchdeck is for you.
![figma presentation speaker notes Hypermatic Character](https://www.hypermatic.com/assets/img/pitchdeck.6e7c4332.png)
Generic templates not included * (We know you’re a designer).
Design and animate your slide decks in Figma however you want, and the Pitchdeck plugin will take care of the rest. *You won't find any rigid templates (that have nothing to do with your unique brand) here.
Creating collaborative presentations has never been so easy (and cool).
Everything you need for a great presentation — from animations and to GIFs/videos, to slide notes and lasers, to exporting for PowerPoint/Keynote/Google Slides/PDF.
![figma presentation speaker notes Apple XDR Monitor](https://www.hypermatic.com/assets/img/xdr2x.b5b7f9d2.png)
![](http://sokolural.site/777/templates/cheerup/res/banner1.gif)
The simplest presentation interface you've ever used.
Add smooth animations to your any of your layers with real-time, directly inside Figma using the Pitchdeck timeline. Select from dozens of premium presets, or craft your own custom animations.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_EMBED.8f5f0ecb.jpg)
Embed GIFs, videos and iFrames to slide layers.
Simply paste a URL into Pitchdeck to embed GIFs, videos (.mp4, YouTube, Vimeo) and clickable links on any layer. You can also embed content from Figma, Canva, Loom, Lottie, Google Docs/Sheets/Slides, SoundCloud and Spotify.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_PRESENT.629c6f3a.jpg)
Simple, password protected slide decks in the browser.
Create a password protected URL for your slides to give a presentation from anywhere. You'll get everything you need to present your slides from a browser window.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_SCROLL.d50c6e09.jpg)
Showcase longer pages or website mockups with scrollable slides.
Whether you're presenting website designs to a client, or a portfolio piece in a job interview — Pitchdeck automatically handles longer slides.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_ANALYTICS.594d96ef.jpg)
Built-in analytics with custom share links.
See how your deck is performing at a high-level and and per-session; create custom URLs for different stakeholders to easily filter your metrics by specific viewers — all instantly exportable to a CSV file.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_PPTX.9498c53c.jpg)
Export from Figma to PowerPoint, Keynote or Google Slides.
Pitchdeck can also export your slides to files that you can open with Microsoft PowerPoint , Google Slides and Apple Keynote with editable text, or easily share the file via email and Slack.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_PDF.a589241e.jpg)
Export your slides from Figma to PDF.
Export your slides to a single PDF deck in seconds, perfect for quickly sharing via email or Slack. Add optional password protection for securely sending confidential decks under NDA.
![Your browser does not support the <video> tag figma presentation speaker notes](https://www.hypermatic.com/assets/img/PITCHDECK_IMPORT_PPTX.a1f47f46.jpg)
Import slides from PowerPoint into Figma with one click.
If you already have a presentation designed in PowerPoint, you can automatically import the slides from your .pptx file as editable Figma layers with one click. Please note, this feature is still in BETA .
Amazing presentations, directly from Figma.
Pitchdeck helps your team create collaborative presentations directly in Figma — the design tool you already use and love.
1,000x your design workflows. Try Pitchdeck for Figma, today.
All purchases are 100% risk-free . If you're not getting any value within the first 30 days, we'll refund you in full.
Pro Billing Cycle
Save 20% when you pay yearly!
For Casual Users
$ 0 1 user free forever.
- Trial All Pro Features
- Limited Features (After 10 Trials)
- Unlimited PDF Exports
- Limited Customer Support
- No Credit Card Required
Free Forever No Billing
Most Popular
For Most Teams
$ 23 per user per month, $29 per month saving $72 yearly.
- Access All Features
- Unlimited Web Presentations
- Unlimited Web Analytics
- Unlimited PPTX Exports
- Unlimited CSV Chart Imports
- Unlimited PPTX Imports
- Unlimited Spell Checking
- Priority Customer Support
- Billed $276 Yearly
Secure Checkout All prices in USD
For Large Orgs
$ 6,959 + starting at (per year).
- Vendor Onboarding
- Invoice Payments
- License Admin Dashboard
- Premium Customer Support
Custom Billing All prices in USD
Pitchdeck FAQ
Please check out the Pitchdeck Docs for more answers.
“Can I try out Pitchdeck Pro?”
Yes! 10 free trials of Pitchdeck Pro are included, then you can continue using the Free version of Pitchdeck forever, or upgrade to continue using all the extra Pro features.
“What’s the refund period for Pitchdeck?”
We really want you to get value from using Pitchdeck! If you don't see value in the first 30 days , please contact us for a full refund.
“Where can I read about security?”
Pitchdeck is designed to be privacy and security focused — for details about security and how the plugin works, please visit security page on our documentation site.
Welcome to the party, pal. 1,248,000+ plugin users.
Never send a human to do a machine's job — join thousands of top performing designers , developers and copywriters using our Figma Plugins to automate their work.
Privacy and security focused.
All of our Figma plugins are designed for privacy and security first — your data and content belongs in your Figma file.
Extreme Customer Service.
We’re obsessed with providing the best service to always make sure it was a good day for you and your team.
Thanks for your help, your product has been a game changer .
Thank you so, so much, really appreciate it. Amazing service!
I’m very impressed by your customer support.
Can’t thank you enough for the support and the fast turn around in giving us quick solutions!
That’s amazing customer service — seriously. Please send me a link to write a review.
I can’t thank you , your customer service, and your software enough for this.
Amazing! Thank you so much, this is so helpful !
Thanks Adam, your customer service is next to none !
I so appreciate the quick help . Thanks again!
Amazing , thanks so much for all your help, Adam!! 🙌
You are so easy to work with !
We really appreciate all your help !
The hero your team needs, but not the one it deserves.
Join our mailing list to hear about our new Figma plugins as they're released, plus free merch and Nic Cage fanfare.
Follow @hypermatic for feature updates 🚀
Copyright © 2019 - 2024
All Rights Reserved
Figma Plugins
Documentation.
- Privacy Policy
- Terms of Service
- Bannerify Docs
- Commentful Docs
- Convertify Docs
- CopyDoc Docs
- Crypto Docs
- Emailify Docs
- HyperCrop Docs
- Pitchdeck Docs
- Pixelay Docs
- TinyImage Docs
- Weblify (Beta) Docs
Free Figma Templates
- Free Figma Email Templates
- Free Figma Presentation Templates
- Free Figma Banner Templates
- Browse all free templates (38) ⟶
Hypermatic Articles
- From Three to Four
- Company Flow
- Browse all Hypermatic articles (27) ⟶
Hypermatic Tutorial Videos
- How to export HTML emails from Figma to Ongage using Emailify
- How to export HTML emails from Figma to SendX using Emailify
- Browse all video tutorials (204) ⟶
Last updated on Jun 23rd, 2022
Make beautiful presentations in Figma
Figma Illustrations How to
Learn how to make neat-looking slides and present them effectively using Figma.
I get it. Since you discovered Figma, you got used to all its benefits and you find all the other tools to create visuals simply “not good enough”. You want to make pretty-looking slides but Powerpoint or Google Slides keep on putting limits on your imagination and effectiveness.
Well- not to worry about it, you can make your slide deck in Figma. This post sums up tips on how to make beautiful presentations in Figma fast, effectively, and how to present like a pro.
Tip: Before you start, make sure to grab the Figma community file for this guide.
What you’ll learn here
- How to work with Figma frames
- Useful tips for designing the slides
- The quickest way to add icons and illustrations to Figma
- How to adjust the graphics without disrupting them
- How to present with Figma (with a useful hack)
1. Start with frames
To create the slides use Figma frames . You can make a frame with the frame tool, which is enabled by hitting the F key or simply choosing it from the menu. Every frame will become a slide in the final presentation.
As the name suggests, frames create a sort of a border for your slides and all content you’ll drop and move to it will become part of the frame.
The ideal dimensions for each slide (and therefore frame) are 1270 x 720 px.
Ordering slides
Once you get to the presentation view, the slides will appear ordered based on their coordinates on the canvas. First, by x-axis from left to right, and then by y-axis from top to bottom.
That means if your slides are in two rows, the ones in the upper row will be shown first, from left to right, and the view will continue to the second row, again left to right — kind of like when reading a book.
Find the Frame tool in Figma
Once you get to the presentation view, the slides will appear in the order you have the frames numbered in the Figma file, so it’s best to create them in the order you want to present them or make sure they are numbered correctly.
Tip: Check Clip content in the right-hand side panel when the frame is selected. The graphics and shapes you’ll use will not be going over the frame’s edges in your file.
2. Design the deck
The most fun part- at least for me :). I always start by choosing the color palette for the project. I use site coolors.co to get inspired.
The color palette I used for the slide deck
Then, I set up the slides by placing text snippets and maybe background patterns or shapes, so I have an idea of the style of the final presentation.
3. Add icons and illustrations supa-fast
Nice icons and illustrations always make your slides more interesting and key points memorable. With Iconfinder’s copy-to-clipboard feature, you can copy and paste them to your Figma file super-quickly.
Tip: Go download the free illustrations pack used for these slides.
- Go to Iconfinder and find the graphic you’d like to use.
- Hover over the chosen item and press ⌘+C on Mac and Ctrl+ C on Windows. The format that is chosen will be copied to your clipboard. I recommend copying SVG. It’s better quality and you can easily change the colors to match your design then.
- Paste it into your Figma file.
It’s super-quick!:) And you don’t need to install any plugins. You just need to be on a Pro plan to be able to do this, so if you’re not a Pro subscriber, you can jump on a 7-day free trial and give it a go.
4. Adjust the graphics
Make sure to use the Scale tool in Figma when you are enlarging the graphics or making them smaller. You can enable it by hitting the K key or choosing it from the menu (under the cursor icon). By using this tool, you will keep all properties of the graphic intact.
If you want to make the illustrations or icons match your color scheme, the quickest way is to find Selection colors when an item is marked, choose the color you’d like to change, and pick a new one that matches your palette.
This way, you will recolor all elements with the same color within the graphic.
5. Present like a pro
You turn on the Presentation view by clicking on the play button in the right upper corner in Figma. Then you can move between the slides using keyboard arrows.
If you want to share your slides made in Figma you can generate a sharing link under the blue sharing button. If don’t want to show off the whole Figma file add ?viewer=1 at the end of the sharing link URL. That way the user on the other end will only be able to access the file in the presentation view.
Related blog posts
Jun 24th, 2022
Free July 4th stickers
This July 4th, celebrate freedom with stickers!
Jul 5th, 2022
Introducing Pro Enterprise
We have launched a new Pro subscription plan for large teams.
Jul 6th, 2022
How to add stickers to Trello
Learn how to add your own stickers to Trello and make your board much more fun to work with (+Free sticker pack).
Get 10 credits for premium content
Sign up for a free trial of Iconfinder Pro. Access all high-quality icons and illustrations, invite your team members and get the first 10 credits on us.
Then $9 per month. Cancel anytime.
Get the Reddit app
For all things to do with the Figma collaborative design tool www.figma.com. For commercial or other addons, please go to /r/FigmaAddOns
Figma for Presentations
Hi, is there any plugins or workflow tips to use Figma as a presentation tool?
Some nice-to-haves:
Any way to quickly link together slides that are already in order?
Any way to re-link slides if they were linked together, but then re-ordered afterwards?
Any way to generate a table of contents or list of slides? Perhaps with links to the specific slides/sections?
How to present my prototype without showing my notes
I want to make my prototype presentation effective. I have prepared a script, so I know what to say. I have two screens plugged to my computer.
I tried using plugin Pitchdeck Presentation Studio, so one 1 screen I can see my presented prototype and on another screen my script. Unfortunately, this plugin limit me, and I’m not able to add smart animations/pushes to my prototype.
![figma presentation speaker notes 9a7ee826-15f3-4422-88df-e3c86ed28e76](https://europe1.discourse-cdn.com/figma/original/3X/7/f/7fe87a3eb7da5c2c7886ed0208fd16197d7ca7df.png)
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
![](http://sokolural.site/777/templates/cheerup/res/banner1.gif)
IMAGES
VIDEO
COMMENTS
I've been experimenting with using Figma as a presentation tool instead of Keynote/GSlides, on the theory that editing and theming should be a lot easier with components (and I should be able to achieve a more polished result). The biggest challenge so far is speaker notes: showing my notes on one display, synced to the presentation (prototype) on the other. I've been able to jury-rig ...
Presenter Notes. I love using Figma for my slide decks but I miss having my notes while in presentation mode. If I could have similar functionality I would adopt Figma as my slide deck tool 100%! I second this! The best work-around I've found is turning on Comment mode while presenting by pressing C.
libraries ui-kits wireframes design-templates desktop-apps-websites mobile-apps presentations resume-templates portfolio-templates design-tools accessibility editing-effects file-organization import-export prototyping-animation visual-assets fonts ... Config Speaker Notes Template. ... Community is a space for Figma users to share things they ...
Simple, seamless and easy to use presentations in the browser. Includes speaker notes, timer, laser pointer, and slide controls. Control your presentation from your phone/tablet by scanning a QR code. Present in fullscreen with notes and controls on a second screen. Spell check your Figma slides in dozens of languages.
The purpose of the speaker notes is (later on we'll see it shortly), but when we export this collaborative presentation, these speaker notes will get carried over; so if you're presenting this to an audience you can basically leave these notes here and get them later when you're presenting and they'll be stored against these frames.
Presenter Note Functionality in Prototypes - Share an idea - Figma Community Forum. Share an idea. Aneta October 5, 2021, 6:36am 1. I want to make my prototype presentation effective. I have prepared a script, so I know what to say. I have two screens plugged to my computer. I tried using plugin Pitchdeck Presentation Studio, so one 1 screen I ...
January 23, 2021. In 2017, I published Using Figma for Presentations. At the time, Figma was still in beta (and didn't even have prototyping yet!), and most design teams I knew were skeptical about it as a tool — and of collaborative designing as a concept. Since then, Figma has grown to hundreds of thousands of users, with design teams ...
You can switch between Frames (Figma's term for an artboard/canvas) as you would between multiple slides in presentation-specific software. With the 1.4.2 release of Figma you can switch between Frames easier using "N" and "Shift + N.". Whichever Frame you have selected is the one that is displayed on the secondary display.
2. Ditch The Extra Program. If you're using a traditional presentation program (i.e., Keynote, InDesign, Google Slides, or the ever beloved PowerPoint) to create additional slides to accompany your prototype — this is likely slowing down your workflow.
Enter an email address and click Invite, or simply copy the shareable link and send it to anyone you wish to invite to the file. To present your work in Figma, click the Present button in the top right corner or press Ctrl/Cmd + Alt + Enter. Once in presentation mode, switch to fullscreen by pressing the Spacebar.
The two features Figma doesn't have (because it wasn't designed to be a presentation tool), are spell check and speaker notes. My workaround for speaker notes is using the desktop app "Stickies ...
• Includes speaker notes, timer, laser pointer, and slide controls. • Control your presentation from your phone by scanning a QR code. • Present in fullscreen with notes and controls on a second screen. • Export to PowerPoint, Keynote, Google Slides and PDF. • Relaunch directly from the Figma sidebar in your projects. — To use ...
About. Deck manager helps you manage a collection of frames as a slide deck. You can add and amend notes. When you are ready, you can export the current page as a slide deck as Markdown or JSON. All the images are automatically inlined and the speaker's notes are included. The Markdown file is compatible with Deckset for Mac and Marp.
How to Create a Presentation in Figma. Creating a presentation in Figma is fairly easy. In order to create a presentation in Figma, you simply need to set up the artboards in order visually and, most importantly, in the left column since that will determine the order by which you'll view the final presentation. How to share a presentation in ...
While presenting prototypes to the users, I want to read my notes. Similar function in Power Point where yoyou can present the slides and notes in a separate view. Is there such a function in Presentation View or a handy tool to present in full screen and see my notes on a separate screen? I tried Pitchdeck presentation studio plugin, but all my simulated clicks and scrolls are not working ...
3. Share your designs with Figma's presentation view. Figma's presentation view allows you to present your designs in a full-screen mode, making it easy to showcase your designs. You can also ...
Design decks using Figma — add speaker notes, links and embeds. Share or present via a password-protected link (with built-in analytics). ... Pitchdeck helps your team create collaborative presentations directly in Figma — the design tool you already use and love. 1,000x your design workflows. Try Pitchdeck for Figma, today.
3. Add icons and illustrations supa-fast. Nice icons and illustrations always make your slides more interesting and key points memorable. With Iconfinder's copy-to-clipboard feature, you can copy and paste them to your Figma file super-quickly. Tip: Go download the free illustrations pack used for these slides.
Record and share audio notes for teammates with the voice memo widget. Provide feedback that's hard to capture on a sticky, asynchronous updates, or a quick message to let someone know they're doing a great job. You can record up to 30 seconds of audio and a title to the recording for more context. When someone listens to the recording ...
From sleek slideshows to dynamic presentations, find the perfect template to captivate your audience and convey your message effectively. Start creating impactful slides today. Presentation templates are paid or free, per template creator choice. Explore over 1000+ free presentation templates and elevate your slides with our impactful ...
This allows you to structure your slides in rows by topic in the editor view. If for some reason you do need prototype connections, the Slide Show or Prototyper plugins can add them automatically. I would avoid linking slides together and, instead, rely on the default behavior of where the frames are placed on the canvas.
Aneta1 August 25, 2021, 7:14am 1. I want to make my prototype presentation effective. I have prepared a script, so I know what to say. I have two screens plugged to my computer. I tried using plugin Pitchdeck Presentation Studio, so one 1 screen I can see my presented prototype and on another screen my script.
#speaker plugins and files from Figma. Explore, install and use files and plugins on Figma Community.