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.
- Select the frame with your design
- Activate the Rotato plugin from Plugins
- Click the "Render" button
- To use the rendered image inside Figma, click "Place on Page" or drag the preview image to your Figma canvas.
Loading...
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.
Loading...