app presentation 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:.

Using signifiers to enhance UX design

Signifiers are not just fancy signs in UIs. They are crucial communication tools for UX designers that hint users about specific actions by enhancing usability factors.

Using the golden ratio in UX design

The most magical thing about the golden ratio is how artists and architects have considered the problem of proportion in history.

Where AI enhances UX design — and where it doesn’t

Let’s talk about how to find the right balance when implementing valuable AI into products without impeding human creativity.

Combining UX and SEO: An SEO guide for UX designers

Both UX and SEO are critical for any business. But did you know that they are also closely related? In this blog, I explore how UX designers can use SEO to improve search result positioning.

Leave a Reply Cancel reply

Using Figma for Presentations

Zach Grosser

Figma is an incredibly powerful design tool. It’s well-known for it’s real-time collaboration, and web-based interface. With a couple quick URLs, Figma becomes a powerful presentation tool too.

Here is what my Figma file looks like:

I’m using the desktop client which, much like other popular desktop apps today (Slack), is an Electron-based app .

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:

It’s this shareable link that we’ll be altering. Mine looks like this: https://www.figma.com/file/d1F9C0MptyawwpJYq6WZ416P/Presentation

I’ve connected to a secondary display, full-screened a Chrome window, and can now paste in one of the two following URLs:

figma.com/mobile-app

This requires login to a Figma account in this browser.

figma.com/file/d1F9C0MptyawwpJYq6WZ416P/Presentation ?viewer=1

This is just the aforementioned shareable link with “ ?viewer=1 ” added to it.

The difference between the two highlighted below:

While ?viewer=1 is super fast, smooth, includes the menu in the upper left corner, and does not require login, mobile-app is a little cleaner with the black background and no user interface. You can switch between Frames (Figma’s term for an artboard/canvas) as you would between multiple slides in presentation-specific software. With the 1.4.2 release of Figma you can switch between Frames easier using “N” and “Shift + N.” Whichever Frame you have selected is the one that is displayed on the secondary display. And if you’re in fullscreen mode (⌃⌘F or View > Enter Full Screen) you can hide all of Chrome’s UI (⇧⌘F or View > Uncheck “Always Show Toolbar in Fullscreen), so that only your Frame is visible.

The really impressive part is that you don’t necessarily have to plug your computer into the secondary display. Your presentation display could be a different computer, in a different location, and even—since Figma is web-based—using a different operating system.

If you’re purely looking to present from a browser, Google Slides will let you do this (from the Google Slides menu: File > Publish to the web… > Publish), but a refresh is required for any changes whereas Figma is always live.

Special thanks to Dylan Field and Rasmus Andersson .

Interested in getting started in presentation design? Check out:

Presentation design, an intro

Updated June 16, 2017 — figma.com/mirror works from any browser:

Figma 1.8.2

New we now include a preference to invert the mouse zoom direction fixed improved zoom handling on windows figma mirror….

releases.figma.com

Updated July 25, 2017 —Figma 2.0 with Prototyping:

Figma 2.0: Now with Prototyping and Developer Handoff

Big news in the figma house today — we’re excited to finally unveil figma 2.0. it’s an expanded version of the product….

blog.figma.com

With the latest release of Figma, we now have a Presentation View, and prototyping connections. With these connections you can choose the order of your frames/slides for your presentation.

Update January 23, 2021 —Nearly 4 years later, a revisit of what you can do with Figma for presentation design:

Using Figma for Presentations: 2021 Update

In 2017, i published using figma for presentations. at the time, figma was still in beta (and didn't even have….

www.presentation.design

Enjoy this post?

Support me on Patreon and get access to more posts, exclusive resources, and one-on-one presentation advice:

Zach Grosser is creating Presentation Design Resources | Patreon

I've been working as a presentation designer for over seven years, collaborating with all your favorite companies like….

www.patreon.com

Written by Zach Grosser

Owner, Zacht Studios, The Presentation Design Agency: zacht.studio

Text to speech

How to use figma for presentations

Pierluigi Giglio

Figma is widely used for web and UI/UX design projects, but what about presentations?

I think it’s a tool that can be great for presentation design, but it should be used with caution ⚠️

In fact, I would recommend using Figma only in some specific scenarios, which I will describe in just a moment.

Presentation Design: Figma vs Canva

Let’s start with a shocker:

As a designer, my tool of choice for creating presentations these days is Canva , since it allows me to create design flows in a fast and efficient way.

There’s a few reasons why I’d use Canva over Figma for presentation designs:

• Canva has a wide templates library
• Easier to manage artboards compared to Figma
• Clients can edit the presentation more easily

However, the one issue I have with Canva is that it’s a less accurate design tool compared to Figma.

In fact, whenever I find myself having to create infographics or advanced graphics for a presentation, I’d much rather use Figma than Canva .

It’s just a superior design tool 🙌

But one could argue that you could create a presentation in Canva and export graphics from Figma, right?

Well, that works in theory, but I find it way easier to just work in one software , being either Canva or Figma.

I also want to avoid setting up design workflows that entail having to switch and export assets between multiple design tools, since that can bring on complexity, especially when clients request reviews.

How to Create a Presentation in Figma

Creating a presentation in Figma is fairly easy.

In order to create a presentation in Figma, you simply need to set up the artboards in order visually and, most importantly, in the left column since that will determine the order by which you’ll view the final presentation.

How to share a presentation in Figma

Well, it may come to no suprise that sharing a presentation in Figma is just as easy as sharing one in Canva.

You simply need to click on the top right hand corner on the blue Share button and you can easily share your presentation with your team or stakeholders.

How to use the Figma mobile app as a presentation clicker

One of the cool features that Figma has in place for our presentations is the ability to go in “present mode” directly from the official mobile app.

This allows you to have a remote pointer with your number one daily device: your phone 📱

How we approach it at Giglio Designs

At Giglio Designs I always like to communicate what I mentioned in this article to clients and discuss what is the best option for their specific project.

It’s important to be transparent and manage expectations from the beginning, and while sometimes Figma might be the best tool to go with, in other cases Canva might be the better solution.

Hope this article was useful and now I’m curious to hear your opinion on this very topic, so feel free to comment and share your thoughts on this.

Giglio-designs.com

Written by Pierluigi Giglio

Founder & Lead Designer at Giglio-designs.com

Text to speech

How I Elevate My Presentations with Figma

7 tactics that turn figma into my presentation tool of choice.

Hello! I’m Pat and Better by Design is my newsletter sharing pragmatic insights for creative innovation through the lens of design. If you’re new here, join our growing tribe of design innovators!

Last week, I shared the IMPACT framework which uses design thinking to drive change in tech organizations. One key part of IMPACT is 'A' for articulate : you need strong presentation skills to build your influence.

Crafting good presentations has always been a challenge and traditional presentation tools often did more to restrict, rather than help me. Every time I started a new slide deck in Google Slides or PowerPoint my blood pressure would rise. Their layout and formatting options would frustrate me and their long list of slide thumbnails would confuse my argument instead of clarify my ideas.

Good presentations need two things: a clear story and eye-catching visuals. And I had a hard time achieving either with those tools.

Then, I switched to Figma.

Now, I use the full extent of my skills as a visual storyteller without fighting the tool.

Although Figma wasn’t originally made for presentations, it was easy to configure a basic setup that delivered on my needs. With just a little bit of effort, I created a kit that helps me start new slide decks quickly. The best part? Unlike traditional slide tools, Figma stays out of the way, letting me focus on my ideas.

In this article, I'll share the 7 steps I take to transform Figma from a general design tool into an effective presentation tool. These little configurations simplify the tool and help me concentrate on what's important: clearly sharing my ideas with the audience.

I hope they help you too!

I know Figma isn't always an option for presentations. Like many others, I still have to use standard tools when the scenario calls for them. I'll talk about those another time. Today, let's focus on how Figma can help in ideal situations.

7 ways I configure Figma for presentations

#1. Organize the Account: One Presentation Per File

Let's start with how I organize things at the account level.

I have a dedicated Figma 'Project' just for presentations. This keeps them separate from other product-focused design work, making them easy to find and avoiding any mix-ups.

I stick to a rule: one presentation per file. Storing multiple presentations on different pages in a single file didn’t scale well and made it harder for me to remember where specific slides lived. By keeping each presentation in its own file, I avoid this confusion.

Now, let's talk about file thumbnails. For product-focused design work, thumbnails are useful for tracking progress and coordinating with development projects. However, for presentations, I found thumbnails less helpful. So, I skip them. Interestingly, I’ve discovered that seeing the overall 'shape' or structure of a presentation helps me identify and differentiate them more effectively than a thumbnail ever did.

#2. Structure Pages within Each File

In my presentation files, I follow a three-page system.

The first page is the key: the presentation itself. When I share a file link, I noticed most people don't look beyond the first page. So, by placing the main presentation here, I reduce confusion.

The second page serves as a repository for extra slides. These are often well-developed ideas that didn't make it into the final version. I keep them close because they might be useful later.

The third page is my 'archive' where I store ideas I'm unlikely to revisit. This includes random experiments and concepts that didn’t quite pan out. I rarely delete slides, but archiving them helps keep my workspace focused.

#3. Design Slide Variants for Clarity

In my presentations, I rely on three core slide variants: a section title slide, a sub-section title slide, and a standard slide.

I style these three variants distinctly to visually signal shifts in the presentation's topics. Here's how I differentiate them:

Section Title Slides: I use a bold, brand color scheme for these. They mark the beginning of a new major topic.

Sub-section Title Slides: These are in a secondary brand color, signaling a sub-topic within the main section.

Standard Slides: They are simple and clean, with a flat white background, perfect for detailed content.

To streamline my workflow, I keep a component version of these slides in a new presentation template. This setup helps me get started quickly. However, in any specific presentation file, I immediately detach the component instances so I can add content directly into the Frames.

#4. Leverage Figma Presentation Order

A crucial aspect of organizing your presentation frames in Figma is arranging them left to right, then top to bottom. This isn't just a preference—it's essential. Adhering to this pattern ensures that Figma's presentation mode automatically cycles through the frames correctly.

Here's my approach: I begin with a section title slide and progress horizontally to narrate that section. Once the section concludes, I move down to start a new row for the next section. For long sections, I create extra rows, each representing thematic groups within that section.

Sub-section title slides are useful for formally dividing long sections. While I don't always use them, they’re handy when a distinct thematic area enhances the story's flow.

This left-to-right, top-to-bottom layout isn't just about order—it's about visually capturing the story arc of each row and the entire presentation. When it comes to understanding your narrative, this spatial layout significantly outperforms the stacked list of thumbnails in traditional slide tools.

Interestingly, this approach mirrors the methods we used at Leo Burnett to create decks for multi-million dollar ad campaigns. Back then, we used Keynote, printed the slides, and physically arranged them on a wall to achieve this overview. Now, Figma allows us to do this digitally, simplifying the process dramatically.

#5. Automate Frame Naming

When it comes to naming slides, I keep it simple: I don't name them.

Why? Because in presentations with dozens of slides, updating each frame's name manually every time I make a change is just too much hassle.

Instead, I use a game-changing plug-in: Super Tidy by Ismael Gonzalez. This tool transformed how I handle slide naming.

Here's how it works: I select all the frames I want to rename and choose the 'Rename' action in Super Tidy. The plugin then renames the frames based on their position on the canvas. This order matches how Figma will read them in presentation mode.

The naming starts at 000 for the first row, moving left to right (so, 001, 002, and so on). Each row below increments the first digit (000, 100, 200, etc.). It's a neat, orderly system that saves me a ton of time.

This automated process speeds up my workflow significantly. It gives me the flexibility to move slides around, placing them exactly where they fit best in the story and where they’ll make the most impact.

An added bonus? Super Tidy can also 'tidy' your frames by adjusting their spacing on the canvas.

#6. Use Shared Styles

Beyond my three slide variants, I haven't gone too deep into creating many shared styles specific to presentations but they can be useful.

One example of a shared style I've implemented: a box shadow effect for the numerous images in my slides. This shadow aligns with the brand color palette and gives the images an extra visual pop. In Figma, adjusting box-shadow values for each image can be tedious. So, creating a few shared styles for this effect saves me time and helps with visual consistency.

#7. Add a Splash of Interactivity

A special touch I like to add, time permitting, is prototype animation.

Since I’m using Figma, I can tap into the same prototyping tools I use for product UI design. But here, the animations are much simpler: mostly easing the transitions between key points in my story.

My starting point is to link the container Frames of all slides with a basic ‘Smart Animate’ interaction . Often, this is enough to smooth out the experience. Sometimes, Smart Animate creates unexpected artifacts. In those cases, switching to a different animation type, like a simple dissolve, usually solves the problem.

As an extra organizational step, I sometimes create separate, named prototype ‘Flows’ for each major section of a presentation. While this doesn’t add major value, it's a nice touch for final organization.

⚠️ Two important warnings ⚠️

Reordering frames becomes a hassle once you've added prototype links. So, I suggest doing this only when your presentation's order is final and unlikely to change.

Once you link one frame with a prototype interaction, the rest won't show up in presentation mode unless they're also linked. It's an all-or-nothing deal, so plan accordingly.

Final Thoughts

Adopting Figma was a big boost to my presentation creation process.

The tactics I outlined, including automating slide naming, using shared styles, and incorporating animations, establish an efficient baseline workflow.

With those essentials streamlined, I'm now free to harness Figma's key presentation strengths: superior styling and a more coherent narrative flow on its visual canvas.

Now I can focus on crafting presentations that tap into my full skillset as a visual storyteller – a big win in my book.

Until next time,

If you got a little value from this post, consider subscribing, sharing, or following me on X/Twitter . If you got a lot of value, consider pledging to support my work with a paid subscription in the future.

Similar posts

The Design IMPACT Framework

How I Make an Aesthetic Figma Thumbnail Component That Scales

Ready for more?

Member-only story

3 Ways To Use Figma For Design Presentations

Kate Steinmeyer

UX Design Club

Figma is usually used for designing user interfaces but today I will share 3 ways you can use Figma for creating presentations.

• Create interactive prototypes within your presentation

Figma allows designers to create interactive prototypes quickly and easily. You can add interactions to your slides, making it possible to create clickable prototypes within your presentation. Interactive presentations can help you communicate to stakeholders and clients with engagement.

To create a prototype in Figma, you need to select the frames you want to link and add an interaction. You can choose between different types of interactions, such as hover, click, or drag. You can also set transition effects between frames to create a seamless user experience.

2. Use Figma to create animated presentations

Figma also has animation features that you can use to create animated presentations. You can add animations to your designs, such as fades, slides, and flips, to make your presentation more engaging.

To create an animated presentation in Figma, you need to create your designs, select the elements you want to animate, and then add animation properties, such as duration, delay, and easing. You can also preview your animations in Figma to see how they will look…

Written by Kate Steinmeyer

Hello, I have 10+ of years of experience in UX and Product Design. Ex Salesforce, Samsung

Text to speech

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

19+ Million Figma Graphic Templates & More With Unlimited Downloads

Download thousands of Figma graphic templates, UI kits, and web templates with an Envato membership. It starts at $16 per month, and gives you unlimited access to a growing library of over 19+ million 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.

Business Analytic Infographic Slides for Figma

This is an exceptional Figma template for elevating your business presentations. The pack offers 15 unique slides with a light background option, a widescreen setup, and handmade infographics. It’s fully customizable, providing PNG files and ready Figma files.

Figma Presentation Slide Template

A versatile Figma template for creating simple slides and landing page headers. It flaunts a modern flat vector design that is easily editable and customizable, making it suitable for web, mobile, hero images, and UI. The template comes as a 100% vector with editable text and colors, organized files, and utilizes an Open Sans font.

Data Presentation Figma Template

A highly adaptable and modern illustration perfect for sectors such as Data Science, Technology, and Finance. Its versatility lends itself well to use within web banners, mobile apps, and landing pages. Offering full customization, it is compatible with numerous platforms and software, and comes in various file types including EPS, PSD, SVG, and more.

Technology Presentation Figma Template

Elevate your technology presentations with this visually engaging, flat-design Figma template. Perfect for web, mobile, and user interface needs, the layouts are entirely editable and customizable. This resource features 100% vector graphics, editable text, and open-sans typography, all arranged neatly for ease of use.

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.

• INNOVATION FESTIVAL
• Capital One

06-26-2024 PLUGGED IN

Figma’s new Slides app focuses on design, fun, and (oh, yeah!) AI

CEO Dylan Field says that users have always used Figma’s design platform to create presentations. But its new app for that purpose ‘just emerged.’

[Image: courtesy of Figma]

BY  Harry McCracken 5 minute read

In a sense, Figma has been in the presentation software business for years—just not on purpose.

The company’s namesake product is a web-based design platform optimized for prototyping user interfaces, not assembling and conducting slideshows. Nonetheless, plenty of users commandeered it for that purpose. In just the past 12 months, users have created 3.5 million slide files, the company says.

Today, at its Config conference in San Francisco, Figma is unveiling a real presentation product. Logically named Figma Slides, it joins the company’s design tool and FigJam whiteboard to form a visual communications suite of sorts. Launching as a free beta available to anyone who’d like to try it, Slides will become a paid feature once it officially ships.

Dylan Field, Figma’s cofounder and CEO, is one of those folks who was already using the platform as an ad hoc presentation package. But he doesn’t take credit for seizing the opportunity to formalize that function with Figma Slides. Instead, he says he gave in to a groundswell of internal support. “Folks who were already inside the company [said] ‘Hey, we need a product,’” he told me earlier this week. “It was never a top-down directive. Honestly, it just emerged.”

By extending Figma’s reach into a mainstay of business software such as presentations, Figma Slides does reflect one of Field’s own mantras about the future of his company and work in general: that creativity is the new productivity . The app also helps build out what Figma looks like as an independent business after the collapse of Adobe’s $20 billion acquisition bid , which was bedeviled by antitrust concerns and ended last December. So does the other news it’s announcing at Config, including a redesign of the design tool, more pervasive use of AI across the platform, and revisions to “ Dev Mode ,” which facilitates the process of turning prototypes into working products.

Still, for all the arguments in favor of Figma embracing presentations, it’s not like it’s entering an emerging market without deeply entrenched competition. Few software products are as synonymous with their category as Microsoft’s 37-year-old PowerPoint. Organizations that aren’t paying for it as part of Microsoft 365 (née Microsoft Office) probably have access to Google Slides, a component of Google Workspace . Field acknowledges that “a graveyard ” of other alternatives have come and gone over the years.

But he stresses that the current field has room for multiple players: “ Canva Presentations might be one of the biggest ones out there, and Tome is growing fast. There are so many slide products.” Perhaps more important, Figma isn’t rash enough to think it can kill PowerPoint. The idea, Field says, is to offer a great presentation option for Figma’s core constituency: “people who are building products.”

That’s a sizable audience in itself. Though Figma doesn’t disclose how many users it has, one 2023 survey said that 70% of design professionals cited it as their primary tool. Once designers within an organization embrace the platform, it tends to spread: All told, usage is evenly split among designers, developers, and other folks who participate in product development, the company says. Field predicts that students—who can get the whole Figma platform free—will also like Figma Slides.

At last: presenter notes

Based on the demo Field gave me over Zoom, Figma Slides certainly looks like a Figma product. It’s a polished, wholly browser-based experience with built-in real-time collaboration features akin to those in the company’s design tool and FigJam. But feeling Figma-esque wasn’t enough. For example, a presenter notes feature was mandatory: “It’s a very simple thing, but it’s probably one of our most-requested features for Figma,” Field says. The company also created a grid view optimized for viewing an entire show in thumbnail form and shuffling slides around.

Presentation templates were another necessity, and given Figma’s design orientation, the quality bar was high. “We have all sorts of templates we’re shipping with, and those templates give you a ton of control,” Field says. The app does a fair amount to ensure visually pleasing results on its own, such as intelligently adjusting text color to ensure legibility when you change the background. But users who want absolute freedom to specify typography, shapes, and other elements can turn on Design Mode, which provides access to a wealth of existing features. They can also drag design prototypes created in Figma right onto slides, where they continue to function—a killer feature that PowerPoint and Google Slides can’t replicate.

Along with everything Figma Slides does to let users handcraft exactly the presentation they envision, it also packs some generative AI. (Hey, this is 2024—of course it does!) For example, a Tone feature lets you use AI to auto-rewrite slide text on two axes: “Concise” to “Expanded” and “Casual” to “Professional.” You can also just tell the app to reword your phrasing in a style such as “Executive,” “Technical,” or “Educational.”

Oddly enough, Field didn’t mention the AI features Figma Slides has until I asked about them—a striking departure in an era when many tech executives won’t shut up about the technology. He’s hardly an algorithmic Luddite: For example, he says that one of Figma’s priorities is to help neophytes get going on its platform. AI can help by generating images, text, and entire designs, ensuring that they aren’t scared away by a blank canvas.

But rather than talking up automation for its own sake, Field, who told me in 2021 that the company wanted to make sure its FigJam whiteboard let “the humanity [shine] through,” emphasized similar goals when I spoke to him about Figma Slides. The app lets people viewing a slideshow participate with features such as stamps and polls—a dollop of interactivity far afield from business presentations in their stereotypical, largely one-way form.

“What’s been wild with FigJam is that our differentiator is fun,” Field says. “And the more fun you can make a meeting, the more that you can get people to express [themselves], to bring their ideas to the board, to participate. I think people are going to see the same thing in Slides.”

With AI’s tendency to mechanize aspects of work that were once the province of the human mind, concepts like fun, self-expression, and participation can feel endangered. Field, however, argues that they’re only becoming more crucial. “We’re in a world where AI is just going to make everybody more productive,” he says. “And my view is that creativity is going to be how you stand out. Actual unique thinking—going down divergent paths, working past clichés.”

Historically, presentation software’s reputation for inducing tedium has been so pervasive that even Microsoft has acknowledged the phenomenon of “ death by PowerPoint .” It would be pretty cool if a product such as Figma Slides not only overcame that regrettable legacy but sparked the kind of fresh thinking Field is talking about.

You’ve been reading Plugged In, Fast Company ’s weekly tech newsletter from me, global technology editor Harry McCracken. If a friend or colleague forwarded this edition to you—or if you’re reading it on FastCompany.com—you can check out previous issues and sign up to get it yourself every Wednesday morning. I love hearing from you: Ping me at [email protected] with your feedback and ideas for future newsletters.

Apply to the Most Innovative Companies Awards and be recognized as an organization driving the world forward through innovation. Early-rate deadline: Friday, August 30.

ABOUT THE AUTHOR

Harry McCracken is the global technology editor for Fast Company , based in San Francisco. In past lives, he was editor at large for Time magazine, founder and editor of Technologizer , and editor of PC World   More

Explore Topics

• Dylan Field
• Tech This hidden Google tool brings Pixel 9 AI powers to any device
• Tech Apple Intelligence is the best reason yet to finally upgrade to an Apple Silicon Mac
• Tech Why platform stations are better than satellites for global internet connectivity
• News Housing affordability is so stretched that the housing recession is still ongoing—despite the recent rate dip
• News The hate speech landscape on Facebook is worse than you thought. Here’s why
• News Fed’s favored inflation indicator shows price increases remained low in July
• Design College football is entering its branding era
• Design Pickleball vs. tennis: How the games’ leaders are competing to be America’s favorite racket sport
• Design This unusual kinetic type bends, morphs, and floats
• Work Life Retirement isn’t just a financial decision. It’s a deeply existential issue
• Work Life A psychologist explains the 5 most common sources of career frustration (and how to find work that works for you)
• Work Life How to balance a side hustle with a full-time job