Breakpoints

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 three different screen sizes:

Desktop, Table, Mobile Screen Sizes

How to Create Breakpoints

First, design your website in multiple artboards where each of the artboards represents the same webpage but for different screen size, for example, Home Desktop, Home Tablet, Home Mobile.

To mark different screen size artboard as the same webpage:

  1. Click Breakpoints under the Flow section
  2. Holding Shift, select all artboards that you want to connect with breakpoints, for example, Home Desktop, Home Tablet, Home Mobile
  3. Click Done to apply the Breakpoints

Breakpoints Interface

To Edit Breakpoints:

  1. Select any artboard that has the breakpoint you want to edit
  2. Uncheck the box next to the breakpoint you want to edit
  3. If you want to replace it with a different breakpoint, select all artboards that you want to connect with breakpoints again
  4. Click Done to apply the Breakpoints