The standard mockup workflow — export from Figma, open a mockup tool, upload, composite, download, drag back into Figma — has too many steps. The MochiMockup Figma plugin eliminates all of them. You select a frame, pick a template, and the finished mockup lands directly on your canvas.
Installing the plugin
- 01Open Figma and go to Community → Plugins.
- 02Search for "MochiMockup" and click Install.
- 03The plugin appears in your right-click menu under Plugins → MochiMockup.
Generating your first mockup
- 01Select a frame on your canvas — this is the screenshot that will appear on the device screen.
- 02Run the plugin (right-click → Plugins → MochiMockup, or use the keyboard shortcut).
- 03Browse templates by device type: phones, laptops, tablets, watches.
- 04Click a template to preview your frame on the device.
- 05Click "Generate" — the plugin composites the mockup and inserts it as a new image on your canvas.
Browsing and filtering templates
The plugin ships with the full MochiMockup template library. You can filter by device type (phone, laptop, tablet, watch) and search by keyword. Templates show a small preview thumbnail so you can quickly scan options without generating each one.
Free vs. Pro templates
| Feature | Free | Pro |
|---|---|---|
| Template access | Free templates only | All templates |
| Export resolution | 2K | Up to 4K |
| Watermark | None | None |
| Commercial use | Yes | Yes |
Free templates are marked in the plugin grid. Pro templates require a MochiMockup account with an active subscription. You can log in directly from the plugin — no need to open a browser.
Connecting your MochiMockup account
To access Pro templates, click the login link in the plugin. This opens a browser tab where you sign in to your MochiMockup account. Once authenticated, the plugin syncs your subscription status automatically. You stay logged in across Figma sessions.
Tips for best results
- Use frames sized to the device's native resolution (e.g., 1290 × 2796 for iPhone 15 Pro Max) for pixel-perfect output.
- Hide status bars and navigation bars in your Figma frame — the mockup device already provides them.
- For multi-screen showcases, generate each mockup separately and arrange them in a Figma frame for App Store screenshot layouts.
- Use the search bar to find templates by scene type: "desk", "hand", "minimal", "outdoor".
- If your design has a dark UI, pick a light-background template for contrast (and vice versa).
Uploading custom images
Don't have a Figma frame? You can also drag and drop a PNG or JPEG directly into the plugin. This is useful when working with screenshots from other tools or when a teammate sends you a flat export.
“The plugin cut our App Store screenshot workflow from 45 minutes to under 5. We generate all 10 screenshots inside Figma now.”