Last updated on Jun 23rd, 2022

Make beautiful presentations in Figma

Figma Illustrations How to

By Bianka

Learn how to make neat-looking slides and present them effectively using Figma.

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

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

Tip: Before you start, make sure to grab the Figma community file for this guide.

What you’ll learn here

  1. How to work with Figma frames
  2. Useful tips for designing the slides
  3. The quickest way to add icons and illustrations to Figma
  4. How to adjust the graphics without disrupting them
  5. How to present with Figma (with a useful hack)

1. Start with frames

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

1*4d8flb6stHQhiXuRnPq6UQ.png

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

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

Ordering slides

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

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

Frame 3.png

Find the Frame tool in Figma

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.

Once you get to the presentation view, the slides will appear in the order you have the frames numbered in the Figma file, so it’s best to create them in the order you want to present them or make sure they are numbered correctly.

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

2. Design the deck

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

1_0uI3garB3sB1JwZI6ayN4w.png

The color palette I used for the slide deck

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

Frame 1.png

3. Add icons and illustrations supa-fast

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

Tip: Go download the free illustrations pack used for these slides.

Frame 4.png

  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.

1*S3n0E6-nLN3ZdYlxZE97YA.gif

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

4. Adjust the graphics

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.

Frame 9.png

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.

Frame 8.png

5. Present like a pro

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

Frame 2.png

If you want to share your slides made in Figma you can generate a sharing link under the blue sharing button. If don’t want to show off the whole Figma file add ?viewer=1 at the end of the sharing link URL. That way the user on the other end will only be able to access the file in the presentation view.

Frame 10.png

0 comments

Log in or Sign up to leave a comment.

Related blog posts

Try Pro for free

Access all high-quality icons and illustrations, invite your team members and get the first 10 credits on us.
Read more about Pro
Start your 7-day free trial

Then $9 per month. Cancel anytime.