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

dc30d313c657e01569d59fd38c3a33ae.png

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

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

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

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

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

Добавление нового фрейма

Добавление нового фрейма

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

10f2c72f0be9a333259d11ad14f33df7.png

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

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

Тип сетки — грид

Тип сетки — грид

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

Сетка в виде колонок

Сетка в виде колонок

Сетка в виде строк

Сетка в виде строк

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

Виды сеток

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

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

ed1c2c3040e569c7e9ca1bba35b55e6d.png

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

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

8fc10cb63c08a0387e3ac29d7d6dd3fd.png

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

6972400b711a95e90947583c98a5927d.png

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

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

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

3e5971d6f18fd423f6922de2b818d66b.png

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

f3dfcc852930a3bda9b8f78ef3517663.png

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

ecaa473a0c6468b132195b7aab74144a.png

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

d3fba186668d21b1e4b5227b43d76fc8.png

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

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

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

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

e76dfe4efe34893c248eec157bb090dc.png

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

b019574dafe8436dceb0f754aade7898.png

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

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

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

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

2845a2ad8b992b6b24bba2f1764d5fd1.png

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

dd811810793db135b74d440899943a81.png

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

b82be648092e0363c0fc813a90392880.png

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

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

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

b9efa60172ce9a8b42e8a4db1c6b36af.png

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

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

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

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

© Habrahabr.ru