Breakpoints are a way to make your design look great on Mobile, Tables or Desktops.

For example, in the following screenshot you can see the same webpage in 3 different screen sizes:

Desktop, Table, Mobile Screen Sizes
Sketch Sample File: [Download]

How To Create Breakpoints

First, design your website in multiple artboards where each of the artboards represent the same webpage but for different screen size.

To mark different screen size artboard as the same webpage:

  1. Select the artboard of one of the device screens, for example, Home Desktop
  2. Expand the Flow section of Prototype and click the Breakpoints button (marked in red below)
  3. 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

Breakpoints Interface

Creating Breakpoints