Set breakpoints on artboards so you can have mobile and desktop designs on one artboard.

Instead of having a mobile design on one artboard and a desktop design on another you can have both on the one artboard and use breakpoints to switch between them. Pointbreak also supports vertical breakpoints. This can be useful for mobile apps. It roughly corresponds to size classes in iOS. For example in landscape orientation on iPhone (compact vertical size class), the status bar disappears and the navigation bar and toolbar get shorter.

To create a breakpoint select an artboard and click on the circle with a plus in it. You can change the breakpoint dimension by dragging it. To delete a breakpoint hover over it and click on the trashcan. To switch to another breakpoint, just click on it. Resizing the artboard, changing orientation or selecting an artboard preset will automatically switch breakpoints.

The following properties are saved for each horizontal breakpoint:

All layers

  • Origin and size
  • Visibility
  • Resizing contraint

Text layers

  • Style
  • Font size
  • Text alignment
  • Vertical alignment
  • Auto or fixed
  • Character spacing
  • Line height

Symbol instances

  • Overrides

Vertical breakpoints only save origin, size, visibility and symbol overrides. When you have both horizontal and vertical breakpoints, the horizontal breakpoint saves x and width while the vertical breakpoints saves y and height. If you are editing visibility or symbol overrides and you want to make sure the change is applied to the correct axis, make sure the breakpoint is purple first. If it's not, just click on it. When you just have horizontal breakpoints the artboard height is saved with the breakpoint as mobile artboards tend to be longer than desktop ones.

If you want to change any of the above properties but don't want it to apply to a specific breakpoint, click on the checkbox in the top left of the artboard - this disables changes being saved to a breakpoint. If you want a layer to be the same across all breakpoints but there has already been changes saved, go to  Plugins > Pointbreak > Reset Selected Layers Across Breakpoints. To disable Pointbreak for all documents go to Plugins > Pointbreak > Disable.

Keyboard Shortcuts

⌥ + , Previous horizontal breakpoint
⌥ + . Next horizontal breakpoint
⌥ + / Previous vertical breakpoint
⌥ + ' Next vertical breakpoint
⌥ + D Disable/enable breakpoints