How to create 3D mockups without leaving Figma

This tutorial requires the Rotato for Figma plugin.

If you're designing in Figma and looking to turn your work into stunning 3D mockups, there's great news: you don’t need to export your designs or switch tools.

Our product, Rotato, can transform static designs into beautiful animated mockups, which are great for presentations, portfolios, and marketing. And thanks to the Rotato Figma plugin, you can skip the export step entirely. Just open the plugin and create photorealistic mockups right inside your Figma file—in seconds.

How to create 3D mockups inside Figma

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

1. Select a frame with your Figma 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. Video tutorial below.

And that’s it. In just a few clicks, you’ll get a high-fidelity mockup of your work, ready for showcase.

Choosing the right mockup device

When you select a frame to create a mockup, Rotato will auto-detect the device mockup model based on the screen size.

However, it also allows you to freely pick the device type to fit your needs. Whether you're designing a mobile app, a landing page, or a product UI, you can choose from phones, tablets, and various other device mockups. On the selection screen of the Rotato plugin, there’s a dropdown for you to check the various types of devices.

And yes, each mockup will come with realistic lighting, angles, and perspective—automatically applied—to ensure that your design looks polished, out of the box.

Customizing the mockup

Once your mockup is rendered in Figma, you're not locked in. Just click Adjust in Rotato to use all Rotato's features, including clay mode, shadows, device colors, and even animation.

This workflow gives you the best of both worlds: speed and simplicity in Figma, and advanced customization in Rotato’s desktop app.

What is Rotato?

Rotato is a 3D mockup and presentation tool for designers, developers, and marketers. We aim to simplify design work by helping you to turn your designs into beautiful mockups and videos, without needing expensive software such as After Effects or 3D skills.

Launched initially as a Mac-only app, Rotato now integrates directly with Figma, making it even easier for our users to go from frames to mockups within seconds. Not only that, we’re also expanding our toolsuite, and also have a range of online tools for you to edit your videos as well. Whether you need to compress, crop, or loop a video, check them all out here.

When to use Figma mockups

It’s very easy nowadays to share a Figma link to a design or prototype.

But sometimes, that's not enough. Seeing your product inside a realistic device frame can make a big difference. That’s where a 3D mockup becomes more than just a visual; it becomes a powerful way to tell the story of your design. Here are a few situations where the Rotato plugin can really shine:

• Presentations: Show stakeholders exactly how a feature will look in context, e.g., an app inside a mobile device.
• Portfolios: Make your work stand out with polished, professional visuals.
• App Store assets: Create production-ready phone mockups for your ASO efforts.
• Social media: Share previews of your product with minimal editing needed, for marketing teams.

And much, much more. Check out the Features page for more info on our product, and have fun creating mockups.