create presentations with figma

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

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

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.

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.

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

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.

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]

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 →

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

Creating presentations using Figma

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.

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:

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 :

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.

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 :

Select the image you want to use and click Open . The image will automatically adjust to fit the shape you drew earlier.

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

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:

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:

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:

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:

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:

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

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:

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:

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:

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:

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:

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:

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)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Service design in action: Creating memorable experiences for small businesses

Service design can help our organizations innovate customer experience and build brand loyalty — and it’s great for small businesses.

Combating addictive design is the UX challenge of 2024

Digital addiction is bad for your mental and physical health. Learn what trends encourage this concerning behavior and how to avoid it.

21 UX case studies to learn from in 2024

This article aims to inspire you with 21 carefully hand-picked UX case study examples, each offering valuable lessons.

What is DesignOps? The essentials of DesignOps

DesignOps is a set of best practices and principles that aims to streamline the effectiveness of design teams.

Leave a Reply Cancel reply

Home Blog Design How to Use Figma for Presentations

How to Use Figma for Presentations

Figma is a familiar name to hear or even a work tool for those in the web development and graphic design industry. Still, for those unaware of what we’re talking about, Figma is a UI Prototyping software. Although news about Adobe acquiring the software was the uproar of late 2022, recent news points out a canceled deal between both parties . Alongside Sketch and Adobe XD, they are the preferred tools for UX/UI projects due to their simplicity and collaborative features, but where does Figma fit for presenters?

In this article, we will explore how Figma can benefit presenters by creating more powerful graphics, such as how to convert Figma graphics into PPT presentations and vice versa. Let’s get started.

Table of Contents

What is Figma and How Can it Help Presenters?

Getting started with figma, adding frames to figma, using templates vs. creating from scratch, how to import ppt templates to figma.

• Adding and Editing Text in Figma
• Incorporating Visuals and Effects in Figma

Adding Transitions in Figma

How to export figma designs to powerpoint, presenting and sharing your figma presentation, plugins and tools to check in figma.

Before we dive into how Figma can transform your presentation game, let’s first understand what Figma is. Figma is a cloud-based design tool that enables collaborative design, prototyping, and user interface (UI) design. It’s renowned for its flexible design tools, accessibility, and real-time collaboration features. 

Unlike Illustrator, Figma is intended for collaborative projects between web software designers, as it simplifies design decision revisions, helps accelerate the design-to-code transition, and its easy-to-share link access declutters the file-sharing process. In the case of presenters, it tailors a quite specific niche: teams inside IT companies that have to create presentations but don’t want to acquire other dedicated design software licenses. As the mastery of Figma is a common factor for this type of presenter, they intend to know how to properly apply those tools to presentation design.

Additionally, Figma natively supports SVG format, which allows users to import PowerPoint and Google Slides templates into its platform and customize them for the presentation requirements.

Go to Figma’s website and sign up for a free account (or premium) using the Get Started from Free button.

A new dialogue box will open, asking to provide the email and password for this new account or using Google to sign up.

Now that we have created the account, this landing page will welcome us each time we log into Figma. It mainly displays the Teams in which we are members and any free team will be flagged with the Free logo in cyan color. 

Click on Design File to start creating your new Figma document.

Designing Presentation Slides in Figma

Figma templates are available by browsing in the library, and we can access a limited selection depending on the topic we choose. To locate this library, click the Or browse templates link in the dashboard.

The Community, a resource intended for Pro users, has a broader selection arranged by topics. 

If you are a free user, you have to either work your way through the vast range of graphic design tools or pick from those limited templates in the library, hence why we highly advise you to check our selection of professional PPT templates and Google Slides templates , which you can customize and import into Figma to save time and design decisions. Below, you can see an example of a Figma presentation template for branding.

This FigJam file (NB: FigJam is a whiteboard tool incorporated into Figma. Users can buy just a FigJam subscription if their intent is not to use advanced prototyping tools) is a simplified version of what you can do with Figma, and you can add – from left to right – the following options:

• Shapes (the circle button, which allows you to switch to a square, rhombus, triangle, and a selection of simple shapes)
• Sticky notes
• Stickers – by clicking the More button, we can browse the library, import a new template, enable widgets or plugins, insert code blocks, and add a timer or media elements.
• Connector arrows
• Section boxes (to create new layouts)

For the purpose of our tutorial, we will start from scratch, import a PPT presentation template, and customize it to suit our presentation’s needs.

In Figma, we work with frames rather than slides. It is a common mistake presenters make, and it often leads to confusion when switching between slides. To create a new slide, access the Frame tool (it is the icon resembling a hashtag). You can create the frame by drag and drop to your preferred size.

Or you can save time by using the frame preset listed for presentation, in this case, in a 16:9 aspect ratio.

As you can see, by default, Figma places the frame too close to each other. We recommend moving them a bit apart so it gets easier if you intend to add some transition effect.

We can place elements like mockups inside our presentation slides using third-party plugins.

Unlike other software options, native PPT or PPTX are not accepted. If we want to import PPT templates to Figma, we must convert the presentation slides to SVG format. 

First, open PowerPoint and go to File > Export > Change File Type . Select the option Save as Another File Type .

From the format list, select SVG format.

We can select just one slide or the entire slide deck. Then go back to Figma and click the F logo icon, File>Place Image . You have to click and drag to resize the image, and by holding SHIFT, you preserve the aspect ratio.

Because we’re working with SVG format, Figma will group the template elements together in a group called Clip Path Group . Expand it to access each individual element (it’s best to preserve them grouped so you can move the slide without any issues).

Adding and Editing Text

One of the advantages of the SVG format is that it allows us to edit the imported elements. For instance, if we select the Conclusion placeholder text and want to change font weight and color, we can do that at the right sidebar options.

We can also add text boxes by clicking on the T icon at the top bar and dragging the text box wherever we need to place it.

If we want to add a hyperlink to the text placed, click the Create Link tool and insert the desired URL.

Incorporating Visuals and Effects

As we did with the slide, we can add or replace visual elements inside our Figma presentation design. Let’s take, for example, the following slide imported to Figma, which boosts an image of students in the park. 

We want to replace that image from our PC with another. To do that, go to the right sidebar, and with the placeholder area selected (it should have an image icon), go to Fill > Image and then click Choose Image .

After that, the image is loaded, and we can crop, extend, reposition, and even work with the photo editing sliders available to make it suit our project’s needs.

One considerable difference we need to consider is that Effects and Animations in Figma are intended for web design, meaning you won’t get the entire selection of effects you might be used to in PowerPoint or Google Slides. 

Also, animations are mostly geared toward navigating different pages rather than making elements stand out, like in presentation software. Some complex animation effects are only available to Pro users. However, you can still use Figma for presentations, and most of the transition functionalities can be achieved in prototype mode. This way, you can design your slides using frames define the interactions between them, and then press the play button and present it.

Go to the Prototype tab at the right sidebar menu to create a transition between slides. Hover over the first frame and locate a plus icon. 

Click on it and drag the arrow into the next frame. A new menu will open with the effects available for the transition.

Out of the possible animation effects, here’s a brief description of each one.

• Instant: This transition immediately switches from one frame to another with no visible animation.
• Dissolve: This effect gradually fades out one frame while fading in the next, creating a smooth transition.
• Smart Animate: Figma’s Smart Animate recognizes matching layers between frames and animates these layers smoothly. It’s useful for creating more complex and realistic animations. We highly recommend using this one.
• Slide In / Slide Out: These transitions make the frames slide in or out from different directions (left, right, top, bottom).
• Push: Similar to Slide In/Out but also moves the current frame in the opposite direction, giving the effect that one frame is pushing the other out of the way.
• Move In / Move Out: These are similar to Slide and Push but typically have a more subtle movement, often used for modal or pop-up animations.
• Custom: Allows designers to create a more tailored animation experience by adjusting properties like easing and duration.

Exporting from Figma to PowerPoint is the reversal process we did before. On the right sidebar, we find the option to export. Click on it to make it active, and you can select the scale for the created graphic and the format of your preference (between available options: PNG, JPG, SVG, and PDF).

The format to be selected depends on the kind of output you require. We recommend working with either SVG or PDF for editable files. For completed work, choose PNG as it’s the best quality format.

Unlike PowerPoint, the slideshow mode in Figma works frame by frame, meaning you won’t be able to switch between slides if using Figma if you create them by page. Pages work like a new document in the same project. To fix this issue, copy the assets into a new frame and place it next to the previous one you did on the same page.

Click the play button at the top bar to access the slideshow mode.

Figma will open a new tab in your browser, focusing only on your selected page.

NB: Figma may show 1/2 page if you try to place the slide, but something went wrong with the sizing, and you try again. In this case, you will only get one page in the right size and a wrongly sized one, not the other pages you created. To fix this issue, check if you don’t have an extra asset of the imported presentation slide but in the wrong format.

If you work by frames, here’s the result when entering the slideshow mode.

Alternatively, you may export your Figma presentation to PowerPoint and run the slideshow from there. A convenient way to export your presentation from Figma to PowerPoint is Deck. This plugin will allow you to choose the Frames to export and prepare a .pptx slide deck with your presentation in editable format. 

Then, you can continue your work in PowerPoint or just use PowerPoint to present your slideshow.

Although Figma is a prototyping tool, we can find some useful plugins for presentation design.

• Deck: For users looking to take their Figma presentations into PowerPoint in a fully editable format, work with Deck . Remember that some effects, like complex transparency layers, may not be supported by PowerPoint.
• Font Replacer: A useful tool for replacing fonts across multiple frames simultaneously. It works best with the pro version, as its free mode has some limitations.
• Feather Icons: Offers a collection of open-source icons. The icons are uniform in size and stroke weight, but the collection is somewhat limited.
• Contrast: Useful for checking color contrast ratios (adhering to AA and AAA standards). It only works on solid fills.
• Max Line Length: Helps maintain typography rules by checking the maximum character count across text frames. It does not support mixed fonts.
• Datavizer: An alternative to Microsoft Excel. Great for creating data visualizations like charts and graphs , with the ability to feed in your data?. 
• Remove BG: Efficiently removes background images with just one click. Another turnaround is to remove the background inside PowerPoint . 
• Image Tracer: Converts raster images into vector graphics, simplifying the creation of vector assets. If you find this tool insufficient, you can check our selection of vector images for presentations . 

Figma shouldn’t be considered a presentation software alternative to PowerPoint, Google Slides, or Keynote. It is an extremely practical tool for specific presentation niches, like web development or product development, but it won’t fit the requirements of most industries. The secondary downsize is its steep learning curve compared to the customary presentation software options.

If you intend to create advanced or complex shapes for your presentations, pair PowerPoint or Google Slides with Adobe Illustrator and work around vector graphics. Presentation templates and online vector graphics simplify that process for most users. On the other hand, if you want a cloud alternative with collaborative options, we invite you to discover our guide on how to work with Canva and PowerPoint to create presentations .

Like this article? Please share

Design, Presentation Approaches Filed under Design

Related Articles

Filed under Google Slides Tutorials • April 23rd, 2024

How to Align Objects in Google Slides

Optimize your layouts by learning how to align objects in Google Slides presentations. Step-by-step guide with screenshots.

Filed under Design • March 27th, 2024

How to Make a Presentation Graph

Detailed step-by-step instructions to master the art of how to make a presentation graph in PowerPoint and Google Slides. Check it out!

Filed under Presentation Ideas • February 29th, 2024

How to Make a Fundraising Presentation (with Thermometer Templates & Slides)

Meet a new framework to design fundraising presentations by harnessing the power of fundraising thermometer templates. Detailed guide with examples.

Leave a Reply

How to use Figma for presentations

Forget about PowerPoint. Here is how to use Figma for presentations instead.

Why use Figma for presentations?

Figma offers several advantages over PowerPoint, making it a great choice for creating visually appealing and collaborative presentations:

• Improved Collaboration and Feedback: Figma allows multiple users to simultaneously work on the same presentation and leave real-time feedback and comments.
• Enhanced Design Flexibility: With Figma, you have more control over the design elements, enabling you to create visually appealing presentations. For anyone using Figma for design, PowerPoint feels like a straitjacket.
• Interactive prototypes (and video) : Figma allows you to create interactive prototypes within your presentations.
• Easy sharing and compatibility : You can easily share your Figma presentations with others without worrying about compatibility issues.
• Infinite Canvas: Move your slides around like you want on an infinite canvas.
• Observation mode: Others can follow your presentation remotely without screen-sharing.

Getting Started with Figma for Presentations

Creating your first slide in figma.

Fire up Figma and get started creating your first frame. To do that, click F and select Presentation > Slide 16:9 (on the right side of Figma) as the size of your slides. Congrats! You now have your first slide!

Organizing Presentation Frames

The key to working with presentations in Figma is organizing your presentation frames ordered from left to right, then top to bottom. Just like you would read a book. There is no need to create connections and flows .

Simplifying Slide Naming with Super Tidy Plugin

Pro-tip: You don’t have to waste your time giving names to your slides. Instead of manually renaming frames, I automate the process using the wonderful Super Tidy plugin when I want to clean things up. (As you can see in the above image).

Template Slides in Figma

Creating component templates for reusability.

Often when creating presentations, you want to reuse templates for slides. In Figma, you can create components: Create the base of each slide type, like a title slide, a section break, a top title, and a blank slide, and convert the frame to a component ( ⌥ ⌘ K) . I like to create this on a separate page to make sure these don’t come up when I present. To use your template slides, return to your first frame and place an instance of your new component inside it.

Make sure to use text component properties , or name your text layers the same across components to easily switch between templates and keep the same text.

Sharing Templates with Team Library

Pro tip: You can also publish your new components to your team library so that other people in your company can use your slide templates. To do this click on the title of your Figma file and select “Publish Library”. You’ll then open a Library publish dialog where you select which components you want to publish, and click “Publish”.

Reusing Fonts, Colors, and Spacing

You can also set styles for fonts and colors or variables for spacing to reuse and easily adjust choices across multiple slides.

Creating Grids for a Uniform Look

Figma also has a powerful grid solution to make your presentation more consistent. Figma has an excellent walkthrough on how you can use grids on Figma Learn .

Animations and Transitions

If you want to add animations and transitions, click on the prototype panel at the right of your screen and drag one of the dots from your start slide to your next slide. Now you get a dialog of transition options. You can customize the duration, delay, and easing of each animation. Choose “smart animate” for a solution similar to Keynote “Magic Move.” Figma has a lot of great resources on how transitions work.

Sharing and Collaboration

Generating shareable links.

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. You can also password-protect the file if you want.

Collaborating with Others in Real-Time

One of the greatest advantages of using Figma for presentations is collaborating with others in real-time. Multiple users can simultaneously work on the same presentation and provide real-time feedback and comments. If you want to see another collaborator’s current view, you can click on their avatar in the top-right corner to follow them. You could also hover your own avatar and click “Spotlight me” to force all the other users follow you.

Using Comments and Feedback

Within Figma, you can leave comments and feedback on specific presentation elements. This allows for clearer communication and easier collaboration. You can easily resolve comments and keep track of the changes made based on the feedback received. To do this, click on C (or the comment symbol) and add comments on relevant places. You can always see the comments and threads in the right column when you are in the comments view.

Version History and Design Iterations

Figma also provides a version history feature , allowing you to view and restore previous presentation versions. This is helpful when you need to revisit an earlier design. To do this, click on the title of your Figma file (top middle of your screen) and select “Show version history.” You’ll get a timeline in the right column showing all your file changes. Click on any of them to rewind your project.

Presenting Your Figma File

Preparing a figma file for presentations.

To prepare your Figma file for a presentation, all you have to do is to open the prototype panel and select “Presentation” under “device.” (you could also add &hide-ui=1 to the end of the URL if you want to hide the UI completely when embedding or sharing a presentation link)

Taking Advantage of Fullscreen and Figma UI Options

When you will present, click the play icon in the top right corner of Figma. This will open your presentation in prototype mmode. You can then click the expand icon in the top right corner to make it fullscreen and select options > Fill screen and make sure options > Show Figma UI is unchecked. If your slide seems weird you can click Z to switch between all the different view states.

Presenting remotely

If you are presenting remotely you could enter prototype mode (by pressing play), and click “Share prototype” and send the link to others. When you are starting to present you can click your own avatar and “Spotlight me”, and this way force the other spectators to follow you during your presentation.

Sharing presentations

Exporting slides as pdf.

Export your slides as a single PDF by going to File > Export frames to PDF . Figma will then generate a PDF with every Frame on the page you are currently on. Your pdf will follow the same order as your slides in presentation mode: left-to-right, top-to-bottom. Note that these files can sometimes become huge depending on your presentations. I’ve found ilovepdf great at compressing these into a manageable file size.

Embedding Presentations on Websites and Social Media

Another useful feature is the ability to embed your presentation. This is great for showcasing your presentations on your website or sharing them on social media. Check out the Embedding article in the Figma Help Center to learn how to embed your Figma files. Rember to share your prototype (Click “share prototype” after pressing the play button), and not your regular file. Here is an example of how an embedded presentation look out of the box:

The bar is lower than you think!

Github codespaces for jekyll and next.js, 2023 year in review.

15+ Figma Presentation Templates (+ Slide Deck Style Graphics)

If you are a designer on the hunt for the perfect Figma presentation template, look no further! Our post features a collection of stunning slide deck templates that will level up your Figma design project presentation and showcases.

Figma is a versatile software that’s capable of handling various types of designs, including slide decks. You can use Figma to create stylish slide decks and presentations to showcase your projects and present new concepts to clients without having to rely on any presentation software like PowerPoint or Keynote.

One of the main benefits of using Figma to design slide decks is you get to craft more attractive and visual slides for the presentation. And with this collection of Figma templates, you’ll be able to go above and beyond with your slideshow designs.

We handpicked a collection of Figma templates that feature slide deck-style graphics and layouts. You can use these to make your own presentations, slideshows, and more.

Let’s dive right in and explore these free and paid options that will impress clients and enhance your presentations.

2 Million+ Figma Graphic Templates & More With Unlimited Downloads

Download thousands of Figma graphic templates, UI kits, and web templates with an Envato Elements membership. It starts at $16 per month, and gives you unlimited access to a growing library of over 2,000,000 Figma templates, design assets, graphics, themes, photos, and more.

Pricing Table UI

Course Template

School ui kit.

Multipurpose Template

Social Network Template

Figma & psd.

Startup Website

Figma template.

Coming Soon Page

Explore Figma Templates

Aesthetic eCourse Slide Deck for FIGMA & PSD

This is a dynamic collection of 100 customizable slide templates for Figma and they are perfect for creating engaging online course-related presentations. This creative template not only includes visually pleasing designs but also provides a host of layouts like quotes, infographics, and lists. Suitable for webinars, influencer content, and marketing pitches, it’s a practical solution that saves you time and resources while elevating the visual appeal of your presentations.

Fashion Slideshow Promo Template for Figma

This Figma presentation template offers a chic, minimalistic, and contemporary design, optimal for delivering your fashion-related content effectively. It features high-quality screens, customizable layers, fonts, and colors, and is fully editable, enabling you to customize its vector shape to your taste.

Infographics Figma Presentation Template

A useful Figma presentation template for creating engaging, data-driven presentations. It offers stunning visuals, dynamic roadmaps, and insightful timelines that effectively communicate information. It includes slide layouts in Photoshop, Figma, Sketch, PDF, and PNG formats, all fully editable for easy color changes and a free font. Unleash your data’s potential with this captivating infographic template.

Circle Infographic Presentation Template for FIgma

Explore the Circle infographic presentation template for Figma, a set of slides designed for creative data visualization in slide decks. With this template, you can create mesmerizing presentations, make compelling roadmaps, and craft insightful timelines. The kit comes with PSD, Sketch, PNG, and PDF files, and options for easy color changes. Plus, it’s fully editable and even includes a free font.

Process Diagrams Figma Infographic Template

This Figma slide template makes showcasing intricate workflows and procedures simple. It comes in various convenient file formats, includes an array of visual displays, and features editable graphics with clear color combinations. Its user-friendly design is perfect for crafting beautiful process diagrams and roadmaps for your presentation and slide decks.

Business Strategy Infographic Slides for Figma

This Figma template includes an assortment of fully editable infographics related to various business-related concepts. It’s especially ideal for crafting eye-catching business strategy presentations. The package includes Figma files, unique icons, three slide infographic templates, and free access to a creative font.

Digital Marketing Infographic Slides for FIgma

This is a modern Figma infographic template that transforms your presentations with beautiful infographics. It allows you to showcase data in visual form with stylish digital marketing infographic slides. It includes 3 slide templates in Figma, Adobe XD, and Sketch formats.

Hero Header Templates for Figma

Even though these Figma templates are for designing website header sections, they can also be used to create attractive slides for your presentations. This pack contains seven innovative, fully editable, and scalable header designs perfect for an array of slides such as food delivery, online stores, and tech tools.

Hero Section Design Figma Templates

Another collection of sleek, modern hero design templates for your slide designs. It includes 11 distinct hero header layouts, fully customizable with Figma. They are excellent for creating cutting-edge website designs and slide decks for various presentations.

Eshoin – Ecommerce Hero Header Templates

Eshoin is a collection of modern header designs for Figma, which are also perfect for enhancing presentations, and various projects. With a sleek, professional layout, the templates come in editable formats (.PSD, .xd, .fig), and feature a 1920×1080 pixel, 16:9 ratio design incorporating Google fonts. Primarily designed for product showcasing, they ensure an appealing and informative display for viewers.

eCommerce Hero Header Design for Figma

This eCommerce-themed header design lends a clean aesthetic to your website or slide decks. It’s user-friendly, adaptable for small to large businesses, and ideal for crafting bold product showcase slide layouts. With compatibility across Sketch, Adobe XD, Invision Studio, and Figma, all components are vector-based ensuring a sleek design.

Free Figma Presentation Templates

Don’t forget to try these free Figma templates.

Free Deck Template with Fresh Folks Illustrations

This is a bundle of beautiful slide designs featuring cute and fun illustrations that add a creative and more engaging look to presentations. The slides have multipurpose designs that can be customized to make various types of slide decks.

Free Figma Pitch Deck Template

This free Figma presentation template comes with a set of bold slide designs for making pitch deck-style presentations. It has several slides with gradient colors and minimal designs.

Free Grey Pitch Deck Presentation Template

With more than 20 different slide layouts to choose from, this Figma presentation template is one of the best options for crafting a convincing pitch deck to win over your clients. And it’s free to use.

30+ Free Presentation Slides for Figma

This free Figma presentation template comes in both light and dark color themes. You can use it to make elegant and bold presentations for various branding and business slide decks. It includes over 30 unique slides too.

Free Figma Presentation Template

Use this Figma presentation template for free to design bold and professional presentations for your business and design projects. The template is especially ideal for startups and entrepreneurs for creating pitch decks.

Free Elegant Presentation Template for Figma

Another free presentation template for Figma. This template includes several creative slide layouts with elegant designs. They are suitable for a wide variety of slide deck presentations. Even though it uses a different language, you can easily customize each slide to change content.

How to Create Master Templates for Presentations in Figma

Save yourself some time on future presentations by creating your own master template, tailored to your needs. Here’s how to do it in Figma.

If you’re creating a stylized presentation, but don’t want to employ overused templates from PowerPoint, Google Slides, or Canva, you can create your own master templates for your future presentation designs.

This is a great option for those who want themed presentation designs or who need to follow a branded style guide. Keep reading to find out how to use Figma to create master templates for your presentations.

1. How to Set Up a Figma Document for Presentations

Sign up for a free account at Figma.com , or if you already have an account, log in. You can use Figma directly in your browser, or you can download the desktop app .

Open a New design file , then click Untitled at the top to rename your file, such as “Presentation Master Template”. On the left, click Page 1 , then the plus sign to add a new page. Rename the new page to “Template”. This allows you to keep your master slides separate from your design slides later on.

To create a frame—Figma’s name for an artboard or canvas—use the Frame Tool ( F ), then click anywhere to open a frame. In the right-hand settings, change the W and H attributes to a suitable presentation size; we’re using 1920 x 1080, which is the standard screen size. This is going to be your first master template.

Double-click the blue title at the top of the frame to rename it. Think about the page layout you’re planning and name it accordingly—for example, “Top Title Two Column” or “Top Title Right Picture” would be helpful.

2. Design the Presentation Layouts

To help with layout design, you can use the layout grid. To turn it on, select your frame, then on the right-hand toolbar, click the plus sign next to Layout Grid. This opens a red translucent grid on top of your design.

To create columns—which are easier to design with—click the square-dotted grid icon under Layout Grid, then click Grid in the dropdown and choose Columns . Set the count to 12, which is typical for screen design. The grid does not save onto your final design. You can temporarily switch it on or off using the eye icon or permanently remove it by clicking the minus icon next to the eye.

Whether you use the layout grid or not, you can begin adding basic placeholder components to your first slide layout. Overall, the layout of your slides is up to you.

3. Create a Two-Column Text Layout

Let’s start with designing a top title with a two-column body text slide. To add your title placeholder, use the Text Tool ( T ), and type “Title Placeholder”. The default text size in Figma is pretty small, so with your placeholder typed, highlight it and use the right-hand settings to increase the size and choose a font— download a font if necessary . You can also set the kerning and other attributes.

To accommodate the width of the slide, increase the width of the title text box by clicking and dragging the corner to the right. Leave a margin on each side. This means the text box will accommodate different title lengths in future presentations.

To add a two-column body text area, use the Text Tool ( T ) and drag the text box according to your layout grid, leaving enough room for a second column of the same size next to it.

With your text box in place, choose a suitable font and size. Select the text box and duplicate it by holding O ption (Mac) or Alt (Windows) while dragging the box. This creates a two-column layout; however, you can use this system to design other type of layouts.

4. Add a Background Color or Image

You can set a background color by selecting the frame and going to Fill on the right-hand menu to choose a color. But if you’d rather use an image, or a set of images, as a background, you can. Just drag your background image from a folder onto your frame. You can resize it right away by dragging the corners to fit your frame.

If using an image as a background , ensure you arrange the image to be at the back or bottom of the layers for each slide by right-clicking and choosing Send to Back , or by dragging it to the bottom on the left-hand layer palette.

To further edit the image, under Fill , click Image in the dropdown. You’ll be able to change the blend mode, crop factor, and other aspects. To change the opacity, change the percentage next to the dropdown menu.

For an individual image that isn’t a background, use the Frame Tool ( F ) to draw a frame where you want the image to sit, and drag the file from your computer into the frame. Then you can use the same settings as before.

5. How to Create Text Styles in Figma

When creating a master template, the text styles should be consistent throughout all the slides. This can be done manually by setting each text component to be the same, but if you have many slides, this can be tedious to do. The good news? You can automate your text styles in Figma.

With the chosen text selected—for example, a subtitle in its preferred style, font, and size—click the square of four dots next to Text in the menu on the right. Click the plus sign to set a new style.

In the popup, name the style—for example, “Slide Title or Body Text”. When designing other slides in this template, you can pick the listed style in the text menu by selecting the text and choosing the style. To unlink the style and override the feature, click the broken link icon that appears when hovering over the text style title.

It works similarly for colors. Select something with the color you want, then click the Figma menu button and Quick Actions . Type “Select all with same fill” and it will select everything of the same color. Then you can set that as color style under the Fill menu in the same way as making a text style. This works well for background colors by simply selecting the frame and choosing your color.

If you aren't following a style guide already, there are many ways to generate color palettes .

6. Create Components

To be able to use your templates later, they need to be components, so they link. To turn the frame into a component, select the current frame and click Cmd + Option + K (Mac) or Ctrl + Alt + K (Windows).

The frame’s title will turn from blue to purple with a diamond icon to show that it’s now a component. Then, to duplicate the frame, click Cmd + D (Mac) or Ctrl + D (Windows) once, and drag the new frame to the right of the first one.

Detach the component of the duplicate from the original by right-clicking the new frame’s title and choosing Detach instance . Rename the new slide with an appropriate title for its layout. Add the new design to the slide and then make it its own component by clicking Cmd + Option + K (Mac) or Ctrl + Alt + K (Windows). This process needs to be done each time you create a new slide.

When designing the layout for each new slide, use your ready-made text and color styles to save time. Complete this process with as many base slides as you require, ensuring they’re all titled with descriptive names.

7. How to Use Your Master Slides

To use the slides for your future designs, choose Page 1 in the Pages menu—with your template being under its own title—and create a new presentation-sized frame. Then, on the left, click Assets > Local Components where your template slides should be. Drag the template slides onto your new frame, and center it. Edit the placeholders for your content.

Follow this same process until your presentation is complete.

Save Time by Making Your Own Master Templates in Figma

You can provide your master template to teammates or co-workers, keep it for your personal use, or even sell them as design packages. While it may initially seem daunting to create a slide master template, it will aid productivity when you make future presentations in Figma, ultimately saving time.

How to make a presentation using Figma

• Por Sophia Silva
• 11/08/2022 às 11:39 atualizado em (11/08/2022 às 11:39)
• 14min de leitura

How about making a presentation with Figma ? Want to know what’s so special about him and what it can do for you?

A tool that has been conquering more and more people due to the numerous features it offers, and best of all, for free, Figma is an application that has everything you need to produce a high-level presentation.

But what is Figma?

One of the best tools online for UI Design, which means “User Interface”.

In other words, everything can be done online, through the browser, without the need to download any type of program or application.

And the best: collaboratively!

But what does a collaborative tool mean? We explain!

You can share any project – whether with clients, classmates, or co-workers – for them to see the progress, without having to export it to PDF or other file types.

At any time you can share the result of your project in presentation mode through a generated link.

Interesting, right?

Among so many tools already available and attested, why use Figma?

There are several points that need to be noted here. Despite being a relatively new tool, Figma has already proven itself to be effective and of a high level in terms of the final quality of projects.

But there are several advantages that you should analyze to decide whether or not to start using Figma.

Take a look at the list we prepared.

1. It’s free and online

This is one of the main advantages of the program, as it democratizes the creation, collaboration, and prototyping of countless projects every day, without the need to install anything on the computer.

In addition, your work is automatically saved in the cloud and a link is generated for each project in a simple, light, and fluid way. And designs can be shared even in real-time.

Although there is a paid version, which offers other features, the free version of Figma allows the realization of many advanced projects.

2. It has a plugin library

Among the best tools in Figma are Building wireframes, Table paste, and Lilgrid.

And even though having a library of plugins is not exclusive to Figma, they make any project much more elaborate.

While ready to use, these connectors provide your design with different layouts, import data in other formats, or organize information or elements.

3. It has the option of auto-layout

This facility is to make the designer’s life easier.

After all, one of the great challenges of anyone who creates a new design is, precisely, to maintain coherence between scales, proportions, sizes, or spacing of each or between design elements.

And this auto-layout function comes to make it easier, as it avoids misalignments and differences that could harm the aesthetics of your project.

4. Offers multiple integrations

Figma allows your projects to be integrated with other tools, such as Slack, Axure , and Confluence, in a very easy way and without bureaucracy.

This feature ‘offers more autonomy to the teams involved in the projects.

5. Gives access to the global community

This perk here will make your eyes sparkle!

Have you ever imagined being part of a community of designers, where it is possible to exchange knowledge, experiences, and tips?

That’s exactly what Figma offers. You become part of a worldwide network of professionals that grows every year and the advantages of this are numerous, starting with the fact that you will never be alone in this sea of design again.

6. Easy sharing

Because it is collaborative, Figma makes life much easier for those who use it.

Mainly because it makes it easier to share projects without having to export a PDF, make a print or upload files from the drive.

This is because you can share all your work by generating a link. And even those who have the link to your work can follow your project in real-time.

7. Allows collaborative work

Easy project sharing brings another facility to Figma: collaborative work.

That is, multiple people can access it at the same time.

Thus, it is possible for the entire team to work together.

And look how cool: Figma supports up to 500 contributors per file.

Of these 500, 100 can be editors.

As a result, Figma becomes the ideal tool for conducting workshops, design reviews, and brainstorming sessions, among others.

8. Weekly updates

Yes, almost every week Figma brings some updates to make your projects even better, more professional, and all this without being rocket science.

In addition, through the tool, you can keep up with new market trends.

And for those who want to improve their knowledge, this is all good, do you agree?

Inside Figma

Now that you know the advantages of Figma, how about learning how to make a presentation with this tool? Before that, however, see how to use this platform.

The first step is to create your account on the platform. The process is very quick and can be completed in just 4 steps.

As soon as you complete your registration, you can access it.

If you are going to form a team, that is, have people working together with you, just invite them through a link or via email.

The cool thing is that you can start a project from scratch or from the available templates.

In the meantime, if you have difficulty using Figma, you can explore the “Figma Tutorial” , a kind of virtual tour of the platform, which will guide you through the main settings, helping you to better understand Figma and how to explore it.

Did you learn to use this tool? So now, see how you can make a presentation using Figma.

Figma is an extremely powerful tool that can be used for the development of different types of graphic pieces, from simple images for publication on social networks to the development of high-fidelity application screens.

This is made possible by Figma’s prototype feature, which allows for various customizable transition options.

Not to mention that you can incorporate plugins that will make your audience even more involved and excited about what they see.

So, there are many ways you can make a presentation with Figma.

Learn how to make amazing presentations that will take your work and your reputation to the next level.

See in practice how to create impactful presentations using Figma

1. Frame configuration

The first step for you to make a presentation using Figma is to set up a presentation board.

To do this, open Figma and go to “New design file”.

Then click on “Frame Tool (F)” to start working on your frame, or choose one of the templates, which can be found on the right.

To do this, click on “Presentation > Slide 16:9”.

From now on, you will actually start creating your frame. Then set a background color.

However, remember that you can change the color whenever you want.

The goal here is to make all the frames stand out by changing the fill color.

Take the opportunity to rename your board by double-clicking on the blue title in the upper left corner.

2. Add the text

To add texts to your board, just use “Text Tool (T)”.

You can set your text preferences in the “Text on the right” menu.

A tip: Figma uses Google fonts, so get to know them to choose the best combinations.

Finally, use separate text boxes when using separate lines, with only one or two words per line.

3. Time to place the images

It’s time to start bringing your board to life. Choose a photo – which can be a stock photo or one that you can take just for that.

Then draw a rectangle with the “Rectangle tool (R)” to add an image.

Your photo will be added according to this format.

After that, just click on this rectangle and go to “Fill” , then click on the colored frame.

Then go to “Solid” > Image > Choose Image” to find your image.

Found? Go to “Open”.

When hovering over the image, it will reveal 4 white circles. Click and drag a circle inwards to round the corners of the image.

Now it’s time for you to arrange the circle layers so that the image is on the back and the text is on the top layer.

To make this happen, you have two options: dragging the layers in the layers panel or using “Cmd/Ctrl + [“ to send a layer back or “Cmd/Ctrl + ]” to bring a layer to the front.

4. Time to create the first transition of your board

After following all the steps above, it’s time to create your first transition in your presentation using Figma.

And this will open the image, allowing the title text to slide into the frame.

Simultaneously, select the first frame and press “Cmd/Ctrl + D” to duplicate it.

To reduce the image scale, simply reduce the height attributes in the “H” box to approximately 150, leaving a horizontal slit in the image.

This process should be done in the frame on the left.

Then, select both images in the frames, clicking “Option + V (Mac) or Alt + V (Windows)” to center it.

To complete the image transition, select this photo on the left.

5. Attention to opacity

Afterward, you need to change the opacity to 0% by clicking the menu on the right in the box next to “Pass Through” under “Layer”.

This step is important because it will make the image invisible before transitioning and opening.

Then click the “Shift” key while holding it down in the first text box.

You will start dragging this text box out of the frame while holding down the spacebar.

This spacebar command is important to prevent the text box from disappearing out of the frame and the transition being successful.

So: hold the spacebar before dragging, so it just moves your frame.

Once this is done, repeat the process for the second or subsequent text box.

However, drag them a little further to the left to add some variety to the transition.

At this point, while the text is still selected, you can reduce the layer’s opacity to 0% in the same way as you did previously for the image.

6. Defining the transition

To define the transition, you must go to “Prototype”.

There, you will select the frame on the left and click on the blue circle that appears in the center of the right side of the frame.

Once that’s done, drag it so that the line goes to the second frame.

In the drop-down line that says  “Instant” , you will select  “Smart Animate”.

Soon after, you can change the box with the timer to 1000ms.

The result of this? Your transition will be set to take one second from the mouse click.

The other settings should be set by default.

To do so, make sure not to rename the frame titles after defining a transition, otherwise, the files will not be connected.

It’s time to test your transition. Just click on the “Play” button.

Then, to continue your presentation design, just go back to “Design” .

7. Time to add more slides to your Figma presentation

That part is easy. If you want to go from slide 1 to slide 2, just duplicate the rightmost slide by clicking on the command “Cmd/Ctrl + D”.

On slide 2, just move the text boxes out of the frame using the command “Shift” + press the spacebar and then start dragging.

Then you can move one of the text boxes to the left and the other to the right of the frame.

Afterward, set the opacity to 0% for both.

For the image, move it off-center, making it smaller. At this point, set the opacity to 0%.

This action will give you a blank canvas for the second slide.

From now on, you can add whatever content you want on top of the invisible assets on the previous slide.

Then add a large image in the center of the frame, and if you want to put some decorations on top of your image, use a Figma plugin for Gifs or download a sticker Gif from Giphy to drag it on top of the image.

Once this is done, you can select the main image and any Gifs, grouping them through the command “Cmd/Ctrl + G” , this ensures that Smart Animate works correctly.

In the next step, you can select the group and copy it, using the command “Cmd/Ctrl + C” . In the next step, you can paste it into the frame of slide 1 using “Cmd/Ctrl + V” .

The next step is to reduce and set the opacity to 0%.

Then, move this layer back through the command “Cmd/Ctrl + [“ . This action will ensure a smooth transition to the next slide.

Once that’s done, let’s move on to the next phase.

8. The prototype phase

After you’ve ensured a smooth transition to the next slide, you go to the “Prototype” .

Now, you can select slide 2 and click on the blue circle to drag it to slide 3.

Figma’s default in the prototype menu is to use the previous settings, so they must all be set according to the previous transition. Go back to the project.

Then you can duplicate the last slide with the command “Cmd/Ctrl + D” .

This slide will use the same image as the previous one but scaled to one side of the frame.

From there, you can move the image to the left of the frame by dragging it while holding down the “Shift” key.

Now, hover your mouse on the right edge of the image until the opposite arrows appear, click and drag the right edge of the image to the left until you are satisfied.

From there, go to “Prototype” to link the two frames. Then go back to “Design” .

Immediately place a title and body text to the right of the scaled image to group them together.

Then just copy the text group and paste it onto the previous slide by clicking and dragging the text group to the right of the frame as before.

9. Add a mockup

In this step, you can create a mockup for your Figma presentation.

To do this, simply add a new frame and paste your mockup into it, resizing it to fit the frame.

Then, just copy this mockup and paste it into the previous frame.

Resize the frame to fit the part of the image, and move it to the back of the layers.

Afterward, you must set the opacity to 0% and link the frames in “Prototype”.

10. Add labels

You can now duplicate the mockup board and add a title and description to explain parts of your model.

The next step is to group the text and name it.

You can also create a frosted glass indicator for your markers and lines.

To do this, just group a line with a circle. Right after that, align your indicator with what you’re describing and add your description next to it.

Frames must be linked in  “Prototype” .

Afterward, just duplicate the frame and add another bullet pointer with what you’re describing.

Prototype this again and duplicate each frame per bullet point, so that each bullet point transitions itself.

11. Time to finish the presentation

Shall we go to the last slide of your Figma presentation? To do this, simply duplicate it, writing a final word or two. Center the words, copy the text and paste it onto the previous slide.

To shrink text, hold down “K” while scaling it – this will keep your text formatted as you shrink it.

Then just place your text somewhere near the top of the mockup and send the layer back under the image.

The next step is to set the opacity to 0%, going back to the final slide.

You can now move the other objects out of the frame using the drag method.

That way, the transition will slide everything sideways and up as the text moves down and expands.

The slides link is in “Prototype” .

12. The time of presentation

Your project is ready and it’s time for you to share it.

Just log in to your Figma account or share the URL with others, so they can see your presentation from anywhere.

To make your final presentation with your transitions, you will click the “Play” button and choose the full-screen mode.

Your frames can also be saved as PDFs. However, in this option, you will miss the animated transitions.

Did you learn all the steps to create a presentation in Figma?

Now that you’ve learned the step-by-step guide to creating amazing presentations in Figma, how about sharing this knowledge with your friends? Take advantage and forward this article to those you know will like it!

Posts Relacionados

9 Apps para seguir pessoas no Instagram automaticamente

• há mais de 1 dia

13 Necessary equipment for recording a podcast

The 4 types of hosting that exist and how to choose yours

The 8 best websites to trim podcasts

The 9 best audio podcast platforms

How to download only part of a YouTube video

• Social Links
• social networks
• Uncategorized
• Windows Phone

• Skip to Content ↓
• Skip to Footer ↓

How to create and present animated presentations from Figma using Pitchdeck

Follow along with our complete step-by-step free Figma tutorial video walkthrough.

Used in this video

Magically turn your Figma designs into animated presentable slide decks, or export them to PowerPoint.

Video Transcript

Today, I'm going to be showing you how to export your collaborative presentation slide deck designs from Figma into a real animated presentation that you can actually present.

To do that, we just need to install a Figma plugin called "Pitchdeck" and if you haven't already done that, you can go to the top left of your Figma app and click on the little Figma icon, and if you go to "Community" or "plugins and search for the term "Pitchdeck"; underneath the plugins tab you'll see a result pop-up that is called "Pitchdeck Presentation Studio". If you haven't already installed it, you can go over to the right hand side where you'll see an "install" button, and if you click on that install button it'll change to look something like mine, where it's got a little checkmark and says "installed" next to it; once it looks like that, then we're ready to go back to our project and export these collaborative presentation designs from Figma to an animated presentation.

Now that we've got that installed, we can jump back into our Figma design file, and in this case I'm just going to use this Dieter Rams "Ten Principles for Good Design" collaborative presentation pitch deck that I designed in Figma; and this is just a really nice demo to see how it all works because it's quite simple and we'll be able to clearly have a look at how to present this directly from Figma. So, the first thing we need to do is open up the plugin by right-clicking anywhere, going down to plugins and then clicking on "Pitchdeck Presentation Studio"; this is just going to run the plugin that we just installed the Pitchdeck plugin and what it's doing right now is it's looking through all of these frames on the left hand side, and it's interpreting each frame at the parent level of the the root level of the page as an individual slide; each each frame is treated as a slide and then it's going through all of the layers in each of those frames and it's interpreting them as individual layers that can be used as elements inside each slide for animations and things like that.

Now that the Pitchdeck Figma plugin has finished loading, you can see here that it's interpreted all of our frames. If we have a look behind here you can see that all these frames have been added into the plugin and each frame is being treated as a slide; you can see up here we've got 11 slides.

The first thing to note is that while it is mirroring the frames from the side here, you might notice that the ordering is a little bit different; in fact, it's exactly reversed. The reason for that is because typically when you're designing in Figma, you'll tend to design one frame and then reuse that frame for the next frame and just change the content; when you copy/paste things in Figma it will copy paste it next to the the frame right next to it, but in the layers panel here it'll actually add it above the current frame; you end up with this strange sort of reversed layer order and that's the reason why the Pitchdeck Figma plugin automatically reverses the slide order by default, because it assumes that you've been copy pasting this whole time and your first frame is at the bottom and your latest frame (or last frame) is at the top.

What it does is it just completely reverses that; straight away you get the correct order that you'd expect for your slides, but having said that if you've done it a different way or you just want to update the order, you don't have to touch any of the frames in Figma, you can leave those as they are; you'll see over here in the Figma plugin when we hover over this little "drag" icon in our layers, if you click and hold that and then drag it you can actually move these layers around freely in the Figma plugin itself, and these are independent of the layers over here; if you update the layer order in here your original Figma file as will not be modified it just is kept in the Figma plugin itself; if you want to move those around you can just drag them and drop them and that will reorder these frames super easily; now this one's frame one and this one's frame for but we do want the "intro" at the top; I'll just put that back up, but you can see there how quickly you can reorder all those frames or create a custom order or just mess about with them just by dragging and dropping them there.

The other thing to note is that if you delete some frames in Figma or if you change something around, you can just click on this little refresh icon here and what that will do is it will just load in a fresh set of frames from Figma; these are kind of already loaded in now, so if you make any changes they won't show up straight away in the Figma plugin but if you do need to make some changes or add new slides or delete slides, the way you can do that is just by changing them in your Figma design clicking on the "Refresh" icon and that will once again load all of those frames and and reinterpret them as fresh slides; but for now we're we're happy with our design we just want to animate it and export it as a presentation we can actually use.

Okay, so the first thing to note is that obviously this is our preview area; whenever we change a slide here, this will change the title and the preview of the slide; this is exactly what's going to show up in our presentation once we export it shortly. There's another section underneath that preview which you can see here; the label says "Speaker Notes" and speaker notes is just a text area where you can add any text that you like; you could put bullet points in here, you can add a paragraph, you can add a few words; anything that you like really. 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. That's just a really nice way of adding some extra context that you don't want the audience to see, and it's just for your personal use down here; you simply just type in some text, you don't have to hit save or anything, it'll just be stored there and that's pretty neat.

The other thing you've probably already noticed is that these layers are not static. Obviously in Figma they're just static, they're just some pixels on a frame, but Pitchdeck allows you to animate these frames. By default, they don't have any animations applied to them, but I've already animated these frames and those animations get saved when you close and reopen the plugin, and that's why you can see that these frames I've already got some nice animations on them.

If you do want to animate some of your slides, for all of the elements of your slides you can choose which ones you do (and don't) want animations on. You can see here when I hover over these layers in the right-hand side, this is basically representing the layers from our Figma file; you can see here it's a it's a one-to-one match with all these layer names; at the top here we've got this this image, we've got text, all these layers of text, and there's a drop-down box here (a select box) where we can click on that, and you'll get a whole suite of animations that you can apply. These are predefined animations, you can just pick one and they will they'll work; what we can do is change that to "scale", you can "rotate" it if you wanted to for some reason; it's a bit extreme, but why not do something crazy like "jello" or something like that where it just kind of comes out; these are a little bit attention-grabbing. The more conservative ones would be at the top where just a very smooth sort of "fade in" and "fade out" and you can change the timing as well; if you want that to come in last you simply drag the timeline over to the right here, and that'll come in after two seconds; you can change that to be however you want, you can also make that go for three seconds and have a really smooth and slow.

The other neat thing you can do is if you've already setup your animations on one frame or you've set up a certain animation let's say on this image that you really like, you don't have to manually recreate that on every single other layer if you don't want to; a quick way of copying those layer styles over to other layers it's just by highlighting the layer that you want the animation for and you'll see this button pop up, if you hover over it only, you'll see a pop-up that says "Copy"; if you click on that copy button it says "the animations have been copied", and what you can do is go to any other frame or any other slide and any other layer and you just hover over that and you'll see that the "Paste" button is now enabled. All you have to do is click on paste, and that will get carried over from whatever you just copied; you can see here now the image animation is exactly the same as the one we just copied, and you can do that from any layer to any other layer and it's just a really nice way of being able to store an animation and distribute it across other layers without having to go into the select box and manually select that animation every time and then drag the timeline if you already know what animation you want; that's just a really simple way of doing that, if you want to go about doing it that way.

Of course, the animation styles are completely up to you; there's there's a lot of options, and if you don't want an animation you can simply set it back to the default and just click on "no animation", that will just disable it; you can see here that just never animates at all, and that's kind of neat. I'll just copy that back again; if I copy that from a different slide I can re-enable that back on here just by copy pasting it, or I can just go to "no animation" and then change it back and it will keep the timeline; it won't remove that if I decide to just turn off the animation to see what it looks like, you can do it that way.

I didn't already say; obviously it changes the preview on the fly, so whenever you change an animation like this as we were just doing, it changes it on the fly but if you've already changed it and you just want to kind of keep looking at it or playing it, this little "Play" icon on the right-hand side of the animations toolbar, if you click on that that will just keep replaying it and you can do that as many times as you want just to see that animation continue. That's roughly it; the animations are designed to be very, very, simple; very straightforward and very easy to replicate across different frames, and that's what they look like. You can have fun with that you can make it adapt to any certain design aesthetic or branding that you that you have, if you have sort of an animation guideline or if you want something a bit more crazy or a bit more fun compared to the more sort of smooth and conservative animations at the top, that's completely up to you.

Now that we've set up our frames, we've ordered them the way we want, we've added our speaker notes, we've added all of animations that we want, we're happy with it; what we can do next is we can export or update this this presentation. I've already created a link before, but if you haven't this will say "Upload Presentation" and if we click on this little select box here you can see that if there's a few formats, and there's two groups as "animated" exports and "static" exports; static exports are things like PDF files PowerPoint files Keynote files; these are things that can get saved onto your computer, and I'll go over them in a separate Figma tutorial, but for today we're going to be looking at the animated one, because we want all these animations to actually do something.

What we can do is, we can (we've already got it selected), but if you select the "Pitchdeck URL" export format and yours might say "Upload Presentation" if you haven't done it before, but mine says "Update Presentation" because I've already created one. I'm just going to click on "Update Presentation" and what this is going to do is, it's going to generate frames or slides from all of this data that we've just put in, all of our image data, all of our speaker notes, all of our animations, all of our layers and it's going to create a presentation URL that we can use and present from anywhere; we'll see what that looks like in a second, at the moment it's just uploading all of the image assets, all of the animation data online, and in a minute you'll get a URL a password-protected URL; you'll only be able to use it if you have the password, and we'll see what that looks like in a second. It'll depend on how many images you have and how fast your internet connection is; I'm in Australia, so my internet connection is horrible (amongst many of the worst ones probably in the world), but we'll wait for this to finish uploading and then I'll show you what it looks like; hopefully it won't take too much longer.

The other thing to know is that if you've already uploaded this and you just want to get the details out (I'll show you in a second), but this little "padlock" icon up here, if you click on that, which you can (I'll show you in a minute), you'll be able to get this URL and password that you're going to see in a second straight away; you don't have to re-upload it every single time to get this link that we're about to see, you can simply get it just by clicking on that icon.

Alright, we're finally done! The Australian internet has worked, and we've got our link. You can see here that it says are a secure presentation link is ready we can copy the secure link below which is this one and the password and this is going to let us present our deck; what I'm going to do is I'm going to copy this password and then I'm going to open up this secure link and you can either do that by copy pasting this link by copy that copying that button, clicking that copy button, or you can click on this secure link icon; that's what I'm going to do.

Okay; I've got my URL here and this has just opened up the URL that we've just clicked on, and you can see that we've got a prompt to login to this deck, and because I've already copied the password, all I need to do is paste that here; I'm going to just paste it and you can see the "Login" button is now available; if I click on that (I'm just going to minimize my Figma window for the time being), I'm just in Chrome at the moment, and you can see here that it's loaded up our presentation after it's authenticated with our password. This is neat, this is exactly what we just exported from Figma; and you can see that we've got this little control panel down here in the bottom left, and there's a few things to go through; I'm going to go through all these with you just so you can see how it all works.

The first thing to know we've got simple controls; if you click on next that brings in our our next slide with all the animations that we set in Figma there's also a slide selector; if you do want to jump to a certain slide straight away you can see all of our frame names have been turned into slide selections; if I want to jump to number six or number nine, I can quite easily do that using this selector and I can use previous and next buttons as you would expect, you might not be able to see this but if I also use my keyboard; if I go "left arrow" on the keyboard and "right arrow" on the keyboard, I can navigate through those frames; if I push the "spacebar", that will also advance the frames as you would expect from something like Keynote or another presentation platform; that's a really easy way to present as well.

The other thing you may have noticed is that our toolbar just disappeared, and the reason for that is it's set to automatically disappear once it's inactive for a few seconds; if you just don't move your mouse, the mouse cursor disappears and the controls disappear; but to get them back, all you have to do is just move the mouse again and they'll pop right up. It will also not hide it while you're using the toolbar, so if you've got your mouse over the toolbar section and you're actually doing stuff, it knows not to to get rid of that; if you've got your mouse down here and you're wondering why it's not going away, you just have to move your mouse away from that toolbar and then it'll disappear and get out of your way; once you've done that, you can navigate with the keyboard once you've actually closed that off and don't want to show it to anyone, that's a really nice way of doing that.

We can also go into full-screen mode; if you click on this little full screen icon on the top the bottom right where it says "fullscreen", if you click on that that will actually take us into the proper "HTML fullscreen" mode; I have no browser window now; end-to-end the screen is just purely my presentation right now. This is perfect if you're presenting on a TV, or presenting on a projector to an audience, you want to go into full-screen mode and make it really seamless. Again, I'm just controlling this right now with my keyboard, using the "left and right arrows" and the "spacebar" if I want to just jump to the next frame. If you're in full-screen mode and you push the "Esc" key you can close it, which I've just done, or you can also click on (you can't see it in this recording maybe), but at the bottom it says "windowed", and if you click on the "windowed" button, which is exactly where the full-screen button was, it just changes to say windowed; if you click on that that'll bring it back to this windowed sort of version; that's really neat. The full-screen mode is awesome for presenting to an audience if you don't have all this desktop stuff or or Chrome window anywhere, that's really nice.

The other thing that we can do is enable the pointer; if you've if you've used laser pointers in real life you will have an idea of what this is; if you click on pointer you can see here that we now have this this red laser beam virtual laser beam that I can use to to point at things; that's really nice, I'm just using my mouse right now to move that around it just follows your mouse and if I again go back down here down to the bottom toolbar you'll see that it's selected the red laser pointer by default but you can scroll left and right with this using your mouse and you'll notice that there's a bunch of different options If we want to use, let's say the "nyan cat", we can select "nyan cat" and that will let me use nyan cat as my cursor. This is kind of just for fun; obviously, if you want to be super professional you can use the the red laser pointer, but if you're like me and you want to use Nicolas Cage's face to sort of highlight things, that option is available.

There's there's a whole bunch of them; we've got Xzibit, Fry from Futurama, there's this funny dog/curious dog, we've got Carlton from The Fresh Prince, you can make him dance on things; there's this there's quite a lot of them; Dodge, Keanu Reeves; just many, many. This one is very funny, I don't know what you would ever use this for, but it made me laugh and I thought it would be quite funny; so that's in there as well. You can play around with those if you want to just have fun with the pointers, that's how you do it. If you want to turn the pointer off you simply just click on pointer again, and that will be toggled off, and once again you've got no pointer.

The next thing I want to cover is the notes section; if you click on "notes", this will open up another window; you can see here I'm just dragging this over here, and you can see on the right-hand side now we've got this this whole new panel that we didn't have before. If I go down here, you can see that at the bottom of my controls it's telling me that we're now "connected to the remote control" and on the remote control it's telling me that we're "connected to the presentation"; these two things are now linked they can talk to each other, so if we click on next in the controls, it will change the slide in the main window. These are two totally separate windows, but they can interact with each other; I can jump around here, I can go to different frames, and the cool thing is you can see up here it's telling me what slide I'm currently on, what slide I just came from, and what the next slide is going to be.

This little navigation bar up here will tell me that above that I've got a slide timer; this is just keeping track of the entire presentation I can pause that and reset it I can start it again pause it and start it this allows me to keep track of how long I've been speaking and it's just a really nice way of keeping track that you're not going over time if your presentation has a time limit and of course you'll notice the speaker notes the speaking it's that we added in Figma and now showing up per frame or per slide whenever we select a new one; you can see here that the notes just keep changing and those are specific to each each frame these never get shown to the audience these are only shown to wherever you've got this; the cool thing you could do is you could have this presentation window over here on one monitor and then you could put your control panel or speaking that's frame on another monitor and control that from a laptop or control that from a secondary screen and that way you can just have all these displayed to yourself including the timer; that's really neat.

The other cool thing which ties into what we were just looking at is the pointer; if you click on this pointer icon in the remote control you can see it brings up this little interface and it's enabled the the remote control on the right hand side and if we drag this little icon around just by using the mouse; if you click and drag on that icon again you can completely remote control that that laser pointer from a separate screen and again you can obviously change those cursors, and this is two way binded as well; for some reason you changed in the presentation mode you can see in the other window it's getting changed and the same thing obviously happens the other way; you can see here and same if we enable and disable the pointer you can see if I enable it from one it also enables it in the other and disables it from the other as well; that's pretty neat that you can do that.

You can change that as much as you want control it from the secondary window and that just completely correlates to the main presentation; you've got a you've got an idea of where that's going to be if you're not actually looking at it the whole time; I can just turn that off again and if we close this off now if we happen to close that window you can see down here it immediately tells us that we're now not connected to the remote control if you want to recon you simply just click on the notes button again and wait for that to open and you can see it's now changed to connect it again and now we're connected; if you do accidentally close it or it drops out you can you can totally just just close it reopen it from here and it'll reconnect itself automatically and now you can see that we've gotten control over it again just by reopening it.

The other thing that you can do which I think I'll have to cover in a separate video (because I don't have a video set up at the moment), but what you can actually do is instead of just using this notes window on your computer and control it from a different screen, the alternative thing you can actually do is control it from your phone. You'll notice next to the "notes" button there's another button called "remote"; if you click on "remote", this will bring up a QR code, and if you've got your iPhone or your Android phone or your smart phone with you, what you can do is open up the camera, hover it over or point it at this QR code that we're looking at now, and if you open up the link that it prompts you with, that'll take you to the browser and on your phone what you're actually going to get is exactly the same interfaces we just looked at in this window here.

This interface is going to load up on your phone, and you're going to be able to do everything that you just did in this remote control from your phone, including the laser pointer you can touch on the touch screen and drag that laser pointer around you; can touch these buttons and and change the slides; you can make these selections; you can do your timer you can read your speaker notes, all from your phone; that's a really cool feature if you prefer to walk around while you're talking or you're not close to the laptop that you're actually presenting from you can do it all remotely just by opening up that opening up that QR code on your phone.

I'd recommend testing that out I can't show you that on my phone right now because I'm not recording my video on the phone but that's how you do it you just open up the remote button scan this QR code and you'll be ready to go exactly the same thing you'll see once you connect to it on your phone this will change to say you're connected to the remote and your phone will also tell you you're connected to the presentation; it works exactly the same way as the notes window but the remote just lets you go mobile and actually take it with you on your phone via the internet; that's super fun.

That's essentially what it looks like; you can obviously customize this presentation back in Figma or if you want to change it, but once it's on this link, you're you're pretty much good to go you can present this from anywhere you as long as you have a browser; that's all you need, it's just a cloud-based presentation and you just take that URL and password that we looked at before with you. As I said before, we'll go back into Figma and I'll show you how to re-access that password if you do need it.

So, I'll jump back into Figma; you can see here this is what we got once we uploaded or updated the presentation to the link we're just looking at. If I close off that Figma plugin and reopen it; and the way you can reopen it quite easily if you've already run the Figma plugin once is, you can go over to the right-hand side here and under "Plugin", you'll see the little pancake icon with "Pitchdeck" next to it; if you click on that icon, what that's going to do is it's just going to relaunch the Figma plugin without you having a right-click, go down to plugins and go down to the "Pitchdeck Presentation Studio" Figma plugin again; that's just a really nice way of launching it back up; once again it's just loading up the frames from our Figma file.

The neat thing about this is it's all collaborative; the the cool thing is because everything is in Figma, and you're already using Figma for all your designs and component libraries and brand and all that sort of stuff, and you've probably got multiple designers or content authors, or production people, all using Figma to generate a presentation like this; whether it's to present to a client or present to another stakeholder or somebody internally because you're using Figma, you get the collaborative design features for free Basically any presentation becomes a collaborative presentation; you're just making these collaborative presentations, and then get all the benefits of being able to export it directly from Figma using this plugin.

Again to get that URL and password back you don't have to re-upload the presentation again if you haven't stored it somewhere if you didn't email it to somebody and just want to really quickly access it; all you need to do is click on this little "padlock" and that'll bring up this little panel here and give you the same URL and password that you you got when you confirm the upload; again you can copy/paste those the password and the URL if you want to send it to somebody, or if you just want to open it really quick, you can just click on that link again where it says "secure link", you just click on that and that'll open up your browser and just use the password again to to get back into it and you can close that off just by clicking on this or clicking anywhere else.

That's pretty much it you can see how everything kind of came together at the end there all of our speaker notes which we saw all of our animations that ended up being in the presentation the order of the slides all worked out the way that we expected it all kind of comes come straight from Figma and I think that's really cool because again if you're doing everything in Figma already and you're already kind of collaboratively creating presentations in Figma you don't need to use a tool like PowerPoint or use a tool like Keynote where everything is disconnected from Figma and you kind of just want to use Figma as your source of truth for creating pictures or presentations and this lets you do that just by translating all that that good Figma design work into of course animations and things that are more specifically designed for a presentation like speaking notes and remote controls and things like that.

Okay, I'll leave it there; I think that was a fairly comprehensive overview of what you can do with the Pitchdeck Figma plugin in terms of generating presentations. In another Figma tutorial, I'll go over these other export functions that I mentioned, which would be exporting your collaborative presentations from Figma to PDFs, exporting presentations from Figma to PowerPoint files, exporting presentations from Figma to Keynote files and exporting presentations from Figma to Google Slides. We can do all of that as well, but for day today I just really wanted to go over the fundamental concepts of Pitchdeck and explain how it works demonstrate all of the the features that are currently offers, and show you how to take your collaborative presentations from Figma into a real platform that you can present with, and get all those cool things like animations for free.

Thank you as always for watching, and I hope that you've learned something from this Figma tutorial that's relevant to what you want to be using Figma for. Of course, if you have any feedback, please let me know, as I'm always trying to make these plugins the best that they can be. Thank you again, and we'll speak to you again very soon.

Founder of Hypermatic

The secret weapons used in high performing teams.

World-class teams of designers , developers and copywriters use our Figma plugins to 1,000x their daily workflows.

Export compressed JPG, PNG, SVG, WebP, AVIF, GIF and PDF files from Figma, reducing sizes by up to 95%.

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.

Batch crop/resize multiple images into multiple sizes with presets, smart cropping and face detection.

Supercharge your Figma comments and gather external feedback from stakeholders.

Weblify (Beta)

Inspect your Figma layers as clean HTML, Tailwind, React or Vue code in one click.

Welcome to the party, pal. 1,188,700+ 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.

Single most incredible customer support reply I've ever gotten.

Let me know if I can leave a review somewhere. Stellar experience 😍

Dang, you are the hero we need and deserve ! Thx for the help!

Awesome product and thanks for the quick reply . Keep up the great work.

Thanks for your speedy responses and amazing work!

Unreal , thank you! You're the best!

I’m running out of superlatives ... Thank you, Adam.

As always, truly stellar support , thanks for saving the day!

This is some of the finest customer support I've ever seen .

Thanks so much, I appreciate the swift response :)

Again, thank you SOOOOO much for the help on this!

Thanks a lot for your kind help . It totally worked!

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

• Auto repeat and sync Figma layers from a spreadsheet using CopyDoc
• Sync chart data to Figma from a spreadsheet using CopyDoc
• Browse all video tutorials (198) ⟶

How-To Geek

6 ways to create more interactive powerpoint presentations.

Engage your audience with cool, actionable features.

Quick Links

• Add a QR code
• Embed Microsoft Forms (Education or Business Only)
• Embed a Live Web Page
• Add Links and Menus
• Add Clickable Images to Give More Info
• Add a Countdown Timer

We've all been to a presentation where the speaker bores you to death with a mundane PowerPoint presentation. Actually, the speaker could have kept you much more engaged by adding some interactive features to their slideshow. Let's look into some of these options.

1. Add a QR code

Adding a QR code can be particularly useful if you want to direct your audience to an online form, website, or video.

Some websites have in-built ways to create a QR code. For example, on Microsoft Forms , when you click "Collect Responses," you'll see the QR code option via the icon highlighted in the screenshot below. You can either right-click the QR code to copy and paste it into your presentation, or click "Download" to add it to your device gallery to insert the QR code as a picture.

In fact, you can easily add a QR code to take your viewer to any website. On Microsoft Edge, right-click anywhere on a web page where there isn't already a link, and left-click "Create QR Code For This Page."

You can also create QR codes in other browsers, such as Chrome.

You can then copy or download the QR code to use wherever you like in your presentation.

2. Embed Microsoft Forms (Education or Business Only)

If you plan to send your PPT presentation to others—for example, if you're a trainer sending step-by-step instruction presentation, a teacher sending an independent learning task to your students, or a campaigner for your local councilor sending a persuasive PPT to constituents—you might want to embed a quiz, questionnaire, pole, or feedback survey in your presentation.

In PowerPoint, open the "Insert" tab on the ribbon, and in the Forms group, click "Forms". If you cannot see this option, you can add new buttons to the ribbon .

As at April 2024, this feature is only available for those using their work or school account. We're using a Microsoft 365 Personal account in the screenshot below, which is why the Forms icon is grayed out.

Then, a sidebar will appear on the right-hand side of your screen, where you can either choose a form you have already created or opt to craft a new form.

Now, you can share your PPT presentation with others , who can click the fields and submit their responses when they view the presentation.

3. Embed a Live Web Page

You could always screenshot a web page and paste that into your PPT, but that's not a very interactive addition to your presentation. Instead, you can embed a live web page into your PPT so that people with access to your presentation can interact actively with its contents.

To do this, we will need to add an add-in to our PPT account .

Add-ins are not always reliable or secure. Before installing an add-in to your Microsoft account, check that the author is a reputable company, and type the add-in's name into a search engine to read reviews and other users' experiences.

To embed a web page, add the Web Viewer add-in ( this is an add-in created by Microsoft ).

Go to the relevant slide and open the Web Viewer add-in. Then, copy and paste the secure URL into the field box, and remove https:// from the start of the address. In our example, we will add a selector wheel to our slide. Click "Preview" to see a sample of the web page's appearance in your presentation.

This is how ours will look.

When you or someone with access to your presentation views the slideshow, this web page will be live and interactive.

4. Add Links and Menus

As well as moving from one slide to the next through a keyboard action or mouse click, you can create links within your presentation to direct the audience to specific locations.

To create a link, right-click the outline of the clickable object, and click "Link."

In the Insert Hyperlink dialog box, click "Place In This Document," choose the landing destination, and click "OK."

What's more, to make it clear that an object is clickable, you can use action buttons. Open the "Insert" tab on the ribbon, click "Shape," and then choose an appropriate action button. Usefully, PPT will automatically prompt you to add a link to these shapes.

You might also want a menu that displays on every slide. Once you have created the menu, add the links using the method outlined above. Then, select all the items, press Ctrl+C (copy), and then use Ctrl+V to paste them in your other slides.

5. Add Clickable Images to Give More Info

Through PowerPoint's animations, you can give your viewer the power to choose what they see and when they see it. This works nicely whether you're planning to send your presentation to others to run through independently or whether you're presenting in front of a group and want your audience to decide which action they want to take.

Start by creating the objects that will be clickable (trigger) and the items that will appear (pop-up).

Then, select all the pop-ups together. When you click "Animations" on the ribbon and choose an appropriate animation for the effect you want to achieve, this will be applied to all objects you have selected.

The next step is to rename the triggers in your presentation. To do this, open the "Home" tab, and in the Editing group, click "Select", and then "Selection Pane."

With the Selection Pane open, select each trigger on your slide individually, and rename them in the Selection Pane, so that they can be easily linked to in the next step.

Finally, go back to the first pop-up. Open the "Animations" tab, and in the Advanced Animation group, click the "Trigger" drop-down arrow. Then, you can set the item to appear when a trigger is clicked in your presentation.

If you want your item to disappear when the trigger is clicked again, select the pop-up, click "Add Animation" in the Advanced Animation group, choose an Exit animation, and follow the same step to link that animation to the trigger button.

6. Add a Countdown Timer

A great way to get your audience to engage with your PPT presentation is to keep them on edge by adding a countdown timer. Whether you're leading a presentation and want to let your audience stop to discuss a topic, or running an online quiz with time-limit questions, having a countdown timer means your audience will keep their eye on your slide throughout.

To do this, you need to animate text boxes or shapes containing your countdown numbers. Choose and format a shape and type the highest number that your countdown clock will need. In our case, we're creating a 10-second timer.

Now, with your shape selected, open the "Animations" tab on the ribbon and click the animation drop-down arrow. Then, in the Exit menu, click "Disappear."

Open the Animation Pane, and click the drop-down arrow next to the animation you've just added. From there, choose "Timing."

Make sure "On Click" is selected in the Start menu, and change the Delay option to "1 second," before clicking "OK."

Then, with this shape still selected, press Ctrl+C (copy), and then Ctrl+V (paste). In the second box, type 9 . With the Animation Pane still open and this second shape selected, click the drop-down arrow and choose "Timing" again. Change the Start option to "After Previous," and make sure the Delay option is 1 second. Then, click "OK."

We can now use this second shape as our template, as when we copy and paste it again, the animations will also duplicate. With this second shape selected, press Ctrl+C and Ctrl+V, type 8 into the box, and continue to do the same until you get to 0 .

Next, remove the animations from the "0" box, as you don't want this to disappear. To do this, click the shape, and in the Animation Pane drop-down, click "Remove."

You now need to layer them in order. Right-click the box containing number 1, and click "Bring To Front." You will now see that box on the top. Do the same with the other numbers in ascending order.

Finally, you need to align the objects together. Click anywhere on your slide and press Ctrl+A. Then, in the Home tab on the ribbon, click "Arrange." First click "Align Center," and then bring the menu up again, so that you can click "Align Middle."

Press Ctrl+A again to select your timer, and you can then move your timer or copy and paste it elsewhere.

Press F5 to see the presentation in action, and when you get to the slide containing the timer, click anywhere on the slide to see your countdown timer in action!

Now that your PPT presentation is more interactive, make sure you've avoided these eight common presentational mistakes before you present your slides.

iOS 17 and iPadOS 17

Updated April 24, 2024

See the new Change Log for details

Apple’s first official design kit for Figma contains a comprehensive set of components, views, system interfaces, text styles, color styles, materials, and layout guides. All the core ingredients you need to quickly create highly realistic iOS and iPadOS apps designs.

Some key features include:

• Comprehensive set of components, from Alerts to Widgets and everything in between
• Home Screen and Lock Screen widget templates
• Notification design templates
• Templates for tabbed apps, parent / child apps, split views, and sheets
• Full dynamic type chart with accessibility sizes
• Built in iOS system colors, materials, text styles and vibrancy effects

If you have requests, find bugs, or have other feedback for us, please use Feedback Assistant. Select Developer Tools > Apple Design Resources.

Important: Make sure to install the latest version of SF Symbols  before using this library.