How to measure distances between UI Elements in Figma

A step by step guide on observing distances between UI elements, such as text, an image, a shape or a component, or the screen in Figma.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 07/26/2023 at 18:27
Last Updated on 07/26/2023 at 21:44
<p>A flower that represents Figma with the text “Measure Distances” beneath it.</p>

A step by step guide on observing distances between UI elements, such as text, an image, a shape or a component, or the screen in Figma.

Subscribe

Step One: Select a UI Element

<p>A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. </p>

In the Figma project, select a UI element.

Step Two: Press the Option Key and Highlight an Element

<p>A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen. The text has been selected. We have pressed the option key on the keyboard and have highlighted the frame, the screen has been updated to show red lines from the frame of the text to the edges of the screen. On these red lines appear numbers which show the pixels from the edges of the frame to the edges of the screen.</p>

Press the Option Key and highlight the element you wish to measure the distance to. If you select the Frame (artboard), it will calculate the distance to the edges.

<p>A screenshot of Figma that shows you a frame with the text “HELLO” centered on the screen, below it appears “HELLO AGAIN”. The “HELLO AGAIN” text has been selected. We have pressed the option key on the keyboard and have highlighted the “HELLO” text, the screen has been updated to show a red line from the frame of “HELLO AGAIN” to the intersecting edge of “HELLO”. On this red line appears a number which shows the pixels between the edges.</p>

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
SubscribeContact UsVisit our BlogView our ServicesView our Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe