delasign
delasign

How to measure distances between UI Elements 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
A flower that represents Figma with the text “Measure Distances” beneath it.

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

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

In the Figma project, select a UI element.

Step Two: Press the Option Key and Highlight an Element

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.

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.

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.

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.
delasign logo
You imagine it, we create it.

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details

We'd love to chat &
see how we can help.