Web Design » Figma » How Do I Set Margins in Figma?

How Do I Set Margins in Figma?

Last updated on December 6, 2022 @ 8:14 am

There are a few different ways to set margins in Figma. You can use the Layout Grid, the Frame tool, or the Margins Plug-in.

1. Layout Grid

The Layout Grid is the most basic way to set margins. To use it, simply select the Layout Grid option from the right toolbar and click on the “+” button.

Then, click the nine dots to enter the layout grid settings. Set the size to a larger number to create wider margins on your canvas. The grid will automatically snap to the margins you set.

PRO TIP: When working with margins in Figma, it’s important to keep in mind that margins are the space between elements on a page, not the space around the edge of the page. If you want to add space around the edge of the page, you’ll need to use a frame.

2. Frame Tool

The Frame tool is a bit more versatile than the Layout Grid. With the Frame tool, you can set different margins for each side of your frame.

To do this, select the Frame tool from the upper-left toolbar and click and drag to create a frame on your canvas.

You can easily adjust your frame margin by clicking and dragging on the handles around it.

3. Margins Plug-in

The Margins Plug-in is the most precise way to set margins in Figma. To use it, click the Resources button from the upper-left toolbar and type “margins” in the search bar.

Select the “Plugins” tab and click on “Run” beside the “Margins” option from the results.

You can now adjust the margins of a specific element in your design. Just click on it and set the numbers in the Margins plug-in!


Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.