Урок по веб-дизайну для детей: как работать с сеткой в Figma

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

Этот урок мы посвятим работе с типографикой в Figma. Вы узнаете, как работать с модульными сетками в «Фигме». 

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

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

Как добавить сетку в Figma

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

Чтобы добавить сетку, необходимо в панели свойств справа нажать на плюсик у Layout grid.

По умолчанию добавится гридовая сетка, состоящая из клеток по 10 пикселей.

Всего в «Фигме» 3 вида сеток: грид (клетки), колонки и строки.

Давайте чуть подробнее рассмотрим каждую из них.

Виды сеток

В Figma модульная сетка (grid) представляет собой инструмент для создания и настройки сеточной структуры в дизайне.

Очень удобной особенностью ее использования является то, что если перемещать объект с помощью стрелок, то он будет смещаться ровно на 1 пиксель, а если зажимать клавишу Shift, то объект будет передвигаться сразу на 10 пикселей. То есть ровно по модульной сетке.

При необходимости размер клеток сетки можно регулировать с помощью свойства Size.

Также у любой модульной сетки можно изменить цвет и прозрачность, если она сливается с цветами на макете. По умолчанию цвет сетки бледно-красный. А у прозрачность стоит показатель 10%.

Следующий тип сетки — это колонки.

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

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

12-колоночная модульная сетка широко используется в дизайне благодаря своей универсальности и гибкости. Эта сетка позволяет легко делить макет на равные части: на 2, 3, 4, 6 колонок и т.д. 

При делении на 2 колонки вы можете создавать макеты с двумя равными столбцами, что часто используется для разделения контента на две части или для создания боковой панели.

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

При делении на 4 колонки можно создавать макеты с четырьмя равными частями, что позволяет эффективно организовать контент на странице, например, разместить изображения или текст в четырех колонках.

Эти различные варианты разделения на 2, 3 и 4 колонки дают дизайнерам и разработчикам большую гибкость при создании макетов и адаптации контента под различные потребности и стили дизайна.

В целом, 12-колоночная модульная сетка является популярным выбором в дизайне благодаря своей гибкости, удобству использования, адаптивности и широкому распространению в индустрии.

Поделитесь своими наблюдениями в комментариях: сайты с визуальным разделением на сколько колонок вам встречаются чаще всего? 

Также можно редактировать отступы между колонками. Отступы могут быть различными в зависимости от дизайна и требований проекта. Обычно используются отступы в пределах 16-32 пикселей, но они также могут быть настроены по желанию дизайнера.

Последний тип — строчная модульная сетка. Она делит макет горизонтально, однако используется очень редко. Почему? 

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

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

Выравнивание колонок

Вернемся к сетке, которая делит макет на колонки. То как выравниваются колонки, можно определить в типах. По умолчанию выставляется тип Stretch. Он определяет ширину модульной сетки по ширине макета. И ширина каждой колонки высчитывается автоматически. Этот тип часто выбирается из-за универсальности. 

При выборе типа ориентации по центру, колонки располагаются в середине макета. Тут пользователь сам может настроить не только отступы между колонками, но и ширину колонок в свойстве Width.

Тип ориентации на правому краю или по левому краю работают аналогично. У них, помимо настройки ширины, появляется свойство Offset — смещение относительно края макета.

Редактор «Фигма» имеет удобную возможность применять к одному фрейму одновременно несколько модульных сеток. При необходимости их можно делать невидимыми.

Если вы хотите настроить свою сетку, чтобы применять ее при разработке различных страниц сайта, то у «Фигмы» есть возможность ее реализовать.

Необходимо нажать на 4 точки у свойства Layout Grid у того фрейма, где вы разработали сетку. Затем нажать на плюсик, придумать название и при необходимости описание вашей сетке. После чего нажимаем на Create Style. И готово!

Теперь эту сетку можно применить на других фреймах.

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

Видео: как сделать сетку в Figma

Подробнее о возможностях «Фигмы» вы можете узнать в видео из подборки. Урок подготовила школа программирования для детей Pixel. Мы обучаем веб-дизайн школьников 9-13 и 12-17 лет. Приходите к нам, чтобы научиться работать с дизайном сайтов и конструктором Tilda.