The Devices tab holds device frames for wireframing and UI mockups. Each is a realistic outline of a screen you can build a design inside.
What the tab contains
- Web Browser for a desktop web page with a window chrome.
- Computer Monitor for a full-screen desktop layout.
- Laptop for a portable-screen view.
- Phone for a mobile app or page.
- Tablet for a larger touch layout.
- Smartwatch for a compact wearable screen.
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. This is especially useful for product and design 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.
Group your mockup with its device frame once it is finished, so the screen and its contents move together when you rearrange the diagram.
Was this article helpful?