Adding guide lines in Figma is a simple process that helps you align elements accurately on your canvas. You can quickly add guides by interacting with the rulers in your design file.
Here's how to add guide lines in Figma:
Adding Guides from Rulers
Before you can add guides, you need to ensure that rulers are visible in your Figma file. If they are not visible, you can enable them by going to View > Rulers (or using the shortcut Shift + R).
Once you've enabled rulers:
- Click and drag on the horizontal ruler (located at the top of the canvas) to pull a horizontal guide line onto your canvas.
- Click and drag on the vertical ruler (located on the left side of the canvas) to pull a vertical guide line onto your canvas.
Simply drag the guide to the desired position on your canvas and release your mouse button.
Creating New Guides from Existing Guides
You can also efficiently duplicate existing guides to quickly add more parallel guides:
- Hold down the Option key (on Mac) or the Alt key (on Windows).
- While holding the key, click and drag from an existing guide line.
- This will create a new guide that you can position anywhere on the canvas.
This method is particularly useful for setting up grids or consistent spacing.
Managing Guide Lines
Guide lines are helpful for alignment but aren't visible in exported assets. You can easily move them, remove them, or hide them temporarily:
- To move a guide: Click and drag it along the canvas.
- To remove a guide: Drag it back onto the ruler it came from.
- To hide/show all guides: Go to View > Guides > Hide Guides (or use the shortcut Shift + R again, as the rulers toggle also affects guides).
- To lock/unlock guides: Go to View > Guides > Lock Guides to prevent accidentally moving them.
Using guide lines is a fundamental technique in Figma for maintaining precision and consistency in your designs.