Breakpoints are a way to make your design look great on Mobile, Tablet, or Desktops.
This guide will show you how to create Breakpoints for each of the device screen shown in the image below:
Sketch Sample File: [Download]
How To Create Breakpoints in Sketch
First, design your website in multiple artboards where each of the artboards represents the same webpage but for different screen size.
To mark different screen size artboard as the same webpage:
- Select the artboard of one of the device screens, for example, Home Desktop
- Expand the Flow section of Prototype and click the Breakpoints button (marked in red below)
- Drag the yellow line to another artboard that represents the same web page but in a different device screen, for example, Table Desktop, Mobile Desktop
How To Create Breakpoints in Adobe XD and Figma
- Click Breakpoints under the Flow section
- Holding Shift, select all artboards that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
- Click Done to apply the Breakpoints
Get started with these tutorials:
- Creating a High-Fidelity Prototyping in Sketch
- How to Publish a Website and Host it With Anima
- How to Handoff Design Specs to Developers
- How to Export Sketch to HTML
- Team Collaboration
We’re super excited to have you trying it out and hearing your feedback.