Правила построения модульной сетки в Фигме. Как включить сетку в фигме.

Для создания удобного дизайна для планшетов и смартфонов обычно используется сетка с 9, 6 или 3 колонками. Ширина кадров здесь составляет 1180 px, 880 px и 446 px соответственно. Модульные решетки также могут быть выполнены в различных стилях, что позволяет успешно реализовать множество вариаций.

Как работать в Фигме (Figma): создаём макет сайта с нуля

В этом посте мы познакомимся с (на мой взгляд) самым практичным программным обеспечением для создания прототипов, макетов интерфейсов и дизайна — Figma.

Я не буду углубляться в теорию горячих клавиш, инструментов и функций этого сервиса. Я уверен, что в Интернете достаточно информации.

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

Если вы прочитаете эту заметку и выполните указанные в ней шаги, вы сможете создать свой первый макет в Figma. Давайте начнем.

Задание: редизайн страницы сайта Тинькофф

Предлагаю вам попробовать верстать (копировать дизайн) страницу сайта Тинькофф, посвященную дебетовой карте Tinkoff Black.

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

Создаём фрейм в Фигме и настраиваем сетку

Так что давайте начнем! Первое, что я сделал, это зашел на сайт Tinkoff и сделал скриншот. Это необходимо для того, чтобы не возвращаться постоянно на веб-ресурс, и отчет всегда был передо мной.

  1. Сделав снимок экрана, перетащите его с рабочего стола в рабочую область Figma (серое поле).
  2. Затем нужно создать рамку (рабочий слой). Для этого нажмите на инструмент рамки (клавиша F) и нарисуйте прямоугольник на экране с помощью мыши.

Вы можете задать высоту и ширину рамки в Figma на глаз, используя ваш эталон (Figma подскажет вам, совпадают ли размеры). Или сделайте это вручную.

С правой стороны вы увидите меню. Введите необходимые параметры в поля W (ширина) и H (высота). В нашем отчете ширина составляет 1440 px, а высота — 1184 px.

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

Как работать в Фигме: настраиваем сетку

В Figma автоматически вставляется сетка в виде ячеек размером 10×10 px. Для нашей справки будет удобнее использовать сетку из столбцов и строк. Давайте создадим такую сетку.

  1. Давайте начнем с колонн. Нажмите на строку сетки, откроется дополнительное меню. Повторите настройки из скриншота: Колонки, количество — 12, Margin (внешний отступ) — 160, Gutter (отступ между колонками) — 10.

В нашем отчете мы видим, что страница имеет довольно большие поля — 160 px. Это необходимо для того, чтобы страница адаптировалась к небольшим экранам. Не только для экранов компьютеров, но и для экранов небольших ноутбуков и планшетов.

Интернет готов. Ты можешь рисовать!

Вы можете в любой момент отключить видимость сетки с помощью комбинации клавиш Shift + Ctrl + 4 (в Windows комбинация клавиш может быть немного другой). Вы можете использовать ту же команду, чтобы снова включить видимость сетки.

В нашем отчете мы видим, что страница имеет довольно большие поля — 160 px. Это необходимо для того, чтобы страница адаптировалась к небольшим экранам. Не только для экранов компьютеров, но и для экранов небольших ноутбуков и планшетов.

Для чего задействуется модульная сетка в веб-дизайне

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

  Профессия веб-дизайнер. Веб дизайнер что это за профессия

Шаблоны сеток облегчат работу любому web-дизайнеру

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

Особенности модульной сетки в Figma

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

Панель настроек Layout Grid

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

Основные типы модульных сеток в Фигме

Чтобы лучше понять функции, давайте рассмотрим их основные типы:

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

2. сетка столбцов. Разделяет макет по вертикали, придавая ему формат «газеты», популярный для новостных сайтов.

Сетку можно задать по краю (левому/правому) или по центру

3. линейная сетка. Разделяет макет по горизонтали, давая возможность настроить высоту конкретного слоя.

Сетка имеет гибкий фукнционал, давая возможность сдвига в сторону центра, верхнего или нижнего уровня

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

  After Effects для самых начинающих — 8 мини уроков. Как в афтер эффект?

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

В области Сетка макета нажмите +, чтобы добавить новую сетку и изменить ее настройки ( Настройки сетки макета ) следующим образом.

Как сделать сетку из 12 колонок в Figma

Изменение параметров сетки

Чтобы создать в Figma 12-колоночную сетку, установите флажок. Нажмите на значок сетки справа, а затем выберите «12» из списка в значении «Число». Это определяет 12 столбцов.

Сетка по центру фрейма

Сетку можно центрировать, введя «Centre» в нижней части надписи «Type». По умолчанию установлено значение «Растянуть». В этом случае сетка растягивается по всей ширине.

Сетка справа во фрейме фигмы

Если вы хотите, чтобы сетка была выровнена вправо, выберите «Right» из списка.

Сетка слева во фрейме в фигме

Если вы хотите, чтобы сетка располагалась по левому краю, выберите опцию «Left».

Размеры серки 68 пикселей, 12 колонок

Чтобы изменить ширину столбцов, введите значение в пикселях в нижней части поля «Ширина». Например, я установил значение 80 пикселей. В данном случае сетка с 12 столбцами имеет ширину 1180 px. Ширина сетки составляет 1920 px для настольных компьютеров.

Новая сетка поверх старой

Если вы хотите добавить новую сетку поверх первой, снова нажмите на знак плюс в правой области напротив надписи «Сетка макета».

Как создать стиль сетки в фигме, чтобы использовать её повторно

Создание стиля сетки в фигме

Чтобы создать сетку, выберите поле, где есть сетка, и нажмите на значок с четырьмя точками с правой стороны напротив надписи «Сетка макета». Появится всплывающее окно. Задайте имя стиля (например, 12 колонок).

Использование сетки повторно

Чтобы повторно использовать сетку, выберите новую рамку, затем нажмите на значок с четырьмя точками в правой панели напротив «Сетка макета» и выберите стиль, созданный ранее.

Как влючить и отключить сетку в фигме

Включение и отключение сетки в figma

Чтобы активировать или деактивировать сетку в макете, нажмите комбинацию клавиш «Ctrl + Shift + 4» для Windows и «Ctrl + G», если у вас Mac OS.

Совет: Если вы новичок в веб-дизайне и дизайне приложений, убедитесь, что ваш текст имеет размер не менее 16 пикселей, а лучше всего — 18 пикселей. В зависимости от шрифта, я также рекомендую немного увеличить высоту строки, чтобы улучшить читаемость.

Колонки bootstrap 4 Figma

Теперь, когда вы знаете, как создавать колонки, давайте создадим модульную систему сетки для Bootstrap 4 в Figma. Это очень легко сделать. Создайте рамку по своему усмотрению. Для примера я установил ширину 1920. Мы знаем, что ширина рабочей области в Bootstrap 4 для рабочего стола составляет 1140 пикселей, (!) 30px по краям контейнера я не учитываю. Поэтому я создаю прямоугольник длиной 1140 и центрирую его в поле.

  Хай-тек в интерьере: описание стиля с фото-примерами. Что такое хай тек

Место, где мы выбрали сетку, теперь мы должны создать ее, моя дорогая….. В номенклатуре не указана ширина колонки bootstrap, но между ними есть промежуток в 30px. Создать такую сетку вручную в центральном режиме невозможно. Поэтому в figma via Stretch мы создаем модульную сетку Bootstrap 4 Grid, которая принимает любую ширину колонок. Просто установите нужные параметры в настройках и все. Вот эти параметры: 12 столбцов с расстоянием между столбцами 30 пикселей. Здесь все понятно, но как насчет полей? У меня нет проблем с этим. Вы просто измеряете расстояние между краями прямоугольника и краями рамки и устанавливаете поле. В моем случае это 390. Если вы хотите узнать расстояние между прямоугольником и краями рамки, вы можете сделать это, нажав клавишу Alt.

Bootstrap Grid 4 Figma.

Теперь решетка идеальна, как нам и нужно. Вы можете создать его таким же образом для других разрешений, но не волнуйтесь — я уже сделал это за вас, и вы можете скачать модульную сетку bootstrap 4 в figma здесь. Вы можете использовать его бесплатно. Все есть для настольных компьютеров и планшетов.

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

Обратите внимание, что вы можете вложить кадр во времени и создать отдельную сетку для ваших нужд в подкадре. Какое отношение к этому имеет динозавр ФШ?

Сетки колонн для каждой рамы.

Линейка в Figma

Это другое и работает так же, как и наш общий друг fsh. В Figma нет предопределенных линеек, но вы всегда можете перетащить их в левую или верхнюю часть рабочей области и использовать по назначению — для выравнивания содержимого.

Линейка в Figma

Это даже забавно… Зачем в Figma нужны как модульные колоночные сетки с различными настройками, так и направляющие линейки? На самом деле, здесь нет ничего странного. Линейки — это просто линейки, которые вы используете для выравнивания блоков, а сетка компоновки Figma работает в тесной связке с модулями, позволяя вам быстро создавать пользовательские настройки.

Оцените статью
Бизнес блог