Switching between Figma and a separate mockup tool breaks focus and usually produces inconsistent exports. This guide shows how to ship any Figma frame straight into a 3D device mockup using the MochiMockup Figma plugin — without ever leaving the Figma canvas.
Updated
from Figma frame to exported mockup
— MochiMockup internal benchmark, April 2026
file downloads or uploads required
— MochiMockup Figma plugin specification
Open Figma and go to the Community tab. Search for "MochiMockup" and click Install. The plugin adds a new entry under Plugins → MochiMockup in any file.
Click the frame in your Figma file. The plugin uses the selected frame's bounds as the source image, so make sure you select the actual artboard, not a nested layer.
Open Plugins → MochiMockup. The plugin shows the device catalog filtered by aspect ratio — iPhone frames show phone mockups, laptop frames show laptop mockups, and so on.
Click any scene to preview your frame composited into a 3D device render. The preview updates in real time as you cycle through scenes, so you can A/B compare without leaving Figma.
Click "Insert into Figma" to place the rendered mockup next to your original frame as an image layer. Or click "Export" to download the PNG at 2K (free) or 4K (Pro).
Yes. The plugin is free to install from the Figma Community. It uses your MochiMockup account for rendering — the free tier exports at 2K without a subscription, and Pro exports are available at €9/month or €2 per export.
Yes. The plugin runs in both design mode and Dev Mode, so developers can preview the intended mockup without switching mode. Only users with edit access can insert the rendered image back into the file.
Yes, but aspect ratio matters. A 390 × 844 iPhone frame will map cleanly onto any phone scene in the catalog. If you want the same design on a tablet, use a 1024 × 1366 iPad frame — otherwise you'll get stretched or letterboxed output.