iPhone X Mockup for Sketch
Last Updated on July 16, 2026 by Editorial Team
A simple iPhone X mockup for Sketch App, created by Greg Dlubacz. It comes in three colors (white, dark, blue) and is ideal for diagrams, wireframes or minimalistic presentations.
Hope you enjoy!
What makes this iPhone X mockup worth keeping in your toolkit is the linework itself: it is drawn as a clean outline rather than a rendered, photorealistic shell.
You can see that in the preview, where the device outline is traced with thin, precise strokes rather than shaded to look like glass and metal.
That outline treatment is exactly why it reads so well as a diagram or wireframe device, since it stays out of the way of whatever screen content you drop into it.
The three color variants shown, white, dark, and blue, are really just background treatments behind the same outline shape, which means the device itself stays neutral while the surrounding panel sets the mood.
That flexibility is worth noticing because it lets you match the mockup to a slide deck, a case study page, or a product page without redrawing anything.
Where This Mockup Works Best
Because the phone is rendered as an outline rather than a photo-real shell, it suits contexts where you want the viewer focused on the interface, not on the device.
Think app walkthroughs, feature diagrams, onboarding flow illustrations, and pitch decks where several phones need to sit side by side without competing for attention.
It also holds up well in minimalistic presentations and portfolio case studies, where a heavier, photorealistic mockup would feel out of step with a flat, geometric layout.
- UX flow diagrams showing screen-to-screen navigation
- Wireframe presentations for stakeholders or clients
- App landing pages with a flat, illustrative design language
- Pitch deck slides that need several device frames at once
If your project calls for a mockup that looks like an actual photographed phone, with reflections and shadow depth, this is not that tool.
Its value is in the opposite direction: simplicity, speed, and consistency across many screens.
Working With the Sketch File
Since this comes as a Sketch file, the outline and the screen area are set up as separate, easy-to-target layers or artboards you can drop your own UI into.
Place your app screen or website capture inside the screen boundary, resize it to fit the frame edges, and let the outline sit on top so the bezel lines stay crisp.
If you want to switch between the white, dark, and blue backgrounds, duplicate the version you need onto its own artboard rather than editing colors on the original, so you always have a clean copy to fall back on.
Because the strokes are vector, you can recolor them to match a brand palette, though keeping them close to the original grayscale or blue tones preserves the technical, blueprint-like feel that makes this mockup distinctive.
When you export, keep the background transparent or matched to your slide or page color so the diagonal panel does not fight with the rest of your layout.
Pair it with simple sans-serif labels, arrows, or annotation lines if you are building a flow diagram, since the mockup’s restrained style leaves plenty of room for that kind of overlay without feeling cluttered.
