Урок по веб-дизайну для детей: как работать с сеткой в 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.
