Change the screen on your mockup
This is the first thing most people want to do, and the most important. A mockup with the default screen is just a pretty device. A mockup with your screen is a product.
The short version
Open the scene in the editor.
Open the Mockup #1 section in the side panel.
Click Upload Image / Video and pick your file.
The mockup updates the moment your file lands. That is the whole flow.
What you can put on the screen
Two formats, four file types:
A static image (PNG or JPEG).
The simplest option. Drop in a screenshot or an exported frame and you are done.
A video (MP4 or WebM).
If you want the screen itself to move — a UI animation, a typing demo, a feature walkthrough — drop in a video file and the mockup plays it inside the device.
Pick whichever fits the story you are telling.
Video controls
When you upload a video, two extra options show up:
Loop. The video restarts the moment it ends. Keep it on for hero sections — the loop should feel endless.
Mute sound. On by default, and you almost always want it that way. Auto-playing audio on a landing page is a fast way to lose visitors.
A scrubber lets you preview the video and pick the right starting frame.
Getting the size right
Do not stress about exact dimensions. If your file is the wrong shape, the mockup auto-crops it to fit the device's screen. The fit just works.
Two things still matter:
Go big rather than small. A 2x or 3x export looks crisp on retina displays. A small file gets blurry when the device is shown large.
PNG for UI, JPEG for photos. PNG keeps sharp edges. JPEG handles photo-heavy designs more compactly.
If you want pixel-perfect framing without any cropping, take the screenshot on the actual device, or use the matching device frame in Figma.
Multi-device scenes
If your scene has more than one device — say, a phone and a tablet — each gets its own slot in the side panel: Mockup #1, Mockup #2, and so on.
Open each section, upload its own file. You can mix and match: a video on the laptop, a static image on the phone, a different image on the tablet. All in one scene.
Updating the screen later
The screen is not baked into the scene. You can swap it any time:
Open the scene.
Open the Mockup section in the side panel.
Click Upload Image / Video and drop in the new file.
Every embed of that scene picks up the change automatically. No need to copy a new code or re-paste anywhere. Update the design, the live mockup on your site updates with it.
This matters more than it sounds. Your hero shot stays current as your product changes — no broken screenshots from three versions ago haunting your landing page.
Common questions
My screen looks cropped on the edges. Why?
The mockup auto-crops files that do not match the device's aspect ratio. If you want every pixel to show, use a file with the right shape — a device screenshot or a Figma device frame.
Will the screen show in the embed exactly as in the editor?
Yes. The preview in the editor and the live embed render the same way.
Do videos slow down the page?
A short, well-compressed MP4 or WebM is fine. Long or heavy videos can be a drag on slow connections — keep loops under ten seconds and compress them.