How to measure the distance from one object to another object in Figma
Figma has a rather standard set of rulers and bindings, but it also has some useful additional functions.
How to enable the ruler
The ruler can be enabled from the menu View > Rulers, or by the Shift + R key combination.
In order to put a line on the layout, drag the clamped mouse from the ruler to the layout area. And in order to delete the line, drag it back to the ruler area.
Video: rulers in Figma
How to measure the distance between items
In order to measure the distance, follow simple instructions:
- Select the first item
- Hold alt (Windows) / Option (Mac)
- Point to other items
At the same time, the items must be located in the same frame, and the distance will be shown both vertically and horizontally.
Video: the distance between objects in Figma
Moreover, at the same time, you can move the selected item using arrow keys to position it most accurately on the screen.
X and Y distance
The item parameters include its X and Y values – they specify the distance from the left and top edges of the frame. Moreover, if we deal with a component instance, all its internal elements will determine the distance from the edges of the item frame.
You can enter values in these fields manually, but Figma can also read simple mathematical expressions. You can set X = 100+500, and Figma will calculate the final value of 600. This is convenient if you position several items with “non-round” values of length and height.