Use Guidelines for Pixel Perfect Alignment

2 Minute read

Reading Time: 2 minute

You can use Guides in the Studio to line up elements on the Canvas or to create guide templates that can be used across multiple pages and experiences. To create a guide, simply drag your cursor from the top or left-hand ruler bar onto your canvas. While dragging, you’ll notice numbers that indicate your pixel placement on the canvas for more accurate alignment. Release your click when you are happy with the guides’ alignment.

To move it again, double-click on the guide in the ruler bar to enter “Guide Mode”. Once in Guide Mode, you can double click on a guide to enter a specific X or Y coordinate for that guide.

In Guide Mode, you can also select multiple guides without having to worry about selecting other objects on the canvas. To select guides simply drag your cursor over the guides you wish to manipulate, or hold down shift and click multiple guides, or hold CMD (CTRL on PC) to select the guides you would like to manipulate individually.

Additionally, you can also copy and paste guides to different pages and across experiences while in guide mode. This is a great feature if you have similar layouts for multiple pages and want to ensure your experience stays uniform.

You’ll also notice guides appearing as you arrange objects on the canvas. These guides will help you snap objects to the center of your canvas and to each other. Using these guides you can easily snap objects to the center points on the canvas or to the midpoints or edges of other assets. Additionally, if you select an object and hold down the ‘OPT’ key on Mac or the ‘CTRL’ key on Windows, you will be able to see the exact distance that object is from surrounding assets or the edges of the canvas.

To delete a guide that you’ve placed on the canvas, simply double-click on the guide to enter guide mode and either hit the delete key or drag it off the side of the canvas.

Was this helpful?

You already voted!
9 out of 16 people found this helpful