The Devices category holds device frames for screenshots and UI mockups. Each is a realistic outline of a screen you can build a design inside.
Finding them
Rest on Devices on the palette strip, or click it: the desktop frames, then the mobile ones. Tap a frame to add it, or drag it to where you want it.
What the category contains
- Browser for a desktop web page, with window dots, back, forward and reload, and an address bar.
- Monitor for a full-screen desktop layout, on a stand.
- Laptop for a portable-screen view.
- Phone for a mobile app or page.
- Tablet for a larger touch layout.
- Foldable for a book-style phone, opened out to its inner screen with the fold down the middle.
- Watch for a compact smartwatch screen.
Frames pick up the tab theme's colours when you drop them, like any other shape.
How to use a device frame
Drop a frame onto the canvas, then build your mockup inside or on top of it using shapes, text, images, and icons. The frame gives your design a true-to-life boundary so the proportions read correctly to anyone reviewing the work. Sketch a flow across several phone frames to show a journey, or pair a monitor with a phone to show a responsive layout side by side.
A device frame is an ordinary element, not a container: dragging it does not carry what you have drawn on it.
Draw a stack around your finished mockup and its device, so the screen and its contents move together when you rearrange the canvas. The stack is in the Components category.
Was this article helpful?