For app flows, responsive websites, feature comparisons and launch visuals where a single screen cannot show the whole idea.
Multi-device mockups that tell a story across two or three screens.
A multi-device image earns its space when each screen adds something: a step in a flow, a before and after, the same task on a phone and a tablet. MockupX builds two- and three-device compositions from real screenshots in the browser. This page explains exactly what the editor can put on one canvas, which layout suits which story, how to prepare captures that look like one set, and how to build a phone, tablet and laptop set when the devices are of different types.
TWO OR THREE SCREENS
One story, several screensDuo · trio · fan · cascade
QUICK ANSWER
Start with the job, then choose the frame.
In MockupX, one canvas holds up to three devices of the same type, model and finish, each with its own screenshot, arranged with layouts such as Balanced duo, Overlapping duo, Gallery trio, Product fan, Depth stack and Editorial cascade. Give every screen a role, make one the lead, and use a wide canvas for three devices. For a phone, tablet and laptop together, export each device on a transparent PNG with matching settings and combine them in your page or slide.
Browse product & device generators →Use more than one device when the extra screens explain something: what happens next, what changed, or how the product adapts. If the screens repeat each other, one larger device communicates more.
multi device mockup generator frames you can use today
What a MockupX canvas can hold
Each canvas uses one device type (iPhone, Android, iPad, MacBook, desktop, watch, browser or frameless screenshot). The layout control has three tabs, for one, two or three devices. All devices on the canvas share the same frame and finish, and each slot has its own screenshot, so you can show three different screens in three identical iPhones, but not an iPhone beside an iPad on the same canvas.
The frameless Screenshot mode has the same two- and three-image layouts except Depth stack, which is useful for web pages and dashboards that you do not want to put in a device.
| Layout | Devices | What it does | Best for |
|---|---|---|---|
| Balanced duo | 2 | Two devices side by side at the same size | Comparison, light and dark mode, before and after |
| Staggered duo | 2 | One device raised above the other | A two-step flow with a clear reading order |
| Overlapping duo | 2 | One device partly in front of the other | A lead screen plus a supporting one |
| Gallery trio | 3 | Three devices in a row | Three equal steps or three features |
| Product fan | 3 | A center device with two angled behind it | A hero screen with two supporting screens |
| Depth stack | 3 | Devices layered front to back | Showing breadth (many screens) more than detail |
| Editorial cascade | 3 | A diagonal sequence | A flow that reads top-left to bottom-right |
Give every screen a role
Before arranging anything, write one short phrase per screen: 'search', 'result', 'booking confirmed'. If two phrases are the same, drop a screen. Two screens work best as an input and its result, such as a search screen leading to the selected item, not to an unrelated profile page. Three screens work as start, middle and outcome, or as three distinct features.
- Put the earlier step first in the reading direction: left for left-to-right languages, top in a stagger or cascade.
- Do not imply a transition the product cannot make. If the second screen is not reachable from the first, show them as separate features, not a flow.
- In a fan or overlap, the front device is the lead. Give it the screen that carries the headline's promise.
Prepare captures that look like one set
Mismatched captures are the most common reason a multi-device image looks assembled. The devices are identical, so every difference between screenshots stands out.
- Same pixel size for every capture, taken on the same device or simulator.
- Same status bar: one time, full battery and signal, no notifications. iOS Simulator and Android demo mode make this easy.
- Same account and sample data, so a name or total on screen one matches screen two.
- Same theme and text size across all screens, unless the comparison is light versus dark mode.
- Image sizing (Fit or Fill) applies to every slot, so captures of the same shape keep the set consistent.
Hierarchy, overlap and readability
Three equal devices flatten importance and shrink every screen. On a 1920 × 1080 canvas a Gallery trio of phones gives each screen well under half the canvas width, which is fine for bold app layouts and too small for dense settings screens. If one screen matters most, use Product fan or Overlapping duo and put that screen in front.
Overlap hides part of the back devices. Check what is covered: a supporting device can lose its edge, but not the element that explains why it is there. Drag individual devices on the canvas to adjust spacing, and recheck the outer margins after any tilt, because rotated devices take more room and their shadows clip easily at the canvas edge.
Smaller supporting devices disappear on busy backgrounds. Use a plain or soft gradient background and enough shadow to separate overlapping frames.
Choose the canvas by device count and orientation
The canvas shape decides how large each device can be. Portrait phones in a row need width; landscape laptops stacked need height.
| Composition | Suggested preset | Why |
|---|---|---|
| Two or three portrait phones | HD 1920 × 1080 or Presentation 1920 × 1280 | Room for a row of tall devices plus margin |
| Two phones for a feed post | Square 1080 × 1080 or Portrait 1080 × 1350 | Two phones fill a square well; three get small |
| Two phones for a story | Story 1080 × 1920 | Staggered duo uses the height |
| Two landscape iPads | Presentation 1920 × 1280 or Classic 1600 × 1200 | Taller canvases keep landscape tablets large |
| Three MacBooks or displays | HD 1920 × 1080 | Use for recognition rather than detail |
Phone, tablet and laptop: a responsive set
To show how one product adapts across screen sizes, capture the same task on each form factor: a notes app might show one note on a phone and the note list plus editor on a tablet. The larger screen should reveal a useful difference, not repeat the phone layout bigger. Do not suggest tablet support by placing a phone screenshot in a tablet frame.
Because a canvas holds one device type, build a responsive set as separate images. Use the same canvas size, background, padding and zoom for each and export them as a numbered series, or export each device on the Transparent background as PNG and arrange them together in your landing page, Figma file or slide.
When you combine them yourself, keep scale believable: a tablet should be visibly larger than a phone, and a laptop's screen larger again. Real proportions are roughly a phone at about four-fifths of a 13-inch laptop screen's height and around three-fifths of an 11-inch iPad's portrait height. Exact realism is optional in a stylized layout, but a phone that towers over a laptop reads as a mistake.
Check the whole set before you publish
Review each screen on its own and then the composition as a whole, at the size people will see it.
- Each device has a distinct role, and the reading order matches the story.
- No overlap hides the element a screen is there to show.
- Status bars, sample data and theme match across screens.
- Smaller or rear devices are still recognizable at the final display size.
- No device corner or shadow touches the canvas edge after tilting.
- Headline copy, if any, sits outside the screens and describes the sequence, not just one step.
Compose a two- or three-screen story
Decide the story first, then the layout, then the canvas.
- Write one phrase per screen, drop duplicates, and capture each screen at the same size with matching status bar and data.
- Open the editor, choose the device type and frame, then pick a two- or three-device layout that fits the story.
- Drop a screenshot into each slot, choose a canvas wide or tall enough, and drag devices to protect the important parts of each screen.
- Sign in, export, and make the other device types as separate images with matching settings if you need a responsive set.
multi device mockup generator FAQ
Can I put a phone, tablet and laptop in one MockupX image?
Not on one canvas; each canvas uses one device type. Export each device separately, on a transparent PNG if you want to combine them, with the same background and canvas settings, and arrange them in your page or slide.
How many devices can one canvas hold?
Up to three, all of the same model and finish, each with its own screenshot.
Can each device show a different screenshot?
Yes. Every slot takes its own image, and they usually should differ: steps in a flow, a before and after, or separate features.
How do I stop the back devices from disappearing?
Use a simpler background, add shadow, raise zoom slightly, and drag devices apart so the back screens show their key element. Check at the final display size.
Which layout should I use for a two-step flow?
Staggered duo or Balanced duo, with the earlier step on the left or higher. Overlapping duo suits a lead screen with a supporting one.
Is the multi-device mockup free?
You can design without an account. Exporting requires signing in; free exports are PNG or JPEG with a MockupX watermark, and MockupX Pro removes it and adds WebP and 2× export.