Компоненты в Фигме. Часть 2: Variants в Figma

Второй урок, посвящённый компонентам. В этот раз разбираемся как работать с набором компонентов — variants. По сути, это набор компонентов, который помогает в том случае, когда их очень много для одного и того же элемента. Например для кнопки, у которой есть несколько состояний, несколько размеров и она может быть содержать иконку или состоять только из обводки вместо заливки.

Навигация по видео:
00:00 — Начало урока
00:40 — Для чего нужны variants
02:20 — Как называть компоненты внутри вэриантс
05:28 — Первый способ создания variants
06:46 — Второй способ создания variants
07:55 — Настройка свойств вариантов
10:07 — Как добавлять новые компоненты внутрь variants
12:11 — Как добавлять описание к компонентам
13:45 — Финальный финал

#figma #фигма #дизайн

[ndancer]

Все какими-то костылями использовал в вариантах. Блин, спасибо! Видел в Figme в чужих дизайн системах, но теперь сам понимаю. За On/off отдельный респект🎉❤!

[fraupin]

Огромное спасибо за такие четкие, понятные объяснения, я наконец-то начала понимать что это и зачем!))

[Lumyyyyyy]

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

[natakarachevtseva]

Спасибо! Все предельно ясно. Полезная вещь - варианты

[ИсториянаготовимсякЕГЭ]

Два видео про варианты до этого я посмотрела - вообще ничего не поняла. А тут за 9 минут всё разложено по полочкам. Спасибо вам огромное

[hrantyeghiazaryan]

большое спасибо тебе я смотрел очень много туториалы как что нужно делать как разобраться в фигме но некто так понятно и досконально не объясняет ))) очень жду новых видео. Ещё раз спасибо!!!

[ultrapolyarnoevtorzhenie]

Огромное спасибо за такой контент! Сколько я мучилась с компонентами в целом, а тут бац и вся информация без лишней воды мигом залетела! Восторг 😍

[vitek]

Очень крутой урок! Спасибо за столь подробное и сжатое изложение без лишней воды! Несколько раз пересмотрел, повторил. Все работает))

[DarlixSlee]

Очень полезный материал. Очень хочется урок по автолэйаут от вас

[ОксанаВилкова-не]

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

[plrchk]

Спасибо за видео❤ С удовольствием в работе)

[tinakrinitsyna]

Спасибо😍 самое понятное видео про варианты)

[Nordictt]

Спасибо! Очень легко и понятно! Лучший

[ДарьяКособуцкая-мж]

Круто! Оказывается, что все не так страшно) Спасибо! очень полезно 💜
Может будет видос, в каком виде сдавать макет разработчикам (в каком разрешении должен быть макет; обязательно ли делать адаптив, если не было оговорено с клиентом; как формировать UI KIT, что в нем должно быть)? Спасибо)

[IodaSik]

Спасибо за очень понятное и полезное видео 🔥👍

[nadialy]

Спасииибоооо! Это мега круто и мега понятно)))

[Vladyslav-lvbi]

Не работали корректно варианты, потому что не правильно подписывал. Теперь понял причину

[nikinad]

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

[ЕвгенийАксенов-то]

А раз уж мы уже создали все эти кнопки, почему бы просто не использовать Ctr c -> Ctr v (Копировать -> вставить) ?

[aharito]

Фигма оставляет у меня двоякое впечатление. Дело в том, что я хорошо верстаю и знаю CSS. Да, Фигма на голову выше Фотошопа для веб-дизайна. Сам компонентный подход похож на БЭМ. Но отрисовать 48 кнопок, задать им все параметры, отступы... А если потом нужно увеличить внутренние отступы для всех "L" кнопок?

В БЭМ я просто поменяю 24 на 32 в CSS-правиле .btn_size_lg { padding: 20px 24 px; } - и всё. А в Фигме нужно переделать все L-кнопки... В общем, похоже, что Фигма - это чисто для дизайнеров, кто не верстает. А для человека, знающего верстку, проще сразу на сайте это делать, особенно если юзать Scss.

P.S. Только плиз без обид 😉 поправьте, если я не прав.
P.P.S. Тем не менее, Фигма мне интересна, спасибо за видео!