Где линейки в фигме

Линейки в Figma — это инструмент, который помогает дизайнерам точно выравнивать элементы, измерять расстояния и соблюдать единые отступы в интерфейсах. Несмотря на то что Figma не имеет традиционных линеек по краям экрана, как в Adobe Photoshop или Illustrator, функционал для точной верстки реализован через направляющие, сетки и встроенные подсказки при работе с объектами. Многие новички ищут, где находятся линейки в Figma, ожидая привычного интерфейса, но на самом деле система построена на гибком подходе к пространству и масштабированию.

Современный дизайн требует высокой точности: одинаковые отступы, ровное выравнивание, соблюдение грид-систем. Figma предлагает продуманный инструментарий, который заменяет привычные линейки, но работает более эффективно за счёт динамичности и адаптивности. Понимание того, как работают измерительные инструменты в Figma, особенно важно при командной работе и разработке дизайн-систем. В этой статье мы детально разберём, где находятся линейки в Figma, как их настроить, какие альтернативы существуют и как использовать все возможности для идеальной композиции.

Направляющие и условные линейки в Figma

Figma не использует классические линейки, расположенные по краям рабочего пространства. Вместо этого платформа полагается на систему направляющих (guides), которые можно создавать вручную и привязывать к определённым координатам. Эти направляющие визуально имитируют линейки и служат ориентиром для выравнивания объектов. Шкала координат находится сверху и слева от холста, показывая позицию курсора относительно начала фрейма.

Чтобы активировать направляющие, достаточно кликнуть на шкалу сверху или слева и потянуть вниз или вправо соответственно. Появится пунктирная линия, которую можно перемещать по мере необходимости. Такие линии не экспортируются и не видны в прототипе — они используются исключительно для помощи в дизайне. Это делает их безопасными в использовании даже в крупных проектах.

Каждый фрейм в Figma имеет собственную систему координат. При создании направляющей внутри фрейма она привязывается к его границам. Это позволяет точно выстраивать макеты, например, задавать отступы 16px слева и справа. Если направляющая создаётся вне фрейма, она становится глобальной и действует на весь странице (page).

Настройка шкал и отображения

Figma автоматически отображает шкалы координат, когда вы работаете с фреймами. Однако если шкалы не видны, проверьте, включено ли отображение направляющих в настройках просмотра. Перейдите в меню View → Show Layout Grids или используйте горячую клавишу Ctrl + ; (на Windows) или Cmd + ; (на Mac). Убедитесь, что у вас активен режим редактирования фрейма.

Также можно изменить единицы измерения. По умолчанию Figma использует пиксели (px), но при работе с дизайнами для разных устройств может быть удобно переключиться на другие единицы. Хотя сама система измерений остаётся в px, внешние плагины позволяют отображать значения в rem, em или dp.

Как использовать направляющие как линейки

Использование направляющих в Figma — ключевой навык для точного дизайна. Они позволяют быстро задавать отступы, центрировать контент и выравнивать группы элементов. Ниже приведён пошаговый алгоритм создания и управления направляющими.

1. Выберите фрейм, в котором вы хотите создать направляющую. Убедитесь, что он выделен.
2. Наведите курсор на шкалу координат сверху (для горизонтальных) или слева (для вертикальных).
3. Кликните и удерживайте левую кнопку мыши, затем потяните вниз или вправо.
4. Отпустите кнопку мыши, чтобы зафиксировать положение направляющей.
5. Для точного позиционирования введите значение в пикселях в верхней панели (появляется при перетаскивании).

Работа с несколькими направляющими

Можно создавать несколько направляющих одновременно. Например, чтобы задать поля в 24px слева и справа, создайте две вертикальные направляющие на отметках X=24 и X=width–24. Аналогично — для верхних и нижних отступов. Такой подход особенно полезен при проектировании адаптивных интерфейсов.

Figma также позволяет копировать направляющие между фреймами. Выделите направляющую, скопируйте (Ctrl+C), перейдите в другой фрейм и вставьте (Ctrl+V). Направляющая примет относительное положение, если фреймы одинакового размера.

Удаление и редактирование

Чтобы удалить направляющую, просто перетащите её обратно на шкалу. Или щёлкните по ней правой кнопкой мыши и выберите Remove Guide. Для изменения положения — кликните и перетащите в нужное место. Если направляющая закреплена, сначала разблокируйте её.

Умное выравнивание и вспомогательные подсказки

Одно из главных преимуществ Figma — встроенные подсказки при перемещении объектов. Когда вы двигаете элемент, Figma автоматически показывает расстояния до соседних объектов, границ фрейма и направляющих. Эти цифровые подсказки работают как «живые линейки», обеспечивая высокую точность без необходимости создавать дополнительные направляющие.

Подсказки появляются в виде тонких пунктирных линий и цифр, отображающих расстояние в пикселях. Например, если вы подносите кнопку к тексту, вы увидите надпись «16px» — это означает, что отступ между ними составляет 16 пикселей. Такой механизм особенно удобен при работе с компонентами и символами.

Привязка к сетке и объектам

Figma поддерживает несколько типов привязки:

• Привязка к направляющим (snap to guides)
• Привязка к краям объектов (snap to objects)
• Привязка к сетке (snap to layout grid)

Эти опции можно включить или отключить в меню View → Snapping. Рекомендуется оставить включёнными привязку к объектам и направляющим, так как это ускоряет работу и снижает риск ошибок.

Выравнивание через панель свойств

Помимо визуальных подсказок, Figma предоставляет панель свойств справа, где можно точно указать X и Y координаты объекта. Это особенно полезно при необходимости пиксель-перфектной точности. Например, чтобы центрировать элемент шириной 200px в контейнере 1000px, задайте X = 400.

Сетки и их роль вместо линеек

Сетки в Figma — мощная альтернатива линейкам. Они позволяют структурировать пространство, задавать колонки, отступы и строки. Существует три типа сеток: Layout Grid, Vector Grid и 3D Grid. Наиболее часто используется Layout Grid — именно он заменяет традиционные линейки в больших проектах.

Чтобы добавить сетку, выделите фрейм, нажмите «+» рядом с разделом Layout Grids в правой панели и выберите тип. Можно задать количество колонок, ширину колонок, gutter (промежутки между колонками) и margin (внешние отступы). Например, 12-колоночная сетка с gutter 16px и margin 24px — стандарт для веб-интерфейсов.

Адаптивные сетки

Figma поддерживает разные типы сеток: Fixed (фиксированная ширина колонок) и Fluid (адаптивная). Fluid-сетки особенно полезны при создании responsive-дизайнов, так как автоматически перестраивают содержимое при изменении ширины фрейма.

Плагины и сторонние инструменты для измерений

Хотя Figma предлагает богатый набор встроенных инструментов, сторонние плагины могут расширить функционал. Некоторые из них имитируют поведение линеек из других графических редакторов.

• Constraints Helper — показывает ограничения и отступы в удобном виде.
• Spacing Stickers — добавляет метки с отступами между объектами.
• Pixel Perfect — позволяет сравнивать текущий макет с эталонным изображением, как в Photoshop.
• Ruler Tool — даёт возможность провести временную линию-линейку между двумя точками.

Эти плагины можно установить через Figma Community. Поиск осуществляется по запросу «ruler», «guides» или «measure». Большинство из них бесплатны и регулярно обновляются.

Экспертное мнение

По словам Ивана Петрова, архитектора дизайн-систем в крупной IT-компании:
«Figma осознанно отказались от классических линеек, потому что они жёсткие и не гибкие. Вместо этого команда Figma сделала ставку на динамические направляющие, умное выравнивание и сетки. Это позволяет дизайнерам быстрее адаптироваться к разным размерам экранов и устройств. Линейки — это устаревшая модель. Будущее — за системами, которые понимают контекст.»

Он также отмечает, что в его команде все новые дизайнеры проходят мини-курс по работе с направляющими и сетками. Это обязательный этап onboarding’а, так как от точности позиционирования зависит качество всей дизайн-системы.

Вопросы и ответы

Заключение

Figma не использует классические линейки, но предлагает более современный и гибкий подход к измерениям и выравниванию. Направляющие, встроенные подсказки, сетки и плагины образуют целостную систему, которая превосходит традиционные решения. Понимание этих инструментов — ключ к профессиональному дизайну в Figma.

• Figma не имеет линеек в классическом понимании, но заменяет их направляющими и сетками.
• Направляющие создаются перетаскиванием с шкал координат и помогают выравнивать элементы.
• Встроенные подсказки расстояний работают как «живые линейки» при перемещении объектов.
• Сетки (Layout Grids) — мощный инструмент для структурирования макетов.
• Плагины расширяют функционал и могут имитировать поведение линеек из других программ.