Focus Mode

Focus Mode allows you to “zoom in” on a single Layout. In addition to being able to view the entire Layout in an uncluttered space, Focus Mode is where you are able to preview your Layout across different breakpoints.

Entering Focus Mode

To enter Focus Mode, click on the Focus Mode icon  () image link  on the top right corner of any Layout on the Canvas.

You can also hold the Alt key (Windows) or Option key (Mac) and double-click on a Layout to enter Focus Mode.

Exiting Focus Mode

Click on the X icon in the Top Bar or on the top right corner of the Layout to exit Focus Mode.

Breakpoint Controls

When focused on a particular layout in the storyboard the breakpoint controls will appear on the top of the screen. These controls allow quickly seeing what this layout would look like at a particular breakpoint.

Previewing Breakpoints

A menu containing icons representing each of the breakpoints configured for your app can be found in the Top Bar under the Project Picker. Click on one of the devices to see the Layout resize and display the style and content changes that are enabled for that breakpoint.

You can also use the Width selector, represented by the “W” icon to the right of the breakpoints menu, to specify an arbitrary width for the Layout to be rendered.

Managing Breakpoints

Click on the three dots next to the device icons to view the list of breakpoints available for your app. You can delete and add breakpoints here, as well as changing the minimum and maximum widths for each breakpoint.