The Devices category holds device frames for wireframing and UI mockups. Each is a realistic outline of a screen you can build a design inside.
Finding them
No mode's palette strip shows the Devices category, but the frames work in every mode: search for one by name ("phone", "browser") in the Search at the end of the palette strip (Toolbar Layout), or in the editor's Search panel under Add to canvas.
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 frame around your finished mockup and its device, so the screen and its contents move together when you rearrange the canvas.
Was this article helpful?