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

Показать описание

Сегодня мы рассмотрим создание сетки для Figma – одного из популярнейших UI/UX инструментов и программ для веб-дизайна в настоящее время. На странице урока вы найдете Bootstrap сетку в Figma, которую мы сегодня создадим и сможете использовать ее в своей работе.

Таймкоды:
00:00 Начало урока
00:59 Создание нового документа в Figma
01:29 Создание сетки в Figma для "Extra large"
03:00 Расчет ширины колонки Bootstrap
04:40 Почему необходимо центрировать сетку
05:06 Создание горизонтальной сетки
05:41 Рекомендация по созданию горизонтальной сетки
07:38 Создание сетки для "Large"
10:22 Создание сетки для "Medium"
11:38 Создание сетки для "Small"
13:22 Нужны ли промежуточные сетки в реальной работе
14:15 Создание сетки для минимального разрешения
15:45 Как использовать систему сеток из урока в работе

Рекомендации по теме

Комментарии

Важное дополнение! Хоть "Type - Center" и "Type - Top" являются одинаково популярными параметрами горизонтальной сетки при создании дизайна сайтов в Figma, я рекомендую использовать именно "Type - Top". Это наилучшая настройка в большинстве случаев, особенно если высота макета заранее неизвестна.

wdm

Воот, что нужно, хоть что то по дизайну появились уроки)) Спасибо ! Ждем продолжения уроков!!!

evgenykonstantinov

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

VyacheslavKolesnik

очень подробно и доходчиво. Благодарю!

paukahn

Привет, спасибо большое. Ты лучше все объяснил.

ПроигрШоу

Учусь по вашим видео, как и большинство молодых разработчиков. Спасибо за ваш труд! 💯 🔥
Недавно понадобилось установить гугловскую капчу на HTML сайт. Сразу на ваш канал - и ничего не нашла 🙄
Не могли бы снять видео по этой теме ? Буду признательна

m_mariya_mari

Спасибо! Я не программист, но затянуло))) Хочу сайт апгрейдить)

olgagrischina

Добрый день, будет ли джедай вёрстки?

roman

У любого сайта на bootstrap, который я открываю и инспектирую, вижу размер контейнера 1170px минус по 15px с обеих сторон, например в том же Opencart, но на всех видео про дизайн, все говорят о контейнере 1140 минус 15px? где подвох?

maxbred

Здравствуйте, а если верстать по бустрапу, бэм не нарушается?

alizhilov

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

Сетка в фигме: как сделать модульную сетку в Figma

Уроки Figma с нуля | Урок 3/11 Создание сетки в figma и работа с сеткой в фигме [Мини курс Фигма]...

[NEW] 🔥 Модульные сетки в Фигме. Boostrap. 8px grid. Новый нескучный курс по Фигме. Урок 5...

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

🔥 Сетка в Figma: какой должна быть ширины? 8 или 10 px? Что лучше stretch или center? Фигма с нуля...

Сетка в Figma (Фигма) | UI UX дизайн уроки

Как создать сетку в Figma?

Figma. Сетка. Создаём свою сетку.

Уроки Figma #3: Создание модульной сетки

Figma. Создание фрейма и настройка сетки

Уроки Figma (Фигма) – №22: Сетки в веб дизайне / Бесплатный курс по Фигме...

Сетка в дизайне | Модульная сетка в Figma

Работа с сеткой в веб-дизайне: основные принципы

Figma — сетка Модульные сетки Сетка Bootstrap

Использование сетки в Figma (Grid in Figma) #figma #webdesign #вебдизайн #uxui #вебдизайн...

Онлайн курс UI UX | Figma | Как создать сетку в Figma | Zefir Design School...

На 97,5% полностью адаптивный дизайн в Figma за 16 минут

6. Сетка и отступы в Figma (Фигма). Разработка StyleGuide/UI-Kit для веб-дизайна....

Сетка в фигме | Как сделать модульную сетку в Figma? Ответ прост, просто посмотри и повтори...

Сетки в веб-дизайне ❤️ #uxuiдизайн #webdesign #вебдизайн #фигма #дизайнсайта #обучениедизайну...

Уроки Figma (Фигма) #5: Создание сетки / Мосейчук Вячеслав

Сетка в фигме: КАК СДЕЛАТЬ МОДУЛЬНУЮ СЕТКУ В FIGMA

Figma. Знакомство с сеткой в макетах

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