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

Подписаться 303 тыс.

Просмотров 35 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Всем привет! Сегодня мы рассмотрим создание сетки для Figma - одного из популярнейших UI/UX инструментов и программ для веб-дизайна в настоящее время. На странице урока вы найдете Bootstrap сетку в Figma, которую мы сегодня создадим и сможете использовать ее в своей работе.
Страница урока: webdesign-master.ru/blog/web-...
Таймкоды:
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 Как использовать систему сеток из урока в работе
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

28 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 22

@wdm Месяц назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@evgenykonstantinov8414 3 года назад

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

@paukahn 3 года назад

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

@VyacheslavKolesnik 3 года назад

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

@setforweb 3 года назад

Ждем от вас новый курс

@d9m0n21 3 года назад

Как всегда огонь! =)

@wdm 2 года назад

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

@PROXXNSG 3 года назад

Лайк, подписка! Полезно)

@Web-Designe Год назад

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

@Mumrik1 Год назад

Спасибо!

@olgagrischina9296 3 года назад

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

@user-kh7fv5rn1g 3 года назад

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

@statuemusic 3 года назад

Супер 👍

@roman6730 3 года назад

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

@wdm Год назад

Здравствуйте. Новый Джедай верстки уже на канале: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-3PzzZ5eHHig.html

@maxbred3798 3 года назад

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

@kirill_more 3 года назад

Скорее всего дело в версиях. В bootstrap версии 3.xx ширина контейнера 1170. В 5й версии - 1140.

@wdm 3 года назад

В 4 и 5 1140.

@alizhilov1391 Год назад

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

@wdm Год назад

Здравствуйте. Если вы используете какой-либо CSS Фреймворк, его следует использовать только как каркас, по документации. То-есть никакие изменения или расширения, а также использование классов фреймворка в качестве блоков или элементов не допустимы. Вы создаёте классы вашего проекта по методологии БЭМ, но классы каркаса не модифицируете. Мухи отдельно, котлеты отдельно.