Canvas settings

Updated

Use canvas settings to optimize your design process.

Canvas settings provide a number of options and tools to optimize your design process and improve your efficiency and precision. You can open Canvas settings by clicking the canvas size (e.g., 1699 PX) in the bottom bar of your site, next to the various device breakpoints. In Canvas settings > Advanced settings, you can also choose to position Canvas settings at the top or bottom of the canvas. 

Show empty elements

Show empty elements lets you control the visibility of empty elements (i.e., elements with no content or child elements inside) so you can view and select them on the canvas. Show empty elements is enabled by default.

To hide empty elements on the canvas, open Canvas settings and uncheck Show empty elements. When empty elements are hidden, you can still select them in the Navigator.

X-ray mode

X-ray mode is a grayscale view of your site’s canvas that outlines each element’s border, margin, and padding when the element is hovered over — giving you a clearer view of how elements are placed on the page.

To enable X-ray mode, open Canvas settings and check X-ray mode, or press Command (on Mac) or Control (on Windows) + Shift + X on your keyboard.

Rulers

Rulers help you accurately measure and align elements on the canvas. You have two options for rulers:

  1. Pinned rulers — adds a static horizontal ruler at the bottom of the canvas, which you can use as a constant reference point for horizontal measurements
  2. Pinned ruler & crosshair — adds a dynamic vertical line that intersects with the horizontal ruler, which you can move across the canvas to help horizontally and vertically align elements

To enable rulers, open Canvas settings and choose a ruler option. To disable rulers, choose No ruler. You can also press Shift + R on your keyboard to toggle rulers.

Guides

Guides (sometimes referred to as “grid overlays”) are visual alignment tools. You have two options for guides:

  1. Line guide — adds vertical lines to the canvas
  2. Filled guide — adds shaded vertical lines to the canvas

To enable guides, open Canvas settings and choose a guide option. To disable guides, choose No guide. You can also press Shift + G on your keyboard to toggle guides.

Vision preview

Vision preview lets you simulate how site visitors with visual disabilities view your site and ensure your design doesn’t communicate or indicate important information only through color. Learn more about Vision preview.

Text zoom preview

Text zoom preview lets you simulate how your designs look for site visitors using text zoom in their browser or operating system preferences. Learn more about Text zoom preview.