Клетки, колонки, строки и их свойства
Сетки незаменимы в дизайне интерфейсов. Они помогают упорядочить элементы на макете, сделать оформление всех страниц сайта или приложения единообразным, адаптировать дизайн под разную ширину экранов. Также модульная сетка может пригодиться при создании рекламного баннера или логотипа — для выравнивания элементов относительно друг друга. Разбираемся, какие сетки доступны в Figma и как их строить.
Содержание
- Как включить
- Форматы сеток
- Свойства
- Стиль из сетки
- Направляющие
Как включить
Сетку в Figma можно устанавливать только на фрейм. Если выделить фрейм, на боковой панели справа появится меню доступных функций и свойств. За сетки отвечает параметр Layout grid — он расположен в самом низу, прямо перед кнопкой экспорта.
По клику на Layout grid программа автоматически построит сетку из клеточек.
Теперь, когда сетка появилась на макете, можно менять ее формат и свойства.
Форматы сеток
В Figma доступны три вида сеток: Grid, Columns и Rows. Переключаться между ними можно в окне меню Layout grid, эта опция доступна слева вверху.
Grid. Это пиксельная сетка, которая напоминает тетрадный лист. Figma включает ее по умолчанию. Изначально шаг сетки — 10 px, его можно менять. Пиксельная сетка нужна, чтобы выравнивать мелкие элементы на макете интерфейса.
Columns. Колоночная сетка делит макет на вертикальные полосы и помогает соблюдать интервалы между элементами по горизонтали.
Rows. Это «перевернутая» колоночная сетка, она делит фрейм на строки. В дизайне интерфейсов такой формат используется реже, но может пригодиться для нестандартных макетов или верстки рекламных баннеров.
Для каждого фрейма можно создать неограниченное количество сеток. Для этого нажмите на плюс, расположенный справа от надписи Layout grid. Все созданные сетки будут отображаться списком. Видимость каждой можно включать и выключать, кликая по иконке с глазом. При необходимости можно включить видимость сразу нескольких сеток. А справа от глаза есть значок минуса, он удаляет сетку.
Свойства
У каждой сетки в Figma есть настройки, которые можно задать в окне меню Layout grid. Для пиксельной сетки доступно только два свойства: размер и цвет.
Size. Отвечает за размер клетки. В дизайне интерфейсов обычно используют шаг в 5 px, 8 px или 10 px, но можно сделать и сетку с очень крупными клетками — ограничений нет.
Color. Отвечает за цвет, красный по умолчанию. Если он кажется слишком ярким, можно выбрать любой другой цвет на палитре. Справа от цветового кода есть показатель прозрачности. По умолчанию стоит 10%. Можно вписать любое желаемое значение или просто двигать мышкой вправо и влево рядом со значком процента: прозрачность будет увеличиваться и уменьшаться.
У колонок и рядов гораздо больше параметров.
Color. Работает точно так же, как и для пиксельной сетки.
Count. Это количество колонок или строк. Обычно в дизайне интерфейсов используют от 2 до 12 колонок, но можно сделать и больше. Строк может быть сколько угодно в зависимости от того, насколько длинная у вас страница и как много там элементов.
Type. Параметр, отвечающий за выравнивание колонок. Если указать Stretch, то они будут растягиваться на всю ширину макета. Если Center — будут стоять посередине. Также можно выровнять колонки по правому или левому краю (параметры Right и Left). Ряды можно выровнять по нижнему или верхнему краю (Bottom и Top).
Width. Это параметр, актуальный для колоночной сетки, — ее ширина. Можно задать любое значение в пикселях. Однако если в свойстве Type указано Stretch, то ширина будет подобрана автоматически по размеру фрейма, менять ее не получится.
Height. Аналогичный параметр для сетки c рядами — высота.
Margin. Это отступ от краев макета. Если в поле Type указано Stretch, то можно задать любое значение, и это количество пикселей будет оставаться пустым слева и справа. Если в поле Type указано Center, параметр будет недоступен. А если выравнивание задано по правому, левому, нижнему или верхнему краю, то вместо Margin будет написано Offset и отступ можно будет задать только с одной стороны.
Gutter. Это расстояние между колонками или строками. С точки зрения композиции оно должно быть меньше, чем ширина самих колонок или высота строк.
Стиль из сетки
В стили можно сохранять готовые сетки с заданными параметрами, чтобы быстро использовать их для других макетов и не настраивать все свойства заново.
Для начала создайте и настройте сетку. Затем кликните по иконке с четырьмя небольшими квадратиками — она находится напротив надписи Layout grid на правой панели. Откроется окно Grid styles. Если у вас уже есть сохраненные стили, они будут перечислены в списке.
Чтобы создать новый стиль, нужно кликнуть на значок с плюсом в правом верхнем углу окна. В открывшемся поле можно написать название стиля, дать ему краткое описание, а затем нажать кнопку Create style. Сетка сохранится и появится в общем списке стилей.
Направляющие
Направляющие помогут упорядочить элементы на макете без сеток. Например, если у вас простой баннер с несколькими надписями, которые можно выровнять по двум линиям, нет смысла создавать полноценную сетку. А иногда элементов много, но они расположены нестандартно и обычные сетки использовать неудобно. Тогда из отдельных линий можно создать свою кастомную сетку.
Чтобы вызвать направляющие, нужно зажать клавиши Shift + R. Альтернативный вариант: кликнуть по логотипу Figma в верхнем левом углу, найти в меню раздел View, а там — функцию Rulers.
По краям рабочей области появятся линейки.
Чтобы создать направляющую, кликните на одну из линеек левой кнопкой мыши и потяните в сторону макета. Появится красная линия. Ее можно установить в нужном месте и двигать по мере работы.
Можно создавать неограниченное количество вертикальных и горизонтальных линий — везде, где вам удобно.
Чтобы удалить линию, кликните по ней и потяните в любую сторону так, чтобы она вышла за границы видимой рабочей области. А скрыть направляющие можно через главное меню (View > Rulers) или повторным нажатием Shift + R.