Most people think of Figma as a tool for designing websites and apps. However, you can also use it to create presentations. It lets you customize slides in numerous ways, and its Prototype feature allows adding various transitions that you won't find elsewhere. On top of that, Figma supports several plugins, that further extend its capabilities for creating impressive presentations. So, if you want to learn how to create presentations in Figma, this is just the guide you need.

Step 1: Prepare your first presentation frame

  1. Go to the Figma website in your browser and create an account or sign in. Alternatively, open the Figma desktop app.
  2. Click on 'New design file' at the top.
  1. Once the new design file opens, click on the name field on the left and type in any name you want for your presentation, such as 'Presentation 1'.
  1. Press the F key or click on the second tool on the Tools panel at the bottom to select the Frame tool.
  1. When you select the Frame tool, a new panel will appear on the right, showing several presets that you can use. Click on the 'Presentation' preset to expand it and then select ' Slide 16:9'.
  1. Double-click the name of the slide at the top and rename it.
  1. If you want, you can change the background color of the slide by clicking the color swatch under the 'Fill' option on the panel on the right. You can always change the background color later if needed.

Step 2: Add the title text

In Figma, you use the Text tool to add text to any design.

  1. Click on the 'T button' on the Tools panel at the bottom or press the T key to select the Text tool.
  1. Click inside the slide you created and type the text for the title.
  1. You can change the font, font style, size, color, etc. using the Properties panel on the right. When adding the title text, write each line in its own separate box and avoid using too many words in each line.
  1. Once you've added your text, click the first tool on the Tools panel or hit the V key to select the Move tool. You can then click and drag the text boxes to reposition them as you like.

Step 3: Add images

After adding your title text, it is time to add images to your presentation.

  1. Click the dropdown next to the third tool on the Tools panel to view the available shapes you can use to add an image. You can also use shortcuts like the R key for creating a rectangle or the O key for an ellipse.
  1. To draw a shape, select it from the pop-up before clicking and dragging on your slide.
  1. After creating your shape, click on the color swatch under the 'Fill' option on the right and select 'Image' in the pop-up.
  1. Now you can choose whether to upload or create a new image. Click on the 'Upload from computer' button.
  1. Now select an image from your computer and it will automatically be inserted in the shape you created earlier.
Note: In addition to the Shapes tool, you can use the Pen tool by hitting the P key to draw a shape in which you want to insert an image. This lets you create non-standard shapes that are not available with the Shapes tool.
  1. You can rearrange the order of the text and image layers from the left panel. This can be handy when you want to place one object on top of another, such as text on top of an image. Right-click on the Ellipse layer on the left and then click on 'Send to back' to place it below the text layers.
  1. In the same way, you can rearrange other layers of your presentation. You can also use the shortcuts Ctrl + [ to move a layer back and Ctrl + ] to bring it forward.

Step 4: Create the first transition

The first transition will determine how the objects on the slide appear at the start of the presentation. Here, the transition will show the image and allow the title text to slide in.

  1. Select the first frame and use the Ctrl + D shortcut to duplicate it.
  2. Then select the image in the frame on the left.
  1. Click in the 'H' box that determines the height attributes of the image and change the height to something like 150.
  1. Select both images in the two frames by pressing and holding the Shift key and clicking on both images. Then use the Alt + V shortcut to align their centers vertically.
  1. Click on the image in the left frame to select it and change its opacity to 0% in the box next to 'Pass through under Layer' on the right panel.
  1. Click on the first text box and press and hold down the Shift key. Start dragging the text outside the frame and then press and hold the Spacebar.
  1. Pressing the Spacebar after you start dragging will ensure that the text stays within the frame even while the text box appears to move out of it. Check whether the text layer appears within the Slide 1 frame on the left panel even after moving the text box out of it.
  1. Repeat this process for other text boxes, moving each one to a little further to make the animation more impressive. Then reduce the opacity of all text layers to zero as you did for the image.
  1. Now switch to the Prototype tab on the top right.
  1. Click on the left frame to select it and bring the cursor to the right edge of the frame. A '+' icon will appear. Click on it and drag the arrow to the right to connect it to the right frame.
  1. A dropdown menu will appear. Click on the 'Animation' dropdown and select 'Smart animate'.
  1. Click on the 'Curve' dropdown and select 'Ease in'.
  1. Change the duration to '1000 ms' and keep the default values for everything else.
  1. Click the 'Play' button on the top to preview the presentation.

Step 5: Add more slides

You will need more slides for a complete presentation.

  1. Duplicate the second slide using the Ctrl + D shortcut.
  2. Then drag the text boxes out of the frame as you did previously but to the right and reduce their opacity to zero.
  1. Now, click on the image to select it, hold down the Shift key, and drag inward to reduce its size. Then reduce its opacity to zero.
  1. You can now add some additional text and images to the slide if you want.
Note: You can also use Figma plugins to add images and GIFs to your slides. To use a plugin, just search for it online and go to the plugin page. Click the 'Open in' button and open it in your Figma presentation.
  1. After adding your images and other elements, select them and use the Ctrl + G shortcut to group them together.
  2. Copy the image in the slide using the Ctrl + C shortcut and paste it in the previous slide using the Ctrl + V shortcut. Reduce its size and change the opacity to zero before moving it back with the Ctrl + [ shortcut.
  1. Go back to the right slide and group all text layers with Ctrl + G before pasting them in the previous slide.
  2. Click on the Prototype tab at the top right and connect the left slide with the right one as you did before. Figma will retain all animation attributes from the last time. Click the 'Play' button to check whether the animation is working properly.

Step 6: Adding and labeling mockups

You can also add mockups to your presentation. There are several Figma plugins you can use to create mockups like Vectary 3D Elements, Mockuuups Studio, and Clay Mockups 3D.

  1. After creating your mockup, create a new frame and paste your mockup into it before adjusting its size to fit the frame.
  2. Paste a copy of the mockup in the previous slide as well before reducing its size and lowering the opacity to zero.
  3. Move the mockup to the back and link the slide to the next one from the Prototype tab.
  4. Duplicate the mockup slide and then add a title and description with the Text tool. Then group them together using the Ctrl + G shortcut before naming the group.
  5. You can use the Line tool from the Tools panel or L key to connect the feature you are explaining in the mockup with its description. Press and hold the Shift key while drawing a line to keep it straight.
  6. Next, you can add a bullet point indicator. Create an ellipse with the Shapes tool and reduce its fill by 50% while adding a Background Blur of 20%.
  7. Connect one line with one ellipse for an indicator and group them together before naming the group. Add a description next to the indicator.
  8. Repeat the process for the different features you want to explain in your Mockup, duplicating the frame for each feature.
  9. Switch to the Prototype tab, connect the different slides, and then press the 'Play' button to check if it is working properly.

Step 7: Finalize and share your presentation

  1. For the last slide, follow the same steps as before. Write some text and add images before copying them to the previous slide.
  2. Reduce the size of the text in the previous slide while holding down the K key to ensure the text does not lose its formatting. Then send the text layer to the back and lower its opacity to zero.
  3. Go back to the final slide and drag all the other objects out of the frame as before. Then connect the previous slide to the last one from the Prototype tab and click the 'Play' button once more to preview the presentation.
  4. Click the 'Share' button on the top and you can then copy the link to the presentation and share it with others. You can also copy the Dev Mode link, and prototype link, and publish the project to the Figma community.
  1. To run the presentation, click the dropdown next to the Play button at the top and click on 'Present' or use the Ctrl + Alt + Enter shortcut. Use the Spacebar to switch to fullscreen when presenting.

Things to know

  • You can use Figma's grid and layout options to ensure different elements in your presentation are aligned properly and there is consistency between them.
  • Avoid using more than two to three fonts in your presentation but establish a clear hierarchy by changing their sizes and weights. Similarly, stick to limited colors that complement each other, keeping the purpose of the presentation in mind.
  • You can even export your Figma presentation in formats like PDF and PNG, which can be handy if you do not want to share it from Figma directly.
  • Figma lets you collaborate with others on projects, so you can easily ask others to provide feedback on your presentation, helping you improve it. You can also use the 'Comments' tool in the Tools panel to add comments for collaboration and feedback.