Как в фигме сделать направляющие
Работа в Figma часто требует ювелирной точности при расположении элементов интерфейса. Направляющие — это фундаментальный инструмент, который превращает хаотичное расположение объектов в продуманную, сбалансированную композицию.Направляющие незаменимы для создания сеток, выравнивания, соблюдения отступов и обеспечения визуальной целостности дизайна. В этой статье мы подробно разберем все аспекты работы с направляющими: от базового создания до продвинутых техник, которые значительно ускорят ваш workflow.
Важность направляющих сложно переоценить: они являются визуальным каркасом, на котором держится вся композиция макета. Без них даже самые талантливо задуманные интерфейсы рискуют превратиться в набор разрозненных элементов с «плывущими» отступами и несоблюденным визуальным ритмом. Правильно настроенные направляющие не только экономят время на бесконечные микро-движения объектов, но и обеспечивают профессиональный результат, где каждый пиксель знает свое место, а дизайн выглядит цельным и продуманным.
Создание и управление направляющими
Начнем с основ. Направляющие (Guides) в Figma — это тонкие линии, которые накладываются на рабочую область (Canvas) и помогают позиционировать фреймы, объекты и слои. Они не экспортируются и видны только в режиме редактирования.
Создание направляющих:
- Из линеек: Самый простой способ. Подведите курсор к вертикальной или горизонтальной линейке (если они не видны, нажмите Shift + R). Зажмите левую кнопку мыши и потяните на холст. Появится синяя линия — это и есть направляющая.
- Через меню вида: В верхнем меню выберите View -> Guides -> Add Guide. Новая направляющая появится в центре текущего вида. Этот метод менее точен, так как положение направляющей зависит от того, какая область холста сейчас в поле зрения.
- Из объекта (Layout Guides): Это более продвинутый и структурированный способ. Выделите фрейм (например, артборд) и нажмите значок Layout Grid в правой панели. В выпадающем списке выберите Guides.
Вы можете добавить ряд вертикальных и горизонтальных направляющих, указав их точное положение в пикселях или процентах от размеров фрейма. Главное преимущество — эти направляющие привязаны к конкретному фрейму и перемещаются вместе с ним.
Управление и редактирование:
- Перемещение: Наведите курсор на направляющую, пока он не сменится на двойную стрелку (↕ для горизонтальной, ↔ для вертикальной), зажмите и перетащите. Точное положение в пикселях отображается рядом с курсором.
- Удаление: Перетащите направляющую обратно на линейку. Чтобы удалить все направляющие сразу, щелкните правой кнопкой мыши на холсте и выберите Clear Guides, или зайдите в View -> Guides -> Clear All Guides.
- Блокировка: Чтобы случайно не сдвинуть направляющую, можно ее зафиксировать. Правой кнопкой мыши по направляющей -> Lock Guide. Разблокировать можно там же или через панель слоев.
- Цвет: По умолчанию направляющие синие, но их цвет можно изменить для лучшей видимости на сложном фоне. File -> Settings -> Color of selections and guides.
Работа с умными направляющими (Smart Guides):
Это временные розовые линии, которые автоматически появляются при перемещении или трансформации объекта, показывая его выравнивание относительно других элементов, фреймов или центра. Они крайне полезны для быстрого позиционирования без создания постоянных линий. Управляются через View -> Show Smart Guides (включено по умолчанию).
Продвинутое использование таблиц, сценариев
Для системной работы, особенно над сложными проектами вроде дизайн-систем или многостраничных сайтов, базовых направляющих недостаточно. Здесь на помощь приходят таблицы (макеты), сценарии и строгая организация.
Один из самых эффективных способов — создать таблицу (сетку) направляющих на основе базового модуля (например, 8px). Это обеспечивает ритм и согласованность всех отступов в интерфейсе. Вы можете создать такой набор направляющих один раз и скопировать его на все ключевые артборды.
Вот пример таблицы для настройки направляющих на фрейме размером 1440px (ширина макета) с базовым модулем 8px:
| Тип направляющей | Положение (от левого/верхнего края фрейма) | Назначение и применение |
|---|---|---|
| Вертикальная (колонки) | 80 px, 1360 px | Границы основного контентного блока. Все ключевые элементы внутри этих границ. |
| Вертикальная (колонки) | 400 px, 1040 px | Внутренние направляющие для выравнивания текста в две колонки или сложных блоков. |
| Горизонтальная (базовые) | 80 px, 120 px, 160 px | Стандартные отступы для заголовков, верхних полей секций. |
| Горизонтальная (инкрементные) | Каждые 8 px (176, 184, 192... 1000) | Сетка для точного позиционирования любых элементов с шагом в базовый модуль. Создается скриптом или копированием. |
| Горизонтальная (специальные) | 600 px, 900 px | Ключевые линии для выравнивания специфичных блоков (например, героя или футера). |
Как создать такую таблицу эффективно:
- Создайте мастер-фрейм.
- Используйте Layout Guides (как описано выше) для добавления направляющих по краям контентной области (80px).
- Для создания инкрементных направляющих с шагом 8px можно использовать плагины (например, Guide Mate) или, если направляющих немного, добавить их вручную, копируя (Ctrl+D после создания первой) и вводя значения.
Ручное создание сложных сеток отнимает время. Плагины — это спасение: Guide Mate: Позволяет создавать наборы направляющих по заданным параметрам (отступы, количество, шаг) за пару кликов. Auto Layout Guide Generator: Генерирует направляющие на основе настроек Auto Layout. Remove All Guides: Быстро очищает все направляющие на странице или во всем файле.
Организация с помощью страниц и библиотек:
- Вы можете создать отдельную страницу в файле под названием «Guides & Grids» и хранить там эталонные фреймы с настроенными направляющими. При необходимости просто копируйте их на рабочие страницы.
- Если вы работаете над дизайн-системой, сделайте фрейм с фирменной сеткой и направляющими компонентом и опубликуйте его в библиотеке. Тогда вся команда сможет использовать единый стандарт.
Работа с направляющими — это не просто технический навык, а часть дизайн-мышления, направленного на порядок, последовательность и эстетическую гармонию. Освоив базовые методы создания и перемещения линий, вы обеспечиваете себе аккуратность в единичных макетах. Переход же к продвинутым техникам — использованию таблиц на основе модульной сетки, плагинов для автоматизации и строгой организации через библиотеки — знаменует переход на уровень системного дизайнера, способного создавать не просто картинки, а масштабируемые, целостные и легко поддерживаемые интерфейсы.
Заключение
Направляющие в Figma — это краеугольный камень профессионального дизайна. Они экономят время, избавляют от «выравнивания на глаз» и гарантируют визуальную согласованность всех элементов интерфейса. От простых линий, тянущихся с линеек, до сложных системных таблиц, привязанных к фреймам, — этот инструмент покрывает все уровни сложности задачи. Начав с ручного создания направляющих для выравнивания кнопки, со временем придете к использованию автоматизированных сеток для целых экранов, что неизменно повысит качество и скорость работы.