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
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. A wireframe page and a logo page leave the category out (a wireframe is its device already), but the frames still work there: search for one by name in the editor's search panel and add it from 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. The palette strip leaves frames out,
so press F or add one from the search panel.
Was this article helpful?