Real 3D device mockups, from a Figma frame to motion

Overview

A Figma plugin that turns any frame into a 3D device mockup. Designed, branded and built end to end.

Mokker places a selected frame on an iPhone, iPad or MacBook without leaving Figma. I took it from first commit to 1.0 in two weeks, and 13.2k designers have used it since. A companion web studio added lighting and motion.

Problem

Presenting a design on a device meant leaving Figma

Designers paid for mockup tools, exported to other apps, or pasted screens onto flat photos of phones. Every design change meant repeating the process.

The demand was already proven

My free iPhone mockup files on Figma Community had reached 29.2k and 4.7k users. Their comments exposed the limit of a static file: people struggled just to place a design in it, and nothing could change the angle, colour or device.

Goals and constraints

Native to Figma, free, and fully local

No extra app and no server. Every render runs on the designer's own machine, and the largest export is engineered to land exactly on Figma's 4,096 px limit for plugin images.

Picking a camera

The angle is the whole shot, so you should choose it by seeing it.

The camera picker went through three iterations in the first week.

01 · Problem

Iteration 1: presets as names

Six named cards over the same sketch. To see a shot, you had to try it. Live renders on every card came next, with the name moved into a tooltip.

02 · Exploration

Iteration 2: shots tuned to each device

Each device got its own six angles. The shots improved, but the picker changed with every device switch.

03 · Decision

Shipped: one 3 × 3 grid of the device itself

Nine positions, consistent across every device, each card a preview of the shot it produces. Select one to see the camera move.

04 · Solution

Frame in, device out, back on the canvas

Select a frame, choose a camera, and the finished shot lands in the file next to the original.

Onboarding

A six-step tour, replaced after two days

Version 2.0 introduced a guided tour. Two days later I replaced it with a short What's New, which remains the onboarding today.

Themes

Light and dark from one token system

Since 2.0 the plugin follows the system theme, with a manual switch in the help menu. Both themes are driven by one set of tokens.

Light and motion

Light and motion as a separate product

Instead of extending the plugin, I built Mokker Studio: a web app on the same camera system that adds lighting, animation and video export.

Animation rebuilt around clips

A week in, I rebuilt the animation model around clips instead of tracks.

Launched as a gated alpha

Access opened in stages: invite codes first, then open signup behind an access gate with a waitlist.

Brand

One identity across the plugin, the studio and the campaign

I named it Mokker and designed the mark within its first two weeks, then carried it into the app icon, the colours, the type and the launch campaign.

Built alone

Building it myself set the limits I designed to.

98 commits took it from first commit to 1.0 in two weeks. Compare 1.0 with the plugin today.

Outcome

13.2k designers have used it

Free on Figma Community. Every comment on its page is positive, and the requests point to the roadmap: Pixel devices, shared team presets, a tilting MacBook lid.

Reflection

What I'd take to the next product