Canvas settings
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 top bar of the Designer, next to the various device breakpoints.
In this lesson, you’ll learn about:
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:
- 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
- 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:
- Line guide — adds vertical lines to the canvas
- 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.