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

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

Зачем нужны сетки

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

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

Глобальные направляющие как быстрый способ создания сетки

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

Выбор объекта

Сетки применяются к Фреймам (Frame) или Компонентам (Component). Выберите фрейм, на котором хотите создать сетку (например, артборд вашего сайта).

Выбор панели сеток

• В правой панели, в секции «Design», найдите раздел «Layout grid» и нажмите на значок +.
• Сразу после этого на вашем фрейме появится сетка со стандартными настройками.
• Чтобы начать её редактировать, щелкните на её название (например, «Grid» или «Columns»), чтобы развернуть меню параметров.

Настройка сетки

Появится стандартная сетка. Нажмите на ее название, чтобы открыть настройки. Здесь есть 3 типа сеток:

• Grid (Прямоугольная сетка): Подходит для иконок, иллюстраций, выравнивания элементов по пикселям.
• Columns (Колоночная сетка): Основа для веб-дизайна. Позволяет создать сетку из колонок.
• Rows (Строчная сетка): Полезно для определения вертикальных отступов и ритма.

Настройка Колоночной Сетки (Columns)

Это то, что вам скорее всего нужно для макета сайта:

1. Тип (Type): Оставьте Columns.
2. Счетчик (Count): Количество колонок. Стандарт - 12, но бывает 8, 16 и т.д.
3. Отступ (Margin): Внешние отступы слева и справа от контента.
4. Желоб (Gutter): Расстояние между колонками. Например, 20px или 24px.
5. Ширина колонки (Width): Ширина каждой колонки. Обычно устанавливается автоматически, но можно задать фиксированную.

Пример настройки для desktop:

• Count: 12
• Gutter: 20px
• Margin: 120px (создает отступы по бокам)

На разных устройствах колоночная сетка настраивается по-разному. Данная таблица поможет быстро понять и выбрать настройки для разных типов устройств. Вот примерные параметры для быстрого старта:

Тип устройства	Количество колонок (Count)	Желоб (Gutter)	Отступ (Margin)
Десктоп (Desktop)	12	20px - 30px	120px - 200px
Планшет (Tablet)	8	20px - 24px	32px - 40px
Мобильный (Mobile)	4 - 6	16px - 20px	16px - 24px

 

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

 

Совет: Для адаптивного дизайна можно создать несколько фреймов (Mobile, Tablet, Desktop) и настроить для каждого свою сетку (например, для мобилки - 4 колонки с маленькими отступами).

 

Авто-лайаут и Сетки как продвинутый способ

Auto Layout - это мощнейший инструмент Figma, который сам по себе создает гибкую "сетку" из элементов. Как это работает:

1. Создайте несколько элементов (например, карточки).
2. Выделите их и нажмите Shift + A или кнопку «Auto Layout» в правой панели.
3. Элементы выстроятся в ряд или колонку.
4. В настройках Auto Layout вы можете задать расстояние между элементами (это аналог «желоба» в сетке) и отступы (padding, аналог «margin»).

Чем этот способ удобен: Элементы в Auto Layout автоматически подстраиваются под размер контента и друг под друга. Если вы удалите один элемент, остальные сдвинутся. Это делает работу динамической и не требует ручного выравнивания.

 

Идеальный подход: Используйте Layout Grid для общего каркаса страницы, а внутри - Auto Layout для выравнивания отдельных компонентов (шапки, карточек, списков).

 

Ручные направляющие как базовый способ

Иногда нужно просто нарисовать одну линию для выравнивания:

• Чтобы добавить направляющую: Зажмите левую кнопку мыши на линейке (сверху или слева от холста) и потяните на холст.
• Чтобы удалить направляющую: Перетащите ее обратно на линейку.
• Чтобы очистить все: Правая кнопка мыши на холсте - View settings - Clear guides.

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

Простые пошаговые инструкции

Как сделать сетку для сайта (Desktop):

1. Создайте Фрейм (F) нужного размера (например, 1440px).
2. В правой панели в разделе «Layout grid» нажмите +.
3. Выберите тип Columns.
4. Задайте:

• Count: 12
• Gutter: 20px
• Margin: 120px (или любое другое значение, которое вам нравится).

 

Теперь, рисуя прямоугольники, вы можете привязывать их к границам колонок.

 

Чтобы сделать сетку для мобильного приложения:

1. Создайте Фрейм стандартного размера (например, 360x800 для Android).
2. Добавьте Layout grid.
3. Для общего структурирования используйте Columns (например, 4 колонки с Gutter: 16px и Margin: 16px).
4. Для вертикального ритма добавьте вторую сетку типа Rows (Строки). Задайте, например, Height: 8px, Gutter: 1, Color: с полупрозрачным цветом. Это поможет выравнивать все элементы по вертикали с шагом в 8px.

Полезные советы и хитрости:

• Быстрое включение/выключение: Используйте горячие клавиши Shift + G, чтобы показывать или скрывать все сетки на холсте.
• Сетка для всего проекта: Создадите стили сеток. В панели "Layout grid" нажмите на иконку с четырьмя точками и выберите "Add style". Теперь вы можете применять одну и ту же сетку к любым фреймам в проекте.
• Множественные сетки: К одному фрейму можно добавить несколько сеток (например, колоночную и строчную одновременно).
• Цвет и непрозрачность: Меняйте цвет и прозрачность сетки, чтобы она не отвлекала от работы.

Вывод

Начните с Layout Grid для общего макета, а для внутренних компонентов активно используйте Auto Layout. Эта комбинация сделает ваш дизайн аккуратным и невероятно гибким.