grid for 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

⚡️ Get 30% off EVERYTHING ⚡️

Use coupon: 

How to Create a Responsive Layout Grid in Figma

Grid systems help UI designers organise elements consistently across different mediums including, mobile, tablet, and desktop.

In Figma, grid systems are called layout grids that come in different forms and sizes, which vary based on the interface you're designing for. In this article, we'll explore layout grids in Figma and guide you on creating responsive grids.

Layout grids are just one of the many functions you can explore within Figma. If you're interested in learning more about grid systems on Figma and how it works alongside other features, Designership's Ultimate Figma Masterclass Course covers the complete end-to-end process.

What is a layout grid in Figma?

Layout grids act as guard rails to keep your content aligned.

In Figma, you can use layout grids on frames and components. These grids don't depend on the size of your canvas, so you can adjust them to fit your design needs. Whether you want a grid with equal-sized columns or a grid that adjusts to fit your content, Figma has options.

Choosing the proper grid layout for your design can achieve a balanced, visually pleasing result that matches your design goals and help create a more user-friendly product for your audience. This is also why it's crucial to understand the formats, types, and key elements of grid systems in Figma.

Different Grid Formats

Figma allows you to choose which grid format to apply to your designs when applying layout grids. There are three grid format options, each with adjustable properties:

• Uniform grid : Pixel-based grids that are evenly spaced throughout a frame. Pixels of a uniform grid are adjustable.
• Grid with columns : Vertically aligned grids are most commonly used for web designs.
• Grid with rows : Horizontally aligned grids are the most efficient for aligning typography.

Grid with columns and grid with rows can be applied to a single frame. This maximizes the use of layout grids within your design. Using these grid formats together can give you more control and flexibility in aligning your design elements.

Different types of layout grids

There are two types of layout grids in Figma: fixed and fluid. Each of these types can be used depending on your design needs.

In a fixed layout grid, your design elements are static. Whether the frame size or orientation changes, the grid's width and position remain the same.

Fluid layout grids, also called stretch or flexible, are dynamic grids that adjust to the size of a frame. Elements shift accordingly as the frame is resized, making the use of fluid layout grids more responsive.

When using a fluid layout grid, any size or orientation changes to the frame will automatically apply to the grid.

3 basic layout grid elements

To better understand the functionality of layout grids in Figma, there are four key terms to get familiar with.

Columns are the most used elements when it comes to responsive grid layouts. These serve as your guides on aligning your design's contents. Sectioning your design within columns also ensures the clarity and readability of your design for your users.

The number of columns, referred to as counts in Figma, in a layout grid varies depending on your frame's interface to help balance out your design. You can have up to 12 columns in Figma, but it is highly recommended that designers use the 4-point grid system where defined sizes and spaces are divisible by 4.

Gutters are the spaces in between your columns or rows. These provide a clear structure for separating your design across an interface. Gutters also ensure consistent spacing between your elements. Using the appropriate gutter spacing within your grid design establishes a balance between your elements, allowing you to maintain a neater-looking design.

Margins are the spaces between the edge of the interface and the first column or row of elements. They create empty areas around your grid design, which helps prevent overcrowding. These spaces provide breathing room and make your design look more balanced and organized.

Creating a responsive grid system in Figma

Now that you have a deeper understanding of a grid system let's look at how to create a responsive grid system in Figma.

Identifying breakpoints and layout changes for Responsive Web Design

Breakpoints are specific thresholds on the screen where the design layout changes. These points determine when your design will adjust based on the size of the interface. When you reach a breakpoint (usually defined by specific dimensions), elements in your design will automatically rearrange themselves to fit the interface.

Using breakpoints ensures your design looks good and functions well on different screen sizes. It allows your design to adapt and provide an optimal user experience, whether someone is viewing it on a small smartphone or a large desktop monitor.

Before applying a layout grid to a design, you'll need to identify your breakpoints first. These breakpoints indicate when your design layout will change as the screen resolution or screen size changes.

On most screens, the first breakpoint starts at 320px. This means that from 320px onwards, the interface layout adapts as the screen size increases. Anything below the breakpoint would be the point where the layout would stop adjusting.

As the interface expands, the layout changes and elements begin to section into different columns. The larger the screen's sizes are, the number of columns that appear on the interface increases, creating an evenly-spaced and balanced UI design.

In creating responsive designs, it is important to note that breakpoints may vary according to the website design, browser dimensions, and user's screen resolution. However, the most commonly used breakpoints include:

• 320px — 480px - for mobile devices
• 481px — 768px - for iPads & tablets
• 769px — 1024px - for small screens like laptops
• 1025px — 1200px - for large screens like Desktops
• 1201px and above - for extra large screens like TV

Once you've identified your design's breakpoints, it's time to create your Figma frames.

Creating viewport sizes in Figma

Using your identified breakpoints, head to Figma and create your frames. These frames represent the different devices that you will be designing for. Each frame would have different dimensions, with its width corresponding to your breakpoints.

In grid design, these frames are called viewports . To create them:

• Press F on your keyboard; or
• Select the frame tool on the upper-left corner of Figma's toolbar

Designing responsive layout grids for viewport size

After creating your viewports, each would have different layout grid column counts to cater to the space you're designing for. As you increase your interface size, you also increase the column count. This ensures a balanced design as more elements are placed into the Viewport.

Apart from the column count, the layout grids' margins and gutter adjust as the interface expands. Following the 4-point grid system when identifying margin and gutter spacing is good practice, especially for creating layout grids for different displays.

In a 4-point grid system, any defined height or width must be divisible by 4 or in increments of 4. This includes line heights, paddings, margins, and gutters. Following this aligns your elements equally, as most of your content gets sectioned with an even number.

Creating a layout grid for Viewports with a 320px — 480px Breakpoint

• Select the Viewport frame
• Click the + icon on the left panel under layout grid
• Click the grid icon to reveal the layout grid properties
• Change grid to columns
• Change the column count to 4
• Adjust the margins to 16
• Adjust the gutter to 8

Once you've created the layout grid on the Frame, make your design elements responsive by following the steps below:

• Create a new frame on top of your existing Viewport frame by pressing F on your keyboard
• Label your new frame as 'Content' or as desired
• Set the Constraints of your frame to Left and Right
• Press R on your keyboard and create a rectangle
• Auto layout the rectangle and the 'Content' Frame by pressing Shift + A on your keyboard
• Select the 'Content' frame and make the following adjustments: - Constraints: left and right - Horizontal resizing: fixed ‍
• Select the rectangle and make the following adjustments: - Horizontal resizing: fill container ‍
• Select the Auto Layout and make the following adjustments: - Horizontal padding: 16

Creating a layout grid for Viewports with a 481px — 768px Breakpoint

The screen size is expected to expand for this Viewport, increasing the interface's content. To balance out the content for this Viewport:

• Copy [ Cmd + C or Ctrl + C ] and paste [ Cmd + V or Ctrl + C ] the 'Content frame' from the previous Viewport frame to the current Viewport frame.
• Copy the layout grid from the previous Viewport frame: - Select the layout grid on the left panel in Figma - Copy [ Cmd + C or Ctrl + C ] the layout grid from the previous Viewport frame - Paste [ Cmd + V or Ctrl + V ] the layout grid onto the new Viewport frame ‍
• Click the grid icon to adjust the layout grid properties and create white spaces proportional to the margins and gutters - Keep margin to 16 - Change gutter to 32 ‍
• Adjust your Auto Layout to align your content to the grid: - Auto Layout direction: Horizontal - Space between items: 32 ‍
• Duplicate [ Cmd + D or Ctrl + D ] the rectangle inside the 'Content' frame to see evenly distributed content

Creating a layout grid for Viewports with a 769px — 1024px Breakpoint

Generally, for Viewports with breakpoints above 768px, it is recommended to use a 3-column layout to be more precise with balancing out your design. Remember to follow the 4-point grid system and utilize column counts divisible by 4.

In this case, we'll use 12 columns for a 3-column content layout. To create an evenly-spaced layout grid for this Viewport:

• Copy the layout grid from the previous Viewport frame
• Click the grid icon to adjust the layout grid properties - Change Column Count to 12 ‍
• Create more white spaces that are proportional to the margins and gutters - Change margin to 24 - Keep gutter to 32
• Stretch the copied 'Content frame' to occupy the whole Viewport frame.
• Duplicate [ Cmd + D or Ctrl + D ] the rectangle inside the 'Content' frame to see evenly distributed content. ‍ NOTE: Delete one of the content boxes to create a 3-column content layout. ‍
• Adjust your Auto Layout to align your content to the grid: - Auto Layout direction: Horizontal - Space between items: 32 - Left and right spacing: 24

Creating a layout grid for Viewports with a 1024px and above Breakpoint

Viewports higher than 1024px contain more content. The columns that structure the content go beyond 4 columns for an evenly-spaced design. Some designers with higher viewports utilize 5 columns to have a less-crowded design. For this example, we'll be using 4 columns.

In these Viewports, the margins and gutters of the interface also increase, creating more whitespace between elements placed on the design. As a result, margins and gutters typically double and are larger for better readability.

To balance out the content for this Viewport:

• Click the grid icon to adjust the layout grid properties and create white spaces proportional to the margins and gutters - Change margin to 80 - Change gutter to 40 ‍
• Duplicate [ Cmd + D or Ctrl + D ] the rectangle inside the 'Content' frame to create 4 content boxes
• Adjust your Auto Layout to align your content to the grid: - Auto Layout direction: Horizontal - Space between items: 40Left and right margin: 80

It is important to note that there are no strict guidelines on how your layout grids should work. You can use any measurements for your column count, margins, gutters, and other spaces if they fit your design requirements.

If you look at any web app or website, these designs will utilize varying types of Grid layouts. If your layout grids follow the 4-point grid system, you can create a balanced design regardless of Grid type and format.

Visualizing your grid layout design

When you've laid down your layout grid onto your design, Figma allows you to visualize the responsive grid system to how it would look from a user's perspective.

Using the Figma Plugin Breakpoint , you can easily preview your responsive layout according to your Viewports:

• Open Figma Plugins
• Search for Breakpoints and open the plugin
• Select New Adaptive Layout
• Drag the Breakpoints plugin frame into a desired spot on the canvas
• Input your Breakpoints. - Make sure that the starting point on the horizontal alignment or the width is at 0 or 1 - Click on the + icon to add your necessary Breakpoints ‍
• Press the + icon under one Breakpoint and select the frame which follows the Breakpoint ‍ ex: Under the 320px Breakpoint, select the 320px Viewport Frame ‍
• Repeat step 5 until all Breakpoints have their corresponding frames
• Press Cmd + G or Ctrl + G on your keyboard to toggle off the layout grid
• Adjust the Breakpoints plugin frame to view how your interface responds according to the different Breakpoints

Layout grids for different interfaces

Now that you've learned how to create responsive layout grids in Figma, there are still several key principles to remember when applying a responsive grid system to your design project. One of those being that grid systems are not a one-size fits all idea.

Different user interface designs, from websites to mobile applications, could have different layout grids to cater to their content. To ensure coherence, clarity, and proportionality with your designs, utilizing the 4-point Grid System can guarantee the consistency of your designs no matter the layout grid Format.

Advanced techniques in Figma

Responsive layout grids are just one of the many things to learn about Figma. If you're looking to learn more concepts like component properties , prototyping, and more, then Designership's Ultimate Figma Masterclass Course will help you better understand how to approach them.

Helping over 6,000 designers worldwide, this Figma course gives a comprehensive step-by-step guide on the end-to-end design process from ideation to developer handover and design implementation. We guide you with practical solutions, expert advice, and hands-on projects so you can make the most out of Figma's most useful features.

Whether you're a beginner seeking to grasp the fundamentals or an experienced designer aiming to refine your skills, Designership's Ultimate Figma Masterclass Course is created to empower you every step of the way.

Related blogs

Join our newsletter.

Get exclusive content and become a part of the Designership community

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 concept testing for better product design

Concept testing is all about validating the product concept in its early phases to avoid investing in ideas that are doomed to fail.

Creating design specs for smoother developer handoff

Designers and developers sometimes have hiccups during a project. These guidelines can help avoid roadblocks and improve communication.

What is cognitive overload in UX and how can you prevent it?

Explore the psychology behind cognitive overload and learn UX strategies to help reduce it, with a focus on crafting user-centric solutions.

Figma Dev Mode: What it can and can’t do for a UX designer

Figma Dev Mode has an easy-to-work-with UI and layout and makes collaboration with other team members far easier.

Leave a Reply Cancel 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.

How do I make the grid layout perfectly sized for a 16:9 presentation?

You may have found a solution by now but if anyone else finds this topic, the solution I found is to make sure the grid size scales with your aspect ratio.

I had a 4k (3840 x 2160) with a grid of 50px and was giving the same effect, I changed the grid to 48px and it now scales perfectly starting from all edges.

Hope it helps!

Bento grid Figma presentation template

Many thanks to VIP Graphics who created and shared this new Figma resource.

It’s a free Figma Bento grid presentation template. For those who don’t know, the Bento grid is a structured layout that allows you to present information in neat blocks. Being a grid design, the layout automatically resizes or rearranges itself depending on the device used to view the presentation. This layout has been popularized by companies like Microsoft and Apple.

Cool stuff! Thanks for making this available to everyone.

You may also like

Frames X - The Ultimate Figma UI kit

Modular - Premium Figma Design System

S8 Figma Design System (Premium)

We’re sorry, but Freepik doesn’t work properly without JavaScript enabled. FAQ Contact

• Notifications
• Go back Remove
• No notifications to show yet You’ll see useful information here soon. Stay tuned!
• Downloads 0/60 What is this?
• My collections
• My subscription

Find out what’s new on Freepik and get notified about the latest content updates and feature releases.

• Moscow city
• Moscow kremlin
• Saint petersburg
• Moscow winter
• Saint-petersburg

Moscow Images

• Add to collection
• Save to Pinterest

• typography lettering
• typography quotes

• russian map

• city panorama
• building night

• business building
• corporate building

• moscow city

• modern building
• office building

• world landmarks

• city outline

• russian flag
• russia flag

• church building

• empty street
• city street

• sunset city

• wedding decor
• wedding table
• wedding event

• travel city

• tourism flyer
• vacation flyer
• holiday flyer

• flag design

• building entrance
• street background

• travel stamp

• stamp design

• building background

• united kingdom

• city illustration

• urban street

• abstract city

• welcome page

• Free Presentation Templates

Create engaging decks with free presentation templates and plugins to get started. Choose from hundreds of templates to find the best style for you.

• All collections