Add guides to the canvas or frames
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Before you Start
Who can use this feature
Available on any plan
Anyone with can edit access to a file can create and edit guides
Guides are helpful when you're trying to precisely position layers or objects in your designs.
Enable rulers
Before you can add guides to your file, you must enable rulers on the canvas.
- Open the Main menu.
- Hover over View and select Rulers.
Create a new guide
To create a new guide, click and drag on the horizontal or vertical ruler to pull the guide onto the canvas.
You can also create a new guide from an existing guide by holding Option (Mac) or Alt (Windows), then clicking and dragging from an existing guide.
Figma has both canvas and frame level guides for positioning and aligning objects in your designs.
The dotted line acts as visual indicator that your guide is intersecting with a frame on the canvas.
View distances (redlines)
With a top-level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between the guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame.
When a frame is selected, the rulers are highlighted in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you'll see the same blue highlights for the selected object.
Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame.
Remove guides
To remove a guide, you can do any of the following:
- Click and drag the guide back to the rulers
- Select the guide and press delete
- Right-click on the guide and select Remove guide
Before you Start
Who can use this feature
Users on Any Plan
Users with Edit access to a File can create and edit Guides.
Users with View access to a File can toggle Rulers on and off to show/hide Guides.
Looking for more? Check out our blog post about Guides...
Guides are helpful when you're trying to precisely position layers or objects in your designs. They can be added to Frames to create useful templates to align content that might be changing.
Add guides
Toggle rulers
In order to use guides, you will first need to enable rulers on the canvas.
- Click on to open the main menu.
- Go to View > Rulers.
You can also enable rulers by using the keyboard shortcut Shift + R, or by using the quick actions bar.
Create a new guide
Once you've enabled rulers, click and drag on the horizontal and vertical rulers to pull guides onto your canvas.
You can also create a new guide from an existing guide by holding Option (Mac) or Alt (Windows), then clicking and dragging from an existing guide.
Figma has both canvas and frame level guides for positioning and aligning objects in your designs.
The dotted line acts as visual indicator that your guide is intersecting with a frame on the canvas.
View distances (redlines)
With a top level frame selected, hold Option (macOS) or Control (Windows) as you click and drag out a guide. You will see the distance (in pixels) between the guide and the frame. This distance is also reflected in the ruler. When the guide intersects your frame it will begin measuring distances between the guide and objects in the frame.
In addition, with a frame selected the rulers highlight in blue, calling attention to the coordinates of the frame on your canvas. When you select objects in the frame, you'll see the same blue highlights for the selected object.
Guides inside frames are recognized as another object in the frame. This means you can view redline distances between the guide itself and other elements in the frame, as well as the parent frame.
Remove guides
To remove guides from the canvas, you can do any of the following:
- Click and drag the guide back to the rulers
- Select a guide, then press delete
- Right-click on either the vertical or horizontal ruler, then select Remove all vertical guides or Remove all horizontal guides
- Right-click a guide, then select Remove guide