как включить, сделать, убрать, настроить сетку в Figma

1 min read
03.04.2021

В этом уроке разберем инструмент «Сетка» в фигме (Figma). Вы узнаете как её включить, убрать и настраивать для дизайна сайтов. Также я поделюсь с вами готовыми шаблонами с сетками, которые вы можете использовать в своих проектах.

Получить бесплатно 24 раздела landing page для figma

Как сделать сетку в фигме

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

Как настроить сетку в фигме

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

Чтобы задать колоночную сетку, вместо значения «Grid» (сетка), выберите надпись «Columns» (колонки или столбцы).

Если хотите чтобы колонки были вертикальными, то следует задать значение «Rows» (что переводится как строки, ряды).

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

Чтобы сделать сетку из 12 колонов в Figma, выберите фрейм. Справа нажмите на иконку сетки, затем в значении «Count» выберите цифру «12» из списка. Таким образом вы зададите 12 колонок.

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

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

Если хотите, чтобы сетка быра размещена в левом краю, то установите значение «Left».

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

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

Как удалить сетку в фигме

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

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

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

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

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

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

Шаблоны сеток в 12, 9, 6, 3 колонки для Figma.

Какие сетки использую лично я в своей работе? Специально для этой статьи я сделал шаблоны сеток. Вы можете дублировать этот файл по ссылке, чтобы посмотреть какие сетки и размеры фреймов я использую при создании дизайна сайтов (Landing Page).

Какие размеры фреймов с сетками я использую в фигме?

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

Сетка в фигме в 12 колонок для компьютера (десктопа)

Ширина фрейма для компьютера (десктопа) — 1920 px. Я использую сетку в 12 колонок. Размеры столбцов 80 px. Расстояние между колонками — 20 px. Размер 12 колонок получается 1180 px.

Сетка 9 колонок для планшетов и мобильных устройств.

Далее идет фрейм с 9 колонками для планшетов и мобильных устройств. Таким образом удобно перестраивать элементы дизайна, которые у меня в 12 колоночной сетке. Здесь ширина фрейма — 1180 px. Аналогично ширине 12 колоночной сетки. 9 колонок. Ширина колонки также 80 px. Разрыв между колонками 20 px. Ширина сетки и рабочая область, где размещаю контент 880 px.

Сетка 6 колонок для мобильных устройств

Размеры фрейма для сетки с 6 колонками — 880 px. Количество столбцов 6. Ширина столбца 80 px, разрыв между столбцами 20 px. Ширина сетки из 6 колонок составляет 580 px.

Сетки из 3 колонок для мобильных устройств

Ширина фрейма — 446 px. Ширина одной колонки 80 px. Расстояние между колонками 20 px. Ширина 3 колонок для мобильных устройств — 280 px.

Заключение

Итак, в этом видео вы узнали про инструмент «Сетка» в фигме (Figma).

P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.

Автор статьи: Владимир Чернышов

P. P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).

Сетки в Figma. Часть 1. Как работать с сеткой в Figma, ее… | by Figma Tips

Как работать с сеткой в Figma, ее настройки, и что такое Grid Style.

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

Figma дает нам очень удобный инструмент Layout Grid, которым очень легко пользоваться. Сочетанием горячих клавиш скрывать и отображать сетку (Ctrl+G), а также масштабировать её на разную ширину макета, что незаменимо при создании адаптивного дизайна.

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

Добавляем новую сетку “+” и жмем на нее. Появляется окно настроек.

По умолчанию Figma создает сетку типа Grid. Она удобна при создании мобильных приложений. Нас, как веб-дизайнеров, интересует вторая вкладка Columns. Выбираем ее и видим следующие настройки.

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

• Count — количество колонок
• Width — ширина колонки
• Gutter — межколоночный отступ
• Margin — оступ сетки от правого и левого края макета

Ну это, я думаю вы и без меня прекрасно поняли.

🔥 Интересная и важная настройка это Type. В выпадающем списке можно выбрать:

• Stretch–резиновая сетка, ширина колонки задается автоматически программой. А это значит что не надо самому считать и учитывать полупиксели если вдруг блоки не делятся поровну 😎
• Center–сетка центруется. При выборе этого пункта становится активным окошко Width.
• Left–тут понятно. Одно время Артемий Лебедев пропагандировал сайты прижатые к левому краю, вряд ли это в его честь, но наверное кому-то будет полезно.

💣 Можно создать много сеток в одном фрейме, если нужно!!

Комбинируя несколько сеток, можно задать как горизонтальный так и вертикальный ритм в макете

А теперь уберите от экранов слабонервных.

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

Растянули макет, подровняли элементы дизайна по новым размерам, бум, профит, новое разрешение макета готово!

Сетки Stretch. Межколоночный отступ и боковые отступы фиксируются, а ширина колонки меняется

Наверное вы заметили, что при наведении на пункт Layout Grid, рядом с плюсом, появляется еще одна иконка (4 точки). Суть в том что нашу сетку мы можем сохранить как стиль.

Жмем появившуюся иконку (после того как создали сетку или несколько сеток в вашем фрейме), даем название стилю, готово. Теперь при нажатии на иконку из 4х точек, в выпадающем меню появится ваш стиль сетки. Можете применять ее к любому новому фрейму.

Применение Grid Style для нового фрейма

А давайте вспомни как мы все раньше работали с сетками в Фотошопе.

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

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

👉 Follow Us https://vk.com/figmatips

Layout Grid — руководство Figma

Добавить в избранное

Научитесь проектировать, используя сетки, столбцы, строки и поля.

Рис. Руководство

1

Инструмент рисунка фигма

0:54

2

Редактор на рис.

1:17

3

Основные инструменты

2:14

4

позиция

2:14

9000 2

. , Размер, Поворот и Угловой радиус

1:27

5

Цветовые стили

1:13

7

Dark Mode с цветами выбора

1:17

8

Градиенты

1:36

Создание фона

2:37

10 0003

Blending Modes

2:37

10 0003

.

2:02

11

Выравнивание, распределение, и приливные свойства

1:24

12

Объединение и угловой радиус

2:53

13

Shadow и Blure.0002 1:48

14

Использование изображений

2:00

15

Заполнение, ход и усовершенствованный ход

3:21

16

Текстовые свойства и стили

1:37

17 170002

Google Fonts и пользовательские шрифты

1:13

18

Доступность

19

Отзывчивый дизайн

3:07

20

ограничения

1:11

21

Являются ограничения

1:11

21

.0003

2:00

22

Автоматическая макет на рис.

1:45

23

Векторный режим

0:55

24

Vector Network

1:19

Mockups Mockups

1:19

9000 2

.

2:00

26

3D Mockups

1:20

27

Использование иллюстраций в дизайне

2:03

28

BOOLEANS

2:24

Gicon

2:24

29

. 0003

1:48

30

Компоненты

1:50

31

Команда библиотека

2:14

32

Создание конфетти

1:59

33

LOOREPICAT 1:41

34

Apple Watch Ring

2:23

35

Exporting Assets in Figma

1:39

36

Exporting CSS Code

1:04

37

Designing with Данные

1:57

38

Прототипирование

2:25

39

История версии

1:25

40

Многокопорядочку, Комментирование и предварительный просмотр

1:36

9000 2 41 41 9000 41 9000 41 9000 41 9000 41 9000 41 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2 9000 2

41 9000 2 9000 2 9000 2

41919.

5:39

42

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

43

UIKITS

4:47

44

Плагины

5:47

45

БЛАГОС. 0003

46

Волновой фон

6:46

47

3D Фигуры

12:27

48

Прототипирование параллакса на фигма

7:52

49

3d ui. : 16

50

Стеклянный значок

9:16

51

Хрустальный шар с анимацией эффекта воды

12:54

52

Дизайн и анимация кода A с буквами

29:38

53

Футуристическая линейная анимация

19:30

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

Скидка в Черную пятницу. Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Учитесь с видео и исходными файлами.

Доступно только подписчикам Pro.

Скидка в Черную пятницу. Покупка включает доступ к более чем 50 курсам, более чем 320 обучающим материалам премиум-класса, более 300 часам видео, исходным файлам и сертификатам.

Шаблоны и исходный код

Загрузить исходные файлы

Загрузить видео и ресурсы, чтобы просматривать и учиться в автономном режиме без перерыва.

Шаблон дизайна

Исходный код для всех разделов

Видеофайлы, ePub и субтитры

Просмотр всех загрузок

1

Инструмент рисунка фигма

Начало работы с фигмами в качестве вашего дизайнерского инструмента

0:54

2

Редактор на рис.

17

3

Основные инструменты

Знакомство с панелью инструментов в Figma

2:14

4

Свойства положения, размера, поворота и углового радиуса

Работа с положением, размером и углом, Свойства радиуса

1:27

5

Стили цвета

Работа со стилями цвета на рис. Темный режим с выбранными цветами

Научитесь проектировать и адаптировать проекты для темного режима с выбранными цветами

1:17

8

Градиенты

Работа с градиентами в Figma

1:36

9

Создание фона

Фоны дизайна на рис.

2:37

10

Режимы смешивания

Ученитесь интересными методами с режимами смещения

2:02

11

Выделитель.

Изучение выравнивания и упорядочивания в Figma

1:24

12

Объединение и угловой радиус

Работа над объединением и угловым радиусом

2:53

13

Эффекты тени и размытия

Изучение способов включения тени и размытия в ваш дизайн

1:48

14

Использование изображений

СТАРИИ ОБСЛУЖИВАНИЯ ИЗОБРАЖЕНИЯ на рис.

2:00

15

Заливка, обводка и расширенная обводка

Узнайте больше о заливке и различных параметрах обводки в Figma

3:21

16

Свойства и стили текста

Изучите и узнайте о свойствах типов Figma

1:37

17

Google Fonts и пользовательские шрифты

Игра с шрифтами на дизайне

1:13

18

Доступность

Изучение A11Y в Design

1

Ответ

. макеты в Figma с использованием ограничений и автоматического макета

3:07

20

ограничения

Работа с ограничениями в Figma

1:11

21

Layout Grid0003

Научитесь проектировать с использованием сеток, столбцов, строк и полей.

2:00

22

Автоматическая макет на рис.

. 55

24

Vector Network

Научитесь использовать векторные сети и дизайнерские иконки

1:19

25

Мокапы в перспективе

Используйте реалистичные макеты для представления ваших дизайнов

2:00

26

3D Mockups

Добавление 3D -макетов к дизайну

1:20

27

Использование иллюстрации в дизайне

Инкорпируйте иллюстрации в свой дизайн

.

2:03

28

Логические значения

Использование логических значений для создания значков

2:24

29

Дизайн значков

Узнайте, как создавать значки с помощью инструментов Figma

1:48

30

Компоненты

Сделайте свой дизайн более пригодным для повторного использования с помощью компонентов.

1:50

31

Команда библиотека

Публикация ваших стилей и компонентов дизайна

2:14

32

Создание конфетти

Loofer Loofer

1:59

Loofer Loofer Дублирование

Работа с плагином Looper Figma

1:41

34

Apple Watch Ring

Создание кольца Apple Watch на рис.

2:23

35

Экспортирующие активы на рис.

Узнайте об экспортирующих активах на фигме для реализации

1:39

36

Экспрессия CSS код

36

Экспрессия CSS

1:39

36

.

Работа с кодом CSS на Figma

1:04

37

Проектирование с использованием данных

Плагины, помогающие создавать дизайн с реальным содержанием

1:57

38

0003

быстро создайте весь поток для дизайна вашего приложения на рис.

2:25

39

История версий

Работа с историей версий на рис.

1:25

40

Множественные, комментирующие и превью

400003

.

Узнайте о сотрудничестве и совместном использовании с Figma

1:36

41

Варианты

Объединение похожих компонентов в варианты

5:39

42

Интерактивные компоненты0003

Создание повторно используемых взаимодействий с использованием интерактивных компонентов

43

UIKITS

Дизайн с использованием UIKITS на рис.

4:47

44

Плагины

.

Фон капли

Узнайте, как создать простой фон капли в Figma

4:45

46

Фон волны

Узнайте, как создать простую волну в Figma с помощью инструмента Bend и плагина волны

6:46

47

3D Формы

Узнайте, как создать 3D -формы

12:27

48

Parallax Prototyping на фигме

Узнайте, как создать метод анимации параллакса, где на фоне и на фоне и на фоне и на фоне и на фоне и на фоне и на фоне и на фоне и на фоне и на фоне и на фоне. Слои переднего плана перемещаются с разной скоростью

7:52

49

Перспективный дизайн 3D-интерфейса

Узнайте, как преобразовать пользовательский интерфейс в трехмерную перспективу

7:16

50

Стекло

003

Узнайте, как создать стеклянную иконку

9:16

51

Хрустальный шар с анимацией эффекта воды

Узнайте, как анимировать волны в хрустальном шаре с помощью инструмента прототипирования Создайте и закодируйте линейную анимацию с буквами

Узнайте, как анимировать линии с помощью CSS в CodeSandbox

29:38

53

Футуристическая линейная анимация

Узнайте, как создать футуристический фон с линиями с помощью инструмента «Перо» в Figma

19:30

Познакомьтесь с инструктором

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

Сурья Ананд

Дизайнер

Хотите научиться дизайну

3 курса — 7 часов

Справочник по дизайну для iOS

Полное руководство по дизайну для iOS 14 с видео, примерами и файлами дизайна

2 часа

Справочник по дизайну пользовательского интерфейса

Подробное руководство с лучшими советами и рекомендациями по дизайну пользовательского интерфейса. Бесплатные учебные пособия для изучения дизайна пользовательского интерфейса.

2 часа

Руководство по Figma

Полное руководство по лучшим советам и рекомендациям по Figma

3 часа

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

Отредактируйте и удалите стиль сетки в Figma.

Смотреть видеоруководство

Создание стиля сетки

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

• Затем выберите элемент сетки, чтобы открыть модальное окно настроек сетки макета.

• Выберите меню Grid и выберите Column в левом углу модальной сетки.

Затем добавьте следующие параметры сетки:

Количество :  6

Тип : Stretch

Gutter: 20

• После этого нажмите четырехточечный значок в разделе Grid , чтобы вызвать модальное окно стилей сетки.
• Щелкните значок + в правом углу модального окна Стили сетки .

• Назовем наш стиль Grid Style 1 , затем нажмем кнопку Create style .

Вы можете создать столько стилей, сколько захотите.

Применение стиля сетки к слою

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

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

Доступ к сетке вашего файла

Стили

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

Редактировать

стиль сетки

Чтобы отредактировать стиль сетки , щелкните на сером фоне файла, чтобы отобразить стили. Щелкните правой кнопкой мыши стиль сетки, который вы хотите отредактировать, и выберите Редактировать стиль в контекстном меню.

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

Удалить

стиль сетки

Чтобы удалить стиль сетки из файла Figma, щелкните серый фон файла, чтобы отобразить стили. Щелкните правой кнопкой мыши стиль сетки , который вы хотите удалить, и выберите Удалить стиль в контекстном меню.

Вот и все о создании стиля Grid в Figma. в следующих постах мы расскажем больше о стилях Figma.

Не стесняйтесь посетить наш веб-сайт Captain-Design.com , где мы щедро делимся готовыми к коммерческому использованию шаблонами Figma и HTML .

Вы найдете три вещи, которые помогут вам начать разработку вашего следующего проекта:

• Более 200 бесплатных шаблонов Figma.
• Бесплатные шаблоны Html + Bootstrap 5.
• Удивительные плагины Figma и наборы пользовательского интерфейса.

• Как создать сегментированные кнопки — учебник по Figma

  23 августа 2022 г. –
  10 минут чтения

• Как создать заполненные кнопки — Figma Tutorial

  22 августа 2022 –
  12 минут чтения

• Как создать кнопки FAB — учебник Figma

  21 августа 2022 г.