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

В Figma линейка — это вспомогательный инструмент для точного позиционирования объектов на холсте. Чтобы поставить линейку, нужно активировать режим просмотра направляющих через сочетание клавиш Ctrl+R (Cmd+R на Mac) или через меню View → Show Rulers. Линейки появятся сверху и слева от рабочего пространства, а из них можно протягивать направляющие для выравнивания элементов.

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

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

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

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

Для включения линеек есть три способа:

• Нажать комбинацию клавиш Ctrl+R (на Windows) или Cmd+R (на Mac).
• Перейти в меню View → Show Rulers.
• Кликнуть правой кнопкой мыши по холсту и выбрать пункт «Show Rulers» в контекстном меню.

После активации вы увидите две линейки: горизонтальную (вдоль верхнего края) и вертикальную (слева). Они масштабируются вместе с увеличением/уменьшением масштаба холста, что позволяет точно определять положение элементов даже при зуме 200% или выше.

Если линейки не появляются, проверьте следующее:

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

Настройка единиц измерения

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

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

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

Чтобы создать направляющую:

1. Убедитесь, что линейки включены (Ctrl+R / Cmd+R).
2. Наведите курсор на горизонтальную линейку (сверху) и потяните вниз — появится горизонтальная направляющая.
3. Или потяните с вертикальной линейки (слева) вправо — получится вертикальная направляющая.
4. Отпустите, когда направляющая окажется в нужном месте.

Направляющие прилипают к объектам при перетаскивании, если включена опция «Smart Selection» и «Snap to Geometry». Это позволяет быстро выравнивать текст, кнопки и другие элементы.

Вы можете:

• Перемещать направляющие, перетаскивая их за линию.
• Удалять — кликнуть по направляющей и нажать Delete.
• Блокировать — кликнуть правой кнопкой и выбрать «Lock Guide», чтобы случайно не сдвинуть.
• Создавать несколько направляющих для построения сетки или колонок.

Точное позиционирование направляющих

Если вам нужно установить направляющую точно на 16px, 48px или другое значение, просто потяните её и следите за всплывающей подсказкой с координатами. Figma покажет текущее положение в пикселях относительно начала фрейма.

Также можно использовать плагины, такие как »Guide Guide», чтобы автоматически создавать направляющие по заданным параметрам:

• Отступы от краёв (например, 24px слева и справа).
• Колонки (12-колоночная сетка с шириной колонки 80px).
• Гutter (промежутки между колонками).

Это особенно полезно при создании адаптивных макетов или дизайн-систем.

Линейки и сетки: в чём разница?

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

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

Распространённые ошибки и как их избежать

Даже опытные дизайнеры иногда допускают ошибки при работе с линейками и направляющими. Ниже — самые частые проблемы и способы их решения.

• Линейки не отображаются. Проверьте, включены ли они через Ctrl+R. Также убедитесь, что вы не находитесь в режиме «Present» или «View Only».
• Направляющие не прилипают к объектам. Убедитесь, что включено «Snap to Geometry» (значок магнита в верхней панели).
• Направляющие исчезают после закрытия файла. Направляющие сохраняются, если вы не удалили их вручную. Проблема может быть в кэше браузера — попробуйте обновить страницу.
• Направляющие сдвигаются при перемещении фрейма. Направляющие привязаны к странице, а не к фрейму. Если вы двигаете фрейм, направляющие остаются на месте. Чтобы избежать путаницы, используйте локальные сетки внутри фреймов.

Продвинутые советы по работе с линейками

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

Один из лучших способов — использование плагина Guide Guide. Он позволяет:

• Автоматически создавать отступы (например, 24px слева и справа).
• Генерировать 12-колоночную сетку с gutter 16px.
• Создавать центрированные направляющие.
• Экспортировать настройки для повторного использования.

Ещё один лайфхак — использование Auto Layout в сочетании с направляющими. Auto Layout сам выравнивает элементы внутри контейнера, но направляющие помогают правильно разместить сам контейнер на странице.

Также полезно знать, что:

• Направляющие можно копировать между страницами через буфер обмена.
• Можно создавать цветные направляющие с помощью плагинов (например, «Color Guides»).
• Figma поддерживает привязку к направляющим при использовании Frame Tool (F) — это помогает быстро создавать фреймы нужного размера.

Работа в команде

Если вы работаете в команде, важно договориться о стандартах использования линеек и направляющих. Например:

• Все макеты должны иметь направляющие на 24px от краёв.
• Основная сетка — 8px baseline grid, реализованная через направляющие.
• Цветные направляющие используются для обозначения зон действия (например, кликабельная область).

Это снижает количество ошибок и ускоряет процесс согласования.

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

По её словам, более 70% ошибок в начальных версиях макетов связаны с неправильным позиционированием. А простое использование направляющих снижает этот показатель до 15%. Она также отмечает, что плагины вроде Guide Guide экономят в среднем 2–3 часа в неделю на одном проекте.

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

Заключение

Линейки в Figma — это простой, но мощный инструмент для повышения точности и профессионализма в дизайне. Их правильное использование помогает избежать хаоса на холсте, обеспечивает единообразие макетов и ускоряет процесс работы. Включение линеек через Ctrl+R (Cmd+R) должно стать стандартной процедурой при открытии любого нового проекта.

• Активируйте линейки с помощью Ctrl+R (Cmd+R).
• Создавайте направляющие, перетаскивая с линеек на холст.
• Используйте плагины, такие как Guide Guide, для автоматизации.
• Сочетайте линейки с сетками и Auto Layout для максимальной точности.
• Согласуйте стандарты направляющих в команде для единообразия.