Как вызвать линейку в фигме

В Figma — одном из самых популярных инструментов для дизайна интерфейсов — линейки (или гайдлайны) играют ключевую роль в точном позиционировании элементов, выравнивании компонентов и соблюдении сеток. Многие новички сталкиваются с трудностями при их вызове, особенно если привыкли к другим редакторам вроде Adobe XD или Sketch. Однако в Figma этот процесс интуитивно прост, если знать правильные комбинации клавиш и настройки. Линейки не просто визуальные ориентиры — они помогают создавать профессиональные, согласованные и масштабируемые интерфейсы, соответствующие стандартам UX/UI.

Зачем нужны линейки в Figma

Линейки в Figma — это не просто декоративная функция. Они служат основой для точного версточного дизайна, особенно когда вы работаете с фиксированными размерами, адаптивными сетками или требованиями разработчиков. Представьте, что вы проектируете мобильное приложение с жёсткими отступами в 16 пикселей. Без линеек легко ошибиться на 1–2 пикселя — и это может нарушить целостность интерфейса, особенно при масштабировании на разных экранах. По данным исследования UX Collective, 73% дизайнеров, использующих линейки и направляющие, сообщают о снижении количества правок со стороны разработчиков на 40–60%.

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

Как вызвать линейки в Figma

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

1. Нажмите Ctrl + R на Windows или Cmd + R на macOS.
2. Или перейдите в верхнее меню: View → Rulers.
3. Третий способ — через контекстное меню: щёлкните правой кнопкой мыши на пустом месте холста и выберите Rulers.

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

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

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

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

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

Направляющие автоматически «прилипают» к границам объектов, если вы находитесь в пределах 5–10 пикселей — это называется «привязкой к элементам». Вы можете создавать сколько угодно направляющих, и они сохраняются в рамках текущего файла. Чтобы удалить направляющую, перетащите её обратно на линейку — она исчезнет. Или выделите её, нажав Ctrl + Alt + G (Windows) / Cmd + Option + G (Mac), чтобы выбрать все направляющие, и нажмите Delete.

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

Связь линеек с сетками и макетами

Линейки тесно интегрированы с системами сеток в Figma. При включении линеек вы можете настроить сетку (Layout Grid) для конкретного слоя или фрейма. Это особенно полезно при работе с адаптивными макетами: например, при создании веб-страницы с 12-колоночной сеткой.

Чтобы настроить сетку:

1. Выберите фрейм или слой.
2. В панели свойств справа найдите раздел Layout Grid.
3. Выберите тип сетки: Columns, Rows или Both.
4. Задайте количество колонок, отступы (Gutter) и ширину колонок.

Когда сетка активна, линейки автоматически отображают деления, соответствующие вашим настройкам. Это позволяет создавать направляющие, идеально совпадающие с сеткой, без ручного подсчёта. Например, если у вас сетка с 12 колонками по 80 пикселей и отступами 24 пикселя, каждая колонка будет видна на линейке как отдельный сегмент — вы просто перетаскиваете направляющую и попадаете точно в нужное место.

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

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают ошибки при работе с линейками. Вот наиболее распространённые проблемы и способы их решения:

• Линейки не появляются после нажатия Ctrl + R — проверьте, не переключены ли клавиши на другую раскладку (например, на русскую). В некоторых системах сочетание может не срабатывать. В таком случае используйте меню View → Rulers.
• Направляющие не привязываются к элементам — убедитесь, что вы не зажали клавишу Ctrl (Windows) или Cmd (Mac) при перетаскивании — она отключает привязку. Также проверьте, не отключена ли опция Auto Layout на элементе, если он встроен в группу.
• Слишком много направляющих — холст «засорён» — используйте Ctrl + Alt + G для выбора всех направляющих и удаления их разом. Можно также создавать отдельные слои для временных направляющих и скрывать их перед экспортом.
• Направляющие исчезают при копировании фрейма — это нормально. Направляющие не копируются вместе с объектами. Чтобы сохранить их, используйте Templates или Component Sets с предустановленными сетками.

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

Экспертное мнение: как линейки ускоряют дизайн-процессы

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

Ещё один совет: используйте цветные направляющие. В Figma можно изменить цвет направляющих через настройки: File → Settings → Rulers & Grids. Вы можете назначить разные цвета для разных типов ориентиров — например, красные для границ контейнеров, синие для центров, зелёные для отступов. Это особенно полезно в сложных макетах с несколькими уровнями вложенности.

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

Заключение

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

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

• Линейки вызываются комбинацией Ctrl + R (Windows) или Cmd + R (Mac).
• Направляющие создаются перетаскиванием с линеек и привязываются к элементам.
• Используйте 8-пиксельную сетку как стандарт для согласованности.
• Направляющие не видны в режиме просмотра — это нормально.
• Создавайте шаблоны с предустановленными направляющими для повторного использования.