Как в Figma измерить расстояние от объекта до другого объекта


Фигма обладает вполне стандартным набором линеек и привязок, но есть у нее и несколько полезных дополнительных функций.

Как включить линейку 

Линейку можно включить из меню View > Rulers, либо сочетанием Shift + R. 

Включить линейки в Figma
Включение линеек из меню

Чтобы поместить линию на макет, надо перетянуть зажатую мышь с линейки в область макета. А чтобы удалить линию, надо перетянуть ее обратной в область линейки. 

Видео: линейки в Figma

Как измерить расстояние между элементами

Чтобы измерить расстояние, следуйте простым инструкциям:

  1. Выделите первый элементы
  2. Зажмите alt (Windows) / Option (Mac)
  3. Наведите курсор на другие элементы

При этом элементы должны находиться в одном фрейме, а расстояния будут показаны как по вертикали, так и по горизонтали. 

Видео: расстояния между объектами в Figma

Также прямо в процессе вы можете двигать выбранный элемент с помощью стрелок клавиатуры, чтобы наиболее точно расположить его на экране. 

 

Расстояние X и Y

В параметрах элемента есть его значения X и Y — они показывают расстояние от левого и верхнего края фрейма. При этом если речь идет об экземпляре компонента, то все его внутренние элементы будут считать расстояние от краев фрейма элемента. 

Расположение элемента в Figma

В эти поля вы можете вручную вписать значения, но, кроме того, Фигма умеет считать простые математические выражения. Вы можете задать X = 100+500,  а Фигма сама посчитает финальное значение 600. Это удобно, если вы располагаете несколько элементов с не «круглыми» значениями длин и высот. 


Комментариев: 4
  1. Mark

    А как просто померять расстояние между двумя произвольными точками? Как в Фотошопе есть инструмент линейка. Спомощью которо можно просто провести линию и увидеть её высоту, ширину и длину. Если мне не от края элемента надо мерять? Или не до края? что, если мне надо расстояние между элементами в разных фреймах?

    1. SVGPNG.RU (автор)

      Насчет произвольных точек не знаю, но можно аналогичным образом измерять расстояние от края объекта до любой линейки. Кроме того, можно костыльнуть и добавить объект, например, квадрат, вписанный между этими точками, и посмотреть его размеры.

    2. SVGPNG.RU (автор)

      Обновление: мы недавно протестировали плагин, с помощью которого можно задавать «линейки» произвольного размера: https://svgpng.ru/figma/ravnye-rasstojanija-mezhdu-obektami/
      Достаточно удобное дополнение

  2. Нариман

    Тапни на нужный элемент затем зажми Alt и наведи на другой элемент

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<