В этом уроке разберем инструмент «Сетка» в фигме (Figma). Вы узнаете как её включить, убрать и настраивать для дизайна сайтов. Также я поделюсь с вами готовыми шаблонами с сетками, которые вы можете использовать в своих проектах.
Как сделать сетку в фигме
![Создание сетки в фигме](https://web-design.center/wp-content/uploads/2021/04/01-setka-1024x589.jpg)
Чтобы сделать сетку в фигме выберите фрейм и в правой панели напротив надписи «Layout grid» нажмите на иконку плюса. Появится сетка в виде клеток размерами 10 на 10 пикселей.
Как настроить сетку в фигме
![Редактирование сетки](https://web-design.center/wp-content/uploads/2021/04/02-setka-1024x588.jpg)
Чтобы настроить сетку в фигме нажмите в правой панели на иконку сетки. В появившемся окне вы сможете изменять размеры, цвет и прозрачность сетки. Также делать сетку в виде горизонтальных или вертикальных колонок.
![Вертикальные колонки у сетки](https://web-design.center/wp-content/uploads/2021/04/03-setka-1024x589.jpg)
Чтобы задать колоночную сетку, вместо значения «Grid» (сетка), выберите надпись «Columns» (колонки или столбцы).
![Горизонтальные колонки у сетки](https://web-design.center/wp-content/uploads/2021/04/04-setka-1024x587.jpg)
Если хотите чтобы колонки были вертикальными, то следует задать значение «Rows» (что переводится как строки, ряды).
Как сделать сетку из 12 колонок в Figma
![Изменение параметров сетки](https://web-design.center/wp-content/uploads/2021/04/05-setka-1024x588.jpg)
Чтобы сделать сетку из 12 колонов в Figma, выберите фрейм. Справа нажмите на иконку сетки, затем в значении «Count» выберите цифру «12» из списка. Таким образом вы зададите 12 колонок.
![Сетка по центру фрейма](https://web-design.center/wp-content/uploads/2021/04/06-setka-1024x589.jpg)
Сетку можно размещать по центру, если внизу надписи «Type» поставить «Center». По умолчанию стоит «Stretch». В этом случае сетка будет растягиваться на всю ширину.
![Сетка справа во фрейме фигмы](https://web-design.center/wp-content/uploads/2021/04/07-setka-1024x588.jpg)
Если хотите сделать сетку справа, то выберите из списка «Right».
![Сетка слева во фрейме в фигме](https://web-design.center/wp-content/uploads/2021/04/08-setka-1024x589.jpg)
Если хотите, чтобы сетка быра размещена в левом краю, то установите значение «Left».
![Размеры серки 68 пикселей, 12 колонок](https://web-design.center/wp-content/uploads/2021/04/09-setka-1024x590.jpg)
Чтобы изменить ширину колонок, задайте значение в пикселях внизу надписи «Width» (ширина). Например я ставлю 80 пикселей. В этом случае сетка из 12 колонок будет иметь ширину 1180 px. Ширина фрейма 1920 px для настольных компьютеров.
![Новая сетка поверх старой](https://web-design.center/wp-content/uploads/2021/04/10-setka-1024x587.jpg)
Если хотите добавить новую сетку поверх первой, то снова нажмите на плюс в правой панели, напротив надписи «Layout grid».
Как удалить сетку в фигме
![Удаление сетки](https://web-design.center/wp-content/uploads/2021/04/11-setka-1024x589.jpg)
Чтобы удалить не нужную сетку в фигме, нажмите на иконку минуса, напротив той сетки, которую хотите удалить.
Как создать стиль сетки в фигме, чтобы использовать её повторно
![Создание стиля сетки в фигме](https://web-design.center/wp-content/uploads/2021/04/12-setka-1024x589.jpg)
Для создания стиля сетки, выберите фрейм, где есть сетка и справа, напротив надписи «Layout grid» нажмите на иконку с четырьмя точками. Появится всплывающее окно. Задайте имя стиля (например 12 колонок).
![Использование сетки повторно](https://web-design.center/wp-content/uploads/2021/04/13-setka-1024x586.jpg)
Чтобы использовать сетку повторно, выберите новый фрейм, затем нажмите на иконку с четырьмя точками в правой панели, напротив надписи «layout grid» и выберите созданный ранее стиль.
Как влючить и отключить сетку в фигме
![Включение и отключение сетки в figma](https://web-design.center/wp-content/uploads/2021/04/14-setka-1024x588.jpg)
Чтобы включить или отключить сетку в фигме нажмите на комбинацию горячих 3 клавиш «Ctrl + Shift + 4» для Windows и «Ctrl + G», если у вас операционная система Mac Os.
Шаблоны сеток в 12, 9, 6, 3 колонки для Figma.
![](https://web-design.center/wp-content/uploads/2021/04/image-1.png)
![](https://web-design.center/wp-content/uploads/2021/04/image-2-1024x538.png)
Какие сетки использую лично я в своей работе? Специально для этой статьи я сделал шаблоны сеток. Вы можете дублировать этот файл по ссылке, чтобы посмотреть какие сетки и размеры фреймов я использую при создании дизайна сайтов (Landing Page).
Какие размеры фреймов с сетками я использую в фигме?
![](https://web-design.center/wp-content/uploads/2021/04/image-1024x396.png)
Хочу поделиться размерами своих сеток, которые использую. Мне удобно с ними работать и адаптировать дизайн для мобильных устройств с их помощью. Можете использовать другие сетки, но мой вариант тоже рабочий. Берите на вооружение.
Сетка в фигме в 12 колонок для компьютера (десктопа)
![](https://web-design.center/wp-content/uploads/2021/04/image-5-1024x399.png)
Ширина фрейма для компьютера (десктопа) — 1920 px. Я использую сетку в 12 колонок. Размеры столбцов 80 px. Расстояние между колонками — 20 px. Размер 12 колонок получается 1180 px.
Сетка 9 колонок для планшетов и мобильных устройств.
![](https://web-design.center/wp-content/uploads/2021/04/image-6.png)
Далее идет фрейм с 9 колонками для планшетов и мобильных устройств. Таким образом удобно перестраивать элементы дизайна, которые у меня в 12 колоночной сетке. Здесь ширина фрейма — 1180 px. Аналогично ширине 12 колоночной сетки. 9 колонок. Ширина колонки также 80 px. Разрыв между колонками 20 px. Ширина сетки и рабочая область, где размещаю контент 880 px.
Сетка 6 колонок для мобильных устройств
![](https://web-design.center/wp-content/uploads/2021/04/image-7.png)
Размеры фрейма для сетки с 6 колонками — 880 px. Количество столбцов 6. Ширина столбца 80 px, разрыв между столбцами 20 px. Ширина сетки из 6 колонок составляет 580 px.
Сетки из 3 колонок для мобильных устройств
![](https://web-design.center/wp-content/uploads/2021/04/image-8.png)
Ширина фрейма — 446 px. Ширина одной колонки 80 px. Расстояние между колонками 20 px. Ширина 3 колонок для мобильных устройств — 280 px.
Заключение
Итак, в этом видео вы узнали про инструмент «Сетка» в фигме (Figma).
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).