Как в Figma измерить расстояние от объекта до другого объекта
Фигма обладает вполне стандартным набором линеек и привязок, но есть у нее и несколько полезных дополнительных функций.
Как включить линейку
Линейку можно включить из меню View > Rulers, либо сочетанием Shift + R.
Чтобы поместить линию на макет, надо перетянуть зажатую мышь с линейки в область макета. А чтобы удалить линию, надо перетянуть ее обратной в область линейки.
Видео: линейки в Figma
Как измерить расстояние между элементами
Чтобы измерить расстояние, следуйте простым инструкциям:
- Выделите первый элементы
- Зажмите alt (Windows) / Option (Mac)
- Наведите курсор на другие элементы
При этом элементы должны находиться в одном фрейме, а расстояния будут показаны как по вертикали, так и по горизонтали.
Видео: расстояния между объектами в Figma
Также прямо в процессе вы можете двигать выбранный элемент с помощью стрелок клавиатуры, чтобы наиболее точно расположить его на экране.
Расстояние X и Y
В параметрах элемента есть его значения X и Y — они показывают расстояние от левого и верхнего края фрейма. При этом если речь идет об экземпляре компонента, то все его внутренние элементы будут считать расстояние от краев фрейма элемента.
В эти поля вы можете вручную вписать значения, но, кроме того, Фигма умеет считать простые математические выражения. Вы можете задать X = 100+500, а Фигма сама посчитает финальное значение 600. Это удобно, если вы располагаете несколько элементов с не «круглыми» значениями длин и высот.
Расстояние между точками при редактировании вектора
Просмотр расстояния от точки до кривой – обновление 25/06/20
А как просто померять расстояние между двумя произвольными точками? Как в Фотошопе есть инструмент линейка. Спомощью которо можно просто провести линию и увидеть её высоту, ширину и длину. Если мне не от края элемента надо мерять? Или не до края? что, если мне надо расстояние между элементами в разных фреймах?
Насчет произвольных точек не знаю, но можно аналогичным образом измерять расстояние от края объекта до любой линейки. Кроме того, можно костыльнуть и добавить объект, например, квадрат, вписанный между этими точками, и посмотреть его размеры.
Обновление: мы недавно протестировали плагин, с помощью которого можно задавать «линейки» произвольного размера: https://svgpng.ru/figma/ravnye-rasstojanija-mezhdu-obektami/
Достаточно удобное дополнение
Тапни на нужный элемент затем зажми Alt и наведи на другой элемент
Спасибо огормное. Уже весь день проеб»лся с этим.
Не показывает расстояние между объектами через Alt, что делать?
Скорее всего проблема в том, что у вас элементы в разных фреймах. Кроме того, надо мышкой пошевелить — может и в этом дело)
А если элементы в одной фрейм, мышкой шевелю. Нажимаю на элемент, зажимаю ALT, навожу на соседние элементы и не реагирует. Нет красной полоски и цифр. Что делать?
Честно говоря трудно что-то подсказать. Элементы не пересекаются? Убедитесь, что они в одном фрейме
У меня не работает линейка, хотя я включил rulers
Как именно не работает? Проблема может быть в том, что элементы находятся в разных фремах.
интересно, я выставлю расстояние между двумя объектами с помощью auto layout на ровное значение, но если выбрать один из объектов и с помощью alt посмотреть расстояние до того второго, то показывает другое число с дробями, а если их выбрать оба, то опять ровное значение заданное с помощью auto layout? как быть программисту?
Действительно интересно, я не смог повторить это) Можно скрин или макет посмотреть?
support@svgpng.ru
Вообще разрабы обычно пользуются вкладкой Inspect, там тоже неровное значение?
отправил)
да, разрабы видят дроби и путаются) спасибо большое за ответ!
Не, ну это конечно бред, почему нельзя просто вот взять и посмотреть размеры выделенной области, в чем проблема добавить я хз, вроде разрабы не бестолковые а так огорчают
Ждём когда-нибудь в обновлении)