[NEW] 🔥 Модульные сетки в Фигме. Boostrap. 8px grid. Новый нескучный курс по Фигме. Урок 5
Вставка
- Опубліковано 3 тра 2024
- #alexeybychkov #ityoutubersru #webdesign
Как добавить в библиотеку сетки в фигме? Почему так плоха сетка Bootstrap. Как работает 8 px grid для мобильных приложений?
figma.help - figma.help/
как добавлять элементы в библиотеку - • Как подключить библиот...
какой ширины должен быть сайт - • Адаптив в веб-дизайне:...
ТикТок - / alexeybychkov_
Инстаграм - / alexeybychkov_
Обучение - alexeybychkov.study/
Мои цитаты -
Мои 404 - www.404.gallery/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Содержание курса:
Урок 1 - [NEW]⚡Аккаунт, история версий • [NEW] 🔥 Обзор интерфей...
Урок 2 - [NEW]⚡Гамбургер меню, предпочтения • [NEW] 🔥 Обзор меню, по...
Урок 3 - [NEW]⚡Инструменты и калькулятор • [NEW] 🔥 Инструменты и ...
Урок 4 - [NEW]⚡Слои, маски и массовое переименование • [NEW] 🔥 Слои, маски и ...
Урок 5 - [NEW]⚡Сетки. Bootstrap. 8 px grid • [NEW] 🔥 Модульные сетк...
Урок 6 - [NEW]⚡Привязки • [NEW] 🔥 Привязки (cons...
Урок 7 - [NEW]⚡Компоненты • [NEW] 🔥 Компоненты в F...
Урок 8 - [NEW]⚡Компоненты и адаптив • [NEW] 🔥 Компоненты и а...
Урок 9 - [NEW]⚡Выравнивания, Tidy Up • [NEW] 🔥 Выравнивания (...
Урок 10 - [NEW]⚡Текст • [NEW] 🔥 Текст в Figma:...
Урок 11 - [NEW]⚡Цвет, градиенты, изображения • [NEW] 🔥 Цвет в Figma: ...
Урок 12 - [NEW]⚡Обводка • [NEW] 🔥 Обводка в Figm...
Урок 13 - [NEW]⚡Эффекты: блюры, тени • [NEW] 🔥 Эффекты в Figm...
Урок 14 - [NEW]⚡Библиотека команды • [NEW] 🔥 Библиотека сти...
Урок 15 - [NEW]⚡Варианты • [NEW] 🔥 Figma Variants...
Урок 16 - [NEW]⚡Прототипы в Фигме (часть 1) • [NEW] 🔥 Прототипы в Фи...
Урок 17 - [NEW]⚡Интерактивные компоненты (часть 2) • [NEW] 🔥 Интерактивные ...
Урок 18 - [NEW]⚡Панель кода Inspect • [NEW] 🔥 Панель кода In...
Урок 19 - [NEW]⚡Экспорт • [NEW] 🔥 Панель экспорт...
Урок 20 - [NEW]⚡Ссылка на проект - • [NEW] 🔥 Ссылка на прое...
Урок 21 - Комьюнити - … будет)
Урок 22 - [NEW] ⚡ Плагины - • [NEW] 🔥 Плагины и Видж...
Урок 23 - [NEW] ⚡ Auto Layout 4.0 в Фигме • [NEW] 🔥 новый Auto Lay...
Урок 24 - [NEW] ⚡ FigJam • [NEW] 🔥 FigJam - онлай...
0:00 - какой ширины должен быть сайт
1:55 - 8пх сетка в мобильных приложениях
4:16 - как настроить 12 колоночную сетку
6:06 - многие забывают про боковой скрол
7:10 - отступы между колонок
8:05 - full hd мониторы и настройка сетки
9:34 - быстрые сетки из библиотеки
10:28 - сетки для быстрого адаптива
11:34 - как добавлять сетки в библиотеку
13:33 - сетки bootstrap в веб-дизайне
18:48 - комбинированные сетки
19:10 - горизонтальная сетка нужна в вебе?
20:25 - вертикальный ритм лучше горизонтальной сетки
21:19 - как скопировать сетку
21:38 - сетка внутри сетки
22:08 - сетка в дашборде
23:11 - сеткой можно пренебрегать
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 36 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
![[NEW] 🔥 Привязки (constraints) в Figma. Новый нескучный курс по Фигме. Урок 6](http://i.ytimg.com/vi/3jnvH9gSskA/mqdefault.jpg)
![[NEW] 🔥 Привязки (constraints) в Figma. Новый нескучный курс по Фигме. Урок 6](/img/tr.png)
![Модульные сетки в веб-дизайне. Урок для новичков. [Moscow Digital Academy]](http://i.ytimg.com/vi/u2nFV4WJD3s/mqdefault.jpg)
Cпасибо всем за активность под роликом! Давайте поможем ему занять место его запенсионерившегося предшественника!
Всех обнял!
Расскажите, а вы сеткой пользуетесь или на направляющих сидите?)
В фигме сетка - просто благодать! Первое, что делаю при создании нового проекта - настройка сетки, наверное потому что новичок, потому без сетки как без рук))
Сетка win
На моменте 22:08 немного не поняла. Почему меню ставится с самого левого края при разрешении экрана 1920? Это же слепое поле, которое не будет видно при разрешении монитора 1280...
@@user-di1qz4sc3i Я тоже этого не поняла.
@@user-tb4og3uq9m графика в этом случае, как и шапка/подвал, прилипает к краю экрана и подстраивается под экран. А сетка помогает выстраивать именно контентную часть. На средних величинах экрана такие области меню будут просто уменьшать (съедать) количество колонок сетки контентной части в адаптиве, а на малых - прятаться в бургеры и т.п.
Бесплатный курс на ютубе даёт больше пользы, чем курсы по несколько десятков тысяч. А заразительный позитив Алексея - отдельный кайфовый бонус 🔥🔥🔥
ну класс) 🤟☀️🤟
10000%%%%
Это точно!
❤ Я не устану это повторять, но это лучший учитель по софту которого я когда либо проходил. Вот бы Алексея расклонировать на Blender, AE , С4D, DaVinci Fusion, Nuke
спасибо, приятно)
Согласна🎉
Спасибо за такие подробные объяснения! Слушать одно удовольствие!
пожалуйста!
Алексей - человек года! Причем каждого года, пока вы занимаетесь дизайном интерфейсов =))) Это бесконечно полезный для множества людей труд. Смотреть интересно и полезно, да еще и мотивирует!
Спасибо 😊
Честно, меня отталкивали уроки в фигме у других ютюберов, не было энтузиазма, вдохновения. Вы же так зарядили, что я бегу домой поучить и хочется этим заниматься реально, спасибо вам огромное и за очень полезную инфу!!!!
очень рад, что нравится мой формат!
Согласна. Порой кажется что я смотрю какой-то обучающий стендап очень нравятся шутки
Дякую! Стільки інфо, так швидко і легко і весело!
Спасибо за просмотр)
Круто, я даже не знала, что в калькуляторе можно прыгать с зажатым шифтом)) Вставки в конце ролика огонь 😂😂
очень удобно по 10 пх с шифтом значения менять!
Как всегда вовремя!:) Спасибо за бесценный контент! 🥳🙌
вуууху, пожалуйста!
Как всегда все супер понятно и полезно!
ну класс)
Инфа про сетки огонь, долго не могла разобраться какие параметры сетки всё-таки использовать. Теперь все по полочкам👍 спасибо🔥
Супер) Спасибо за просмотр)
Второй раз смотрю ролик и все равно подмечаю для себя что-то новое. Спасибо!
спасибо за пересмотр)
Спасибо большое за урок! Очень много полезной информации.
пожалуйста большое)
Сетки всегда были чем то страшным для меня. После видео - в голове многое прояснилось. Это самое понятное видео из всех, что встечались на просторах инета. Спасибо большое!
ну класс)
Лёша как всегда спасает всех своими удобными фичами
☀️
Я привык серфить все без лайков, а тут возвращаюсь что бы запулить лайк! спасибо за ролик, как всегда жесточайшый огонь ролик!))
с возвращением))
Самый лучший курс по Фигме, не устаю это повторять. Правда смотрится сильно медленно, приходится пересматривать и каждый раз находить что-то, что не запомнил с первого раза)).
рад, что нравится!
Единственные уроки, которые смотрю без увеличения скорости)) все на столько содержательно и динамично, не то, что в некоторых платных полугодовых курсах😁
спасибо за просмотр)
Спасибо большое за урок!✌
пожалуйста!
Большое вам спасибо за курс!
пожалуйста!
Класс. Всегда мучал вопрос с тем, как правильно пользоваться сеткой, а главное ведь чтобы она помогала, а не мешала. Спасибо за эту мысль!
пожалуйста))
Спасибо, ваш труд бесценен! (:
🥳
Кайфанул о речетатива🎉 «я это выговорил» 😂😂 Ты крутой😊
спасибо!
спасибо за работу! как всегда полезно)
пожалуйста!
Большое спасибо за новый нескучный и очень полезный курс
Большое пожалуйста))
Весь курс космос! Большое спасибо за работу!
очень рад!
а это вообще законно так интересно делать! впервые смотрю обучалки и отрываться не охота
Рад, что нравится!
Спасибо огромное за заготовки!
Пожалуйста)
Вау)) люблю твои видео))настроение появляется на весь день) посмотрела перед сном видео, теперь не усну, хочется еще и еще смотреть=) обязательно хочу пройти твой курс=) интересно когда следующий поток)
Супер) так, сейчас уже бронируют места на октябрь alexeybychkov.study/
Супер, спасибо огромное - для начинающих это очень полезный контент❤
пожалуйста!
Спасибо, очень крутой разбор сеток ❤
Супер
Ну как же интересно смотреть!🧡
рад, что нравится!
Как всегда агонь! И с юморком, и скорость не хочется увеличивать)) Столько полезностей за короткое время!
еееее супер)
Давно хотел научиться нормально работать с сетками, спасибо большое за подробное и легкое объяснение! Урок как и всегда - выше всяких похвал💥
научиться в сетки - это отличный план!
Огромное спасибо! Интересно, позитивно!
супер
Очень круто! Большое спасибо! С нетерпением жду 6-й урок :)
большое пожалуйста))
Леша, спасибо 💜! Столько полезной информации, все законспектировано и будет в практике апробировано💪 столько много информации полезной,что 25 мин растягиваются на три часа вместе с записыванием))) клёво,что ты у нас есть!
еееее круто) там в пятницу выйдет ролик на 1 час 40 минут 🤣
@@alexeybychkov_ там как раз два выходных 😅
"Контрл/шифт/4. Ахах, не забыл." - ТОП!!))) Обожаю такие моменты
а то целый ролик записал, а как включить сетку не рассказал 😄
Спасибо за шикарные уроки!
Пожалуйста! Рад, что нравится!
Так интересно и познавательно) одно удовольствие смотреть)
Круто) рад, что нравится!
Спасибо большое, так понятно и по факту без нудятины))) Проходила платные курсы которые и рядом не стояли с вашим высоким уровнем. Такого душевного подхода к обучению всегда не хватало. Теперь у меня есть любимый блогер в этом новеньком деле. Спасибо еще раз)))
ееее очень рад! ♥️
Алескей, каждый урок шикарен! Нигде еще не встречала столько полезного о Figme и это только 5 урок 🔥омайгад! Подача информации отдельный кайф! Горжусь своими Белорусами!
спасибо, приятно 😊
Благодарю за такой крутой курс!
это пожалуйста))
Спасибо, Алексей! Супер!
пожалуйста!
Зажатый Shift+Стрелки....Не не знал, но теперь благодаря этому крутому уроку по сеткам в Фигме знаю...
пару месяцев как для себя открыл (не знаю было ли всегда), но пользуюсь постоянно теперь
Ну как всегда, много полезного контента. Некоторые курс по фигме продавать пытаются, так там еще информации меньше, чем у тебя в бесплатном доступе. Жду пока выйдут оставшиеся серии второго сезона этого сериала 😀
спасибо за просмотр)
Оч круто! Большая благодарочка за полезности
Пожалуйста)
Благодарю за этот бесценный урок!
спасибо за просмотр)
Лучший урок по сеткам, сразу все и разжевано, вялікі дзякуй за кантэнт 😊
Круто) рад, что понравился!
Как же люблю ваш канал! Как возникает конкретный вопрос на конкретную тему - на ютубе в других видео так нуудно рассказывают, перематываешь постоянно в надежде найти ответ а там одна банальная инфа, которая не дает никакой пользы. А тут такой классный канал😊
спасибо, приятно)
Утро доброе, спасибо)
доброе утро))
Урок на высшем уровне!!! Спасибо!
супер)
Про верстальщиков просто огонь, я помню верстал в прошлом и даже кодил на JS и react , VUE js и bootstrap там был, в общем одни ужасы, но это правда правда: важно делать верстальщикам жизнь чуточку проще, выигрывают все, ровный дизайн и довольные верстальщики=)
100% довольный верстальщик еще и заказчику расскажет какой дизайнер молодец
Бомбический урок!) Надо еще раз посмотреть... с конспектиком в зубах))) А то пользы целая плантация! Спасибо ;)
ееее супер)
Я уже не знаю какой раз смотрю это видео. Но каждый раз нахожу что-то новое. Вот сейчас как будто впервые услышала про shift в настройках сетки) клево, что всегда можно вернуться и напомнить себе что-то
спасибо за пересмотр))
Как всегда , ролик на высоте !!!
ну класс) 🚀
За сетки для адаптивов ОГРОМНОЕ спасибо!)
А то каждый дизайнер предлагает свой вариант, а тут золотая середина, тем более от ТОП-дизайнера на фрилансе (судя по Weblancer)
- грешно отказываться от такого подарка).
Успехов!
рад, что пригодились! спасибо!
Алексей, спасибо за видео!! Начала изучать фигму, сплошная нудятина вокруг и тут ваш канал мне во спасение! Останавливаюсь через каждые 5 секунд, хочется записывать каждое слово! Супер! Спасибо!
рад, что нравится)
Вот я такая же 😅 Завела тетрадь даже)
Как всегда классная подача материала. Спасибо за урок!
ну класс)
огромное Вам спасибо, что даете столько полезной информации бесплатно)
это всегда пожалуйста)
И как же было сложно без shift+enter..... Это просто вселенную открыл для меня))))
можно ролик про горячие клавиши!? Ну пожалуйста))))
Вроде был уже такой ролик
@@alexeybychkov_ был, я его смотрела и пользуюсь, а шифт+ энтер не увидела,надо пересмотреть))
Если в название курса вставить слово "ЛУЧШИЙ" - мало того что это будет правдой, так может и еще людям поможет быстрее Вас найти?! )) От курса в восторге! Спасибо ОГРОМНОЕ! ) + к карме наверное уже у Вас зашкаливает))) Всех благ!
Вуууухууу! Спасибо!
Очень круто! Спасибо!)
супер) пожалуйста!
Леша,спасибо тебе! Ну вот правда очень круто объясняешь!Рада,что когда-то нашла твой канал🤗
спасибо за подписку)
уххх, спасибо за ролик🥳) Вспомнила то о чем уже и забыла💪🏻💪🏻💪🏻💪🏻💪🏻
И Лёша, я теперь обучающие ролики других смотреть не могу, все скучные зануды какие-то 😂😂😂
Вууухуу! Рад, что нравится!
Поддерживаю! Лёша затмил всех быстрой речью и весёлой подачей информации)))
@@innasapegina7068
Смотрю сейчас твои уроки по афтеру, и у меня назревает вопрос. КАК ты так быстро стал более раскрепощенным на видео? В старых видео такой скромняжка))
да, ваще старые видео не возможно смотреть))
во-первых, стал все делать стоя. Когда сидишь - совсем другая интонация, и рассказываешь медленнее, нет настроения и тд. А во-вторых, в инстаграме же общаюсь каждый день уже год, вот и разговорился
Очень полезная и важная инфа! Спасибо большое!!! Обожаю твой канал, найдёшь все что нужно!
очень рад!
Спасибо большое за информацию, за труд!
пожалуйста!
Урок супер! Спасибо большое :) Сижу веселюсь с "звоним в alt +3" )))
Маленький вопрос, для понимания, что понимание произошло успешно ))
Сетку и ширину контента мы изначально делаем под монитор с минимальным разрешением (если заказчик не просит другое), а потом фрейм делаем 1920 под стандартный монитор, для того, чтобы уже готовый сайт нормально отображался у пользователей с любым разрешением экрана. Все верно поняла?
ну класс)
Ширину контента (тексты, кнопки, меню и тд) делаем под минимальный размер 1280, а фоны (картинки, изображения на фоне) делаем шире под 1920
@@alexeybychkov_ Я в веб дизайне пока что совсем нуб, поэтому не совсем поняла - Не будет ли на большом мониторе (1920 ), контент, сделанный под минимальный монитор (1280) смотреться нечитабельно (из за того что шрифты некрупные)и отцентрированно? Т.Е будет ли это пустой фон слева и справа портить вид?
@@user-bg9dm4zn5i размер текста не зависит от ширины контентной области. Он такой, каким его решил сделать дизайнер :) А пустые области по бокам сейчас почти на всех сайтах. Этого не надо стесняться
@@alexeybychkov_ Большое спасибо за ответ! А что скажете насчет размеров шрифтов? Есть ли какой-то стандарт, которого непременно нужно придерживаться? Я просто сейчас черпаю информацию, где могу и в некоторых источниках предлагается делать первичный заголовок от 35 до 50 пикс, вторичный - от 25 до 30, текст в параграфах и кнопках 14-17 пикс. Актуальна ли эта информация? Можно отклоняться от этих показателей, чтобы было нормально и если да, то +- на сколько ?
@@user-bg9dm4zn5i текст в кнопках 15-20 пх, больше точно не надо. Размер текста для контента 17-20 пх. На смартфонах 15 px. А с заголовками - лишь бы мелко не было. И было понятно - это заголовок, а не пшик какой-то)) Сейчас такие дизайны, что даже 120 или 200 пх заголовки можно делать, если там 1-2 небольших слова, а так обычно 32-72, в этих пределах
Страшно становится за верстальщиков, зная какая месть их может ожидать)))
😄
Спасибо большое, очередное видео и очередной шедевр объяснений, не перестаю радоваться, что нашла ваш канал)
спасибо за подписку)
Большое спасибо за такой чудесный подарок в виде спроектированных сеток! Love!!!
Большое пожалуйста!
Boostrap ацтой.... Муть полная, вообще как и зачем она появилась на свет.
гнать веслами в старый сарай))
Спасибо за ролики, очень полезно, доступно и нескучно!!
вууухууу! рад, что нравятся!
Не, ну что так волшебно! Спасибо!
🥳
И огромное спасибо за полезнейшие видео по фигме и в целом по веб-дизайну! Все ясно и просто объясняешь.
рад, что нравится!
Благодарю за полезные уроки!)
Пожалуйста)
полезно, нескучно и никакой воды 🔥🔥🔥
ееее супер!
Урок и вообще весь курс - ОГОНЬ! Благодарю!)))
ееее супер))
Спасибо огромное за уроки!)))
Пожааалуйста!
Как всегда узнала много полезного! Супер!
ну класс)
Очень круто, как всегда, спасибо!
супер
Спасибо за интересную и полезную информацию :)
пожалуйста!
Спасибо за видео! Все понятно и доступно объяснено
спасибо за просмотр)
Благодарочка! Каждый раз что-то новое для себя нахожу)
супер
Мега классные уроки 💪🏻
Такие аналогии забавные, некоторые прям на карандаш беру!
ого) какие например?))
Спасибо за труд и обновление! Мои навыки в фигме всё лучше и лучше ☺
ееее круто слышать!
Видео супер! Спасибо, все так понятно))) за шаблоны отдельная благодарность ☺️ буду с удовольствием пользоваться 🤗
пожалуйста)
Спасибо большое за такой классный ролик!
пожалуйста!
Очень круто всё объясняешь🤗 пользуюсь твоими серенькими сетками, спасибо большое 💜💜
супер, пожалуйста!
Спасибо за сеточки и за объяснения!) 🤗
спасибо за просмотр)
Спасибо! Невероятный труд ! Иду по урокам - столько полезной информации!❤️
очень рад)
Спасибо за такую быструю подачу информации, в тоже время увлекательную)) Люблю нескучный курс по фигме!!
рад, что нравится!
Мега полезный ролик, спасибо!
🥳
Как всегда полезно и всё по делу!
супер
Как всегда на высоте, вы лучший!💥
спасибо, приятно)
И снова огромная благодарность за бесценную информацию!!!! За офигенную подачу! За эмоции! 🤩🥳
ееее пожалуйста!
Скорость что надо, быстро четко и по делу)))
супер))
Дядька! Ты крут! Все понятно. Не скучно. Респект!
Спасибо) рад, что нравится!
Круто! Очень! И все на таком позитиве, что хочется смотреть еще и еще))).
супер)