Create a 3D mockup with Figma

Instantly wrap your Figma design in a 3D device mockup

This tutorial shows screenshots from a previous version of Rotato, so they might look slightly different on your Mac. We will be posting an updated tutorial shortly!

This tutorial requires the Rotato for Figma plugin.

Rotato can talk to Figma while running in the background. That means you can create - and use - your device mockups without leaving Figma. Here's how.

How to do it

Install the Rotato for Figma plugin and make sure Rotato 125 or newer is running in the background.

  1. Select the frame with your design
  2. Activate the Rotato plugin from Plugins
  3. Click the "Render" button
  4. To use the rendered image inside Figma, click "Place on Page" or drag the preview image to your Figma canvas.


Choosing the mockup device

When you select a frame Rotato will auto-detect the device mockup model. This happens based on the screen size. You can choose another device by using the dropdown in the plugin, or clicking inside it to search.

Customizing the mockup

You can click Adjust in Rotato to use all Rotato's features, including clay mode, shadows, device colors, and even animation.