Make presentations in Figma

I get it. Since you discovered Figma, you got used to all its benefits and you find all the other tools to create visuals simply “not good enough”. You want to make pretty-looking slides but Powerpoint or Google Slides keep on putting limits on your imagination and effectiveness.

Well- not to worry about it, you can make your slide deck in Figma. This post sums up tips on how to make beautiful presentations in Figma fast, effectively, and how to present like a pro.

What you’ll learn here:

- Using frames as slides

- Useful tips for designing the slides

- The quickest way to add icons and illustrations to Figma

- How to adjust the graphics without disrupting them

- How to present with Figma (with a useful hack)

Start with frames

To create the slides use Figma frames. You can make a frame with the frame tool, which is enabled by hitting the F key or simply choosing it from the menu. Every frame will become a slide in the final presentation.

Find the Frame tool in Figma

As the name suggests, frames create a sort of a border for your slides and all content you’ll drop and move to it will become part of the frame.

The ideal dimensions for each slide (and therefore frame) are 1270 x 720 px.

The slides ordering

Once you get to the presentation view, the slides will appear ordered based on their coordinates on the canvas. First, by x-axis from left to right, and then by y-axis from top to bottom.

That means if your slides are in two rows, the ones in the upper row will be shown first, from left to right, and the view will continue to the second row, again left to right — kind of like when reading a book.

The order the frames will be presented in

Tip: Check Clip content in the right-hand side panel when the frame is selected. The graphics and shapes you’ll use will not be going over the frame’s edges in your file.

Find the Clip content mark in Figma

Design the deck

The most fun part- at least for me :). I always start by choosing the color palette for the project. I use site coolors.co to get inspired.

The color palette I used for the slide deck

Then, I set up the slides by placing text snippets and maybe background patterns or shapes, so I have an idea of the style of the final presentation.

Figma file with the template slides used for this post here →

Access the Figma Community file

Add icons and illustrations supa-fast

Nice icons and illustrations always make your slides more interesting and key points memorable. With Iconfinder’s copy-to-clipboard feature, you can copy and paste them to your Figma file super-quickly.

Slides with illustrations
  1. Go to Iconfinder and find the graphic you’d like to use.
  2. Hover over the chosen item and press ⌘+C on Mac and Ctrl+ C on Windows. The format that is chosen will be copied to your clipboard. I recommend copying SVG. It’s better quality and you can easily change the colors to match your design then.
  3. Paste it into your Figma file.
Using an illustration from Line Family by Pure Solutions

It’s super-quick!:) And you don’t need to install any plugins. You just need to be on a Pro plan to be able to do this, so if you’re not a Pro subscriber, you can jump on a 7-day free trial and give it a go.

Adjust the graphics

Resizing

Make sure to use the Scale tool in Figma when you are enlarging the graphics or making them smaller. You can enable it by hitting the K key or choosing it from the menu (under the cursor icon). By using this tool, you will keep all properties of the graphic intact.

Recoloring

If you want to make the illustrations or icons match your color scheme, the quickest way is to find Selection colors when an item is marked, choose the color you’d like to change, and pick a new one that matches your palette.

This way, you will recolor all elements with the same color within the graphic.

Here is a pack of 10 free illustrations that were used for these slides

Present like a pro

Presentation view

You turn on the presentation view by clicking on the play button in the right upper corner in Figma. Then you can move between the slides using keyboard arrows.

Presentation view

If you want to share your slides made in Figma you can generate a sharing link under the blue sharing button. If don’t want to show off the whole Figma file, simply share the prototype using the sharing button in the right-hand side upper corner.

Button for prototype sharing
View with sharing the regular link vs. view with sharing the prototype link

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Headlines at your fingertips: Today in Tabs

How Much Does It Cost To Design An App In 2022?

AMAL Mega Project:

What is User Interface Design?

Our third merged sketch is a 3D picture, which can describe the relation between participants and…

I Can Help Lessen the Designer v. Developer Tension

Human-Centered Design for eLearning and Instructional Design

A man wearing headphones and looking at a laptop screen.

Applying Nielsen’s usability heuristics in design

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bianka

Bianka

More from Medium

Figma to Webflow journey | Part 1

Design Communities For The Win

Once upon a time… I used to jump right into design.

Jumping into Design by @LaQueenie

Creating a gateway for Indian artisanal jewellery