How to Make a Killer Presentation Using Figma

2022-06-25 04:00:49 By : Ms. Tina Li

From sleek transitions to impressive design elements, Figma lets you make amazing presentations. We’ll show you how.

There are a million ways to make a presentation, but Figma is an underrated tool for it. The prototype feature in Figma allows for a multitude of customizable transition options. Not only will your transitions wow your audience, but you can incorporate plugins for extra pizazz and keep your audience engaged, making you feel confident in your skills.

We’re going to show you how to make a killer presentation using Figma; just follow this guide.

Open Figma and click New design file. Click the Frame Tool (F) to draw your frame or to choose a preset frame on the right using Presentation > Slide 16:9. You can create a master template to save time.

Rename your frame by double-clicking the blue title on the top left. Set a background color; although, you can always change it later by highlighting all frames and changing the fill color.

Use the Text Tool (T) and write your title. Use separate text boxes for separate lines, with only one or two words per line. Set your text preferences in the Text menu on the right. Figma uses Google fonts, so you may want to know the best Google fonts pairings.

You can use a stock photo or take your own relevant photo. To add an image, draw a rectangle using the Rectangle tool (R). Your image will sit in this shape.

Click the rectangle and go to Fill and click the colored square. Then click Solid > Image > Choose image. Find your image and click Open. Hover over the image to reveal 4 white circles. Click and drag one circle inwards to round the corners of your image.

Arrange your layers so that the image is at the back and the text is on the top layer. You can drag the layers in the layers panel or by using Cmd/Ctrl + [ to send a layer back or Cmd/Ctrl + ] to bring a layer forward.

The first transition will open the image and allow the title text to slide into the frame. First, duplicate the first frame by selecting it and hitting Cmd/Ctrl + D to duplicate it.

On the left-hand frame, scale the image down by reducing the height attributes in the H box to around 150, leaving a horizontal slit of the image. Center-align it by selecting both images across the frames and clicking Option + V (Mac) or Alt + V (Windows).

To complete the image transition, select the left-hand image. Then change the opacity to 0% in the right-hand menu in the box next to Pass Through under Layer. This will make the image invisible before it transitions and opens.

Click the first text box and hold down Shift. Start dragging, then also hold down Spacebar and continue dragging the text off of the frame. It looks like it disappears once out of the frame. Without the addition of the spacebar, this transition will not work, but if you hold the spacebar before dragging, it will only move your frame.

Do this again for your second or subsequent text boxes, but drag them a little further left to add some variety in the transition. With the text still selected, reduce the layer opacity to 0% the same way you previously did for the image.

To set the transition, go to Prototype. Select the left-hand frame and click the blue circle that appears in the center of the right-hand side of the frame. Drag it, so the line goes to your second frame.

In the drop-down that says Instant, select Smart Animate. Then change the box with the stopwatch to 1000ms. This will set your transition to take one second from the click of the mouse. The other settings should be set by default. Ensure you do not rename frame titles after setting a transition, otherwise, the files won’t connect.

Click the Play button to test your transition. Go back to Design to continue your presentation design.

To transition from slide 1 to slide 2, duplicate your right-most slide (Cmd/Ctrl + D). In the new frame—slide 2—move the text boxes out of the frame using the previous technique (Shift + Drag then Spacebar after you’ve started dragging). Move one text box to the left and the other to the right of the frame. Set the opacity to 0% for both.

For the image, scale it down and move it slightly off-center, then set the opacity to 0%. This, effectively, gives you a blank canvas for your second slide. You can add the content on top of the invisible assets from the previous slide.

Add a large image to the center of the frame. To add some decorations on top of your image, use a Figma plugin for GIFs or download a sticker GIF from Giphy and drag it on top of the image. Select your main image and any GIFs, and group them together (Cmd/Ctrl + G), this ensures that Smart Animate will work properly.

Select the group and copy it (Cmd/Ctrl + C). Then paste it onto the frame of slide 1 (Cmd/Ctrl + V). Scale it down and set the opacity to 0%. Then move this layer to the back (Cmd/Ctrl + [). This ensures a smooth transition into the next slide.

Go to Prototype. Select slide 2 and click the blue circle to drag it to slide 3. Figma’s default in the prototype menu is to use the previous settings, so they should be all set according to the previous transition. Go back to Design.

Duplicate the last slide (Cmd/Ctrl + D). This slide will use the same image as the previous one, but we will scale it to one side of the frame. Move the image to the left of the frame by dragging it while holding Shift. Hover on the right edge of the image until opposite-facing arrows appear, click and drag the right edge of the image towards the left until satisfied.

Go to Prototype and link the two frames together. Then go back to Design.

Add a title and body text to the right of the scaled image, and group them together. Copy the text group and paste it onto the previous slide. Click and drag the text group to the right of the frame like before.

Create a mockup; check out our guide on creating mockups using plugins in Figma. Add a new frame, then paste your mockup onto it. Resize the mockup to fit the frame.

Copy the mockup and paste it to the previous frame. Resize it to fit within the image portion, then move it to the back of the layers and set the opacity to 0%. Link the frames in Prototype.

Duplicate the mockup frame. Add a title and description to explain parts of your mockup. Group the text together and name it. Then, you can create a frosted glass indicator for your bullet points and lines. Group together one line with one circle. Line up your indicator with what it’s describing and add your description next to it. Link the frames in Prototype.

Duplicate the frame and add another bullet point indicator with what it’s describing. Prototype this again. Duplicate each frame per bullet point, so each bullet point transitions alone.

Duplicate the last slide. Write a final word or two and center it. Copy the text and paste it onto the previous slide.

Scale the text down by holding K while scaling it—this keeps your text formatted while sizing it down. Place your text somewhere near the top of the mockup and send the layer to the back, under the image. Set the opacity to 0%. Go back to your final slide.

Move all the other objects out of the frame using the dragging method. The transition will slide everything out towards the sides and top as the text moves down from the top and expands. Link slides in Prototype.

You can access your presentation anywhere that you’re able to log in to your Figma account or share the URL with others, so they can watch from anywhere. To present your final presentation with its transitions, click the Play button and present in full-screen mode.

You can also save the frames as PDFs, although you’ll lose the animated transitions by doing that.

Not only is this presentation minimalist, which won’t overwhelm your audience, but the transitions are professional and clean. It doesn’t take a UI/UX expert to use Figma in a way that benefits your presentations, no matter your job role. Present with confidence, and you will be inundated with questions about how your presentation was made.

Ruby is a writer in MUO’s Creative category, focusing on writing about design software. Having worked as a designer, illustrator, and photographer, Ruby also has a BA in Graphic Communication and an MA in English with Creative Writing.

Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!