Create a 3D mockup with Figma
Instantly wrap your Figma design in a 3D device mockup
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.
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.