Resources and tips around creating and designing slide decks, general presentation guidance, and tool workflows and pro-tips.

figma presentation speaker notes

Using Figma for Presentations: 2021 Update

January 23, 2021

Using Figma for Presentations: 2021 Update

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

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

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

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

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

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

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 →

LogRocket blog logo

  • Product Management
  • Solve User-Reported Issues
  • Find Issues Faster
  • Optimize Conversion and Adoption

Creating presentations using Figma

figma presentation speaker notes

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 Logo

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:

Frame Tool in Figma

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 :

Cover Slide New Frame

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.

Text Menu for Title

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 :

Fill Properties on Right Sidebar

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

Over 200k developers and product managers use LogRocket to create better digital experiences

figma presentation speaker notes

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:

Updating Height Attributes in Sidebar

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:

Text Outside Visible Frame

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:

Drag Arrow to Connect Frames

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:

Moving Text Box Outside Frame

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:

Cover Slide Image Two

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 + [ ):

Moving Small Image onto Cover Slide

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:

Prototype Side Panel

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:

Pasting Mockup in New Frame

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:

Label Next to Mockup

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:

Circle Fill Settings

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:

Centering Text and Sending Back

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:

Moving All Elements Except Thank You

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

Stop guessing about your digital experience with LogRocket

Recent posts:.

Validation research techniques to test value and viability assumptions

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

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

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

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

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

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

Find and Replace

figma presentation speaker notes

Color scale generator

figma presentation speaker notes

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.

Hypermatic Character

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.

Apple XDR Monitor

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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.

figma presentation speaker notes

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

figma presentation speaker notes

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.

1*4d8flb6stHQhiXuRnPq6UQ.png

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.

Frame 3.png

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.

1_0uI3garB3sB1JwZI6ayN4w.png

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.

Frame 1.png

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.

Frame 4.png

  • 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.

1*S3n0E6-nLN3ZdYlxZE97YA.gif

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.

Frame 9.png

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.

Frame 8.png

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.

Frame 2.png

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.

Frame 10.png

Related blog posts

Free July 4th stickers

Jun 24th, 2022

Free July 4th stickers

This July 4th, celebrate freedom with stickers!

Introducing Pro Enterprise

Jul 5th, 2022

Introducing Pro Enterprise

We have launched a new Pro subscription plan for large teams.

How to add stickers to Trello

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.

9a7ee826-15f3-4422-88df-e3c86ed28e76

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

IMAGES

  1. Using Figma for Presentations: 2021 Update

    figma presentation speaker notes

  2. Project Notes

    figma presentation speaker notes

  3. Radio

    figma presentation speaker notes

  4. Figma

    figma presentation speaker notes

  5. Meeting notes

    figma presentation speaker notes

  6. Tone Of Voice Kit

    figma presentation speaker notes

VIDEO

  1. DORMHUB application figma presentation

  2. Figma Tutorial: Add scrollable mockup slides to Figma presentations

  3. Team of John

  4. Figma responsive design breakpoints

  5. How to make poster dakwah with figma

  6. Figma New Update!

COMMENTS

  1. Speaker notes while presenting from Figma

    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 ...

  2. Presenter Notes

    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.

  3. Config Speaker Notes Template

    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 ...

  4. Pitchdeck Presentation Studio

    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.

  5. How to create and present animated presentations from Figma using

    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.

  6. Presenter Note Functionality in Prototypes

    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 ...

  7. Using Figma for Presentations: 2021 Update

    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 ...

  8. Using Figma for Presentations

    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.

  9. A practical guide to presenting design prototypes (+ Figma example

    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.

  10. Creating presentations using Figma

    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.

  11. Why Figma is my new favorite presentation tool

    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 ...

  12. Pitchdeck Presentation Studio Figma Plugin

    • 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 ...

  13. Deck manager

    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.

  14. How to use figma for presentations

    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 ...

  15. What is the best way to present prototypes with speaker notes?

    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 ...

  16. 3 Ways To Use Figma For Design Presentations

    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 ...

  17. Pitchdeck for Figma

    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.

  18. Make beautiful presentations in Figma

    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.

  19. Voice Memo

    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 ...

  20. Free Presentation Templates for Impactful Slides

    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 ...

  21. Figma for Presentations : r/FigmaDesign

    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.

  22. How to present my prototype without showing my notes

    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.

  23. Figma

    #speaker plugins and files from Figma. Explore, install and use files and plugins on Figma Community.