Screen artboards, breakpoints and variants

Learn how screen artboards, breakpoints, and screen variants work together to create responsive page layouts and how to apply best practices when defining them.

Screen artboards

When editing pages, screen artboards appear in the main canvas. These usually correspond to the breakpoints defined in the project.

You can add a new screen artboard from the canvas. It is recommended to create a matching screen artboard for each breakpoint.

Breakpoints and variants

Breakpoints are a special global variant group called Screen.

Unlike normal variants, screen variants are activated automatically based on browser window size and are always cumulative.

Best practices

Here are a few best practices:

• Use responsive columns for common layout shifts between larger and smaller screens.
• Limit breakpoint-specific changes to style overrides.
• Create screen artboards that match your defined breakpoints.
• Choose a responsive strategy for the project, such as desktop-first or mobile-first, when defining breakpoints.