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







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

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

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

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

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

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


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

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

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

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

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

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

 

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

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

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

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

Расстояние между точками при редактировании вектора

Просмотр расстояния от точки до кривой – обновление 25/06/20

 

Помогла ли вам эта статья?

Вы уже голосовали
Комментариев: 17
  1. Mark

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

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

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

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

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

  2. Нариман

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

    1. Петя

      Спасибо огормное. Уже весь день проеб»лся с этим. :idea:

  3. Анна

    Не показывает расстояние между объектами через Alt, что делать?

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

      Скорее всего проблема в том, что у вас элементы в разных фреймах. Кроме того, надо мышкой пошевелить — может и в этом дело)

      1. Настя

        А если элементы в одной фрейм, мышкой шевелю. Нажимаю на элемент, зажимаю ALT, навожу на соседние элементы и не реагирует. Нет красной полоски и цифр. Что делать?

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

          Честно говоря трудно что-то подсказать. Элементы не пересекаются? Убедитесь, что они в одном фрейме

  4. Аноним

    ;-)

  5. ШОХ

    У меня не работает линейка, хотя я включил rulers

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

      Как именно не работает? Проблема может быть в том, что элементы находятся в разных фремах.

  6. юа

    интересно, я выставлю расстояние между двумя объектами с помощью auto layout на ровное значение, но если выбрать один из объектов и с помощью alt посмотреть расстояние до того второго, то показывает другое число с дробями, а если их выбрать оба, то опять ровное значение заданное с помощью auto layout🤔 как быть программисту?

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

      Действительно интересно, я не смог повторить это) Можно скрин или макет посмотреть?
      support@svgpng.ru

      Вообще разрабы обычно пользуются вкладкой Inspect, там тоже неровное значение?

      1. юа

        отправил)
        да, разрабы видят дроби и путаются) спасибо большое за ответ!

  7. Александр

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

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

      Ждём когда-нибудь в обновлении)

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

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