Как сделать в фигме линейку

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

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

Что такое линейка в Figma и зачем она нужна

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

Основная цель линейки — обеспечить точность. При проектировании интерфейсов важно соблюдать единые отступы, высоту строк, ширину колонок и другие параметры. Линейки позволяют быстро оценить расстояние между объектами, проверить выравнивание и избежать «на глаз» решений, которые могут привести к несогласованности в дизайне.

Линейки особенно полезны при работе с адаптивными макетами, где нужно контролировать поведение элементов на разных экранах. Они помогают выдерживать грид-систему, например, 8-пиксельную сетку, которая широко используется в современном UI-дизайне. Благодаря этому дизайн остаётся структурированным и легко передаётся разработчикам.

Как создать линейку в Figma: пошаговая инструкция

Создание линейки в Figma — простая операция, доступная за несколько кликов. Вот как это сделать:

1. Откройте проект в Figma и перейдите на страницу, где нужно использовать линейку.
2. Наведите курсор на край холста: верхний (для горизонтальной линейки) или левый (для вертикальной).
3. Когда курсор изменится на двунаправленную стрелку, нажмите левую кнопку мыши и потяните внутрь холста.
4. Отпустите кнопку — линейка появится и будет закреплена на этом месте.
5. Повторите шаги для второй оси, если нужно использовать обе линейки.

После появления линейки вы увидите числовые отметки, соответствующие пикселям (по умолчанию). Эти значения отсчитываются от края страницы. Вы можете перемещать начало отсчёта, перетаскивая нулевую точку — например, чтобы привязать линейку к границе карточки или контейнера.

Если вы случайно убрали линейку, просто повторите процесс. Также можно временно скрыть линейки через меню View → Show Rulers (или сочетание клавиш Ctrl+R / Cmd+R).

Шаги для быстрого включения линеек

• Используйте горячие клавиши: Ctrl+R (Windows) или Cmd+R (Mac), чтобы показать или скрыть линейки.
• Убедитесь, что вы находитесь на холсте, а не внутри фрейма с отключёнными линейками.
• Перетащите из края, если линейки не появились после нажатия клавиш.

Типичные ошибки новичков

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

Настройка линеек: масштаб, единицы измерения и привязка

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

По умолчанию линейки отображаются в пикселях (px), что удобно для цифрового дизайна. Однако при работе с печатными материалами или импортёром из других программ может потребоваться смена единиц. На данный момент Figma не поддерживает миллиметры или дюймы в линейках напрямую, но вы можете использовать плагины или вручную пересчитывать значения.

Масштаб линеек зависит от масштаба холста. Если вы увеличиваете макет до 200%, линейка тоже масштабируется, сохраняя точность измерений. Это особенно полезно при детальной проработке интерфейса.

Привязка к линейкам работает автоматически, если включена опция Smart Guides (умные направляющие). Когда вы двигаете объект, Figma показывает временные направляющие, выравнивая его относительно других элементов и линеек. Это упрощает создание симметричных композиций.

Линейки vs направляющие: в чём разница и как использовать вместе

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

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

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

• Линейки — всегда присутствуют в интерфейсе, но скрыты по умолчанию.
• Направляющие — создаются вручную и остаются на холсте до удаления.
• Линейки не видны при экспорте, направляющие тоже, если не включены в настройках просмотра.
• Оба инструмента работают с привязкой (snap), если она включена в настройках.

Лучшие практики использования линеек в дизайне

Чтобы линейки действительно помогали, а не мешали, следуйте проверенным методикам:

• Всегда включайте линейки при старте нового проекта — это формирует правильный подход с самого начала.
• Используйте их для проверки отступов между компонентами, особенно в списках, карточках и формах.
• Перетаскивайте ноль линейки к началу рабочей области — например, к левому краю контентной зоны.
• Комбинируйте с направляющими: сначала измерьте расстояние линейкой, затем зафиксируйте его направляющей.
• Отключайте линейки при презентации макетов клиентам, чтобы не перегружать интерфейс.

Для командной работы рекомендуется задокументировать, как используются линейки и направляющие. Это может быть частью дизайн-системы — например, раздел «Работа с сеткой». Так все участники будут использовать одинаковый подход.

Пример использования в реальном проекте

Представьте, что вы проектируете мобильное приложение. Ширина экрана — 375 px. Вы хотите, чтобы контент был с отступами по 16 px слева и справа. С помощью линейки вы перетаскиваете ноль к левому краю, затем отмечаете 16 px и 359 px (375 – 16). Из этих точек создаёте направляющие. Теперь любой элемент, попадающий между ними, будет правильно выровнен.

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

Мы поговорили с Еленой Мироновой, старшим UX-дизайнером в IT-компании, имеющей более 10 лет опыта в проектировании интерфейсов.

Она также отметила, что молодые дизайнеры часто игнорируют базовые инструменты, стремясь сразу использовать сложные функции вроде Auto Layout или плагинов. «Но сначала нужно освоить основы. Линейки, направляющие, привязка — вот фундамент. Остальное строится сверху.»

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

Заключение

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

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