Организация цветовой палитры через Color Variables | Воркшоп #1 | UI-kit 

очень полезные воркшопы! пожалуйста, делай еще)))

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

Даниил, спасибо за крутой контент! Сейчас буду активно применять эти новые фичи в своих проектиках) Запилил таймкоды 0:00 - [1 часть] интро 1:47 - заставка видеоконференции Figma Config 2023 2:20 - уровни организации цветовой палитры (обзор ошибок) 5:42 - цель воркшопа, что получим в итоге 6:50 - [2 часть] способы организации палитры 10:22 - демонстрация тестового кейса с ui-kit с применением Color Variables 12:00 - [3 часть] токены 13:05 - максимально сосредоточились 16:12 - переменные element: bg, text, icon (принцип Бритвы Оккама «Не следует множить сущее без необходимости») 17:02 - переменные role: primary, secondary, critical (terteriary), caution (accent), success 18:15 - переменные variant: strong, subdued 19:09 - переменные state: hover, active 19:42 - наглядный пример использование такой семантики 24:04 - [4 часть] практика 24:15 - работа с Variables, создание палитры основных цветов 31:50 - создание палитры акцидентного цвета 35:40 - почему лучше создавать палитру в отдельной коллекции 36:45 - создание токенов на основе палитры: border 39:30 - text 45:27 - icon за 2 секунды 45:40 - bg 49:40 - создание темной темы 50:25 - что-то поломалось, но на самом деле ничего-)

Спасибо огромное за урок, соглашусь с другими - лучший на русскоязычном ютубе!

Мужик, спасибо тебе за токены!

Господи боже мой, спасибо большое за урок, взялся за проект, чтобы в него врубить такой подход и теперь это начинает становиться похоже на что-то более интуитивно понятное, что я долго хотел. Чтобы другим дизайнерам понятнее было, чтобы разработчики лишний раз не крутили. Сижу улыбаюсь, пробую, какие-то кусочки пересматриваю! Спасибо!)

Большущее спасибо!🙏 Не знала как подступиться к variables и организовать понятную цветовую палитру. Ваше видео - кладезь полезной информации

Спасибо! У вас замечательная манера изложения. Хотелось бы побольше таких информативных видео. Желаю процветания вашему каналу!

Какой крутой и полезный видос. Токены перестали быть чем-то оверсложным. Спасибо за твой труд!😊

Класс! Мне нравится что вы показываете как всё применять на практике

Дань, видос - кайф, спасибо большое) 😊

спасибо большое!! Жду новых видео на канале, уверена, что многие тут с нетерпением ждут новый контент :))

Спасибо за видео, сэкономило несколько вечеров разбирания в теме)

Огромную работу сделал! Спасибо тебе огромное!🎉

очень круто, спасибо за контент

Это топчик! Спасибо. Подписка!

Спасибо за твой труд. Много полезного узнал!

молоток! Информативно, спасибо!

Даниил, спасибо за ролик на довольно сложную и актуальную тему! Надеюсь, будешь еще делиться своими знаниями.

Благодарю за проделанную работу, очень полезная информация. Очень жду продолжения!

Просто огонь! Мощный инструмент! Большое спасибо за доходчивое изложение сути!

Очень информативно. Спасибо большое❤

Классный ролик, буду ждать еще)

Спасибо, чув. Максимально приятно впитывать.

ты супер крутой) классно, интересно мысли излагаешь. Очень понятно объясняешь на примерах

Подписка, очень крутой коннтент!

Отличный материал, продолжай в том же духе, колокольчик 100пр )

Привет, я твой новый подписчик Классный и полезный видос. Тема довольно трудная, но ты помог лучше разобраться 🔥🔥

спасибо тебе! супер полезно, понятно и ты прямо закрыл много вопросов + прокачал еще лучше Фигма скилы :)

Очень круто, такого не хватает на ютубе!

Крутая подача инфорамации, все четко и понятно без лишней воды, респект!👍 ps. еще хочу попросить, если это возможно, поделиться ссылкой на UI Kit Playground, который присутствовал на видео, было бы круто применить твой опыт в своих проектах, спасибо!

Большое спасибо! Мего полезный контент)) Осталось только понять, как теперь эти знания встроить в существующую библиотеку стилей))

Спасибо, чувак ты бог ))))

Прекрасное видео! Мозг, правда, ушёл отдыхать после него 😅

ЛУЧШИЙ!!!!!

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

Блин, я случайно удалила комментарий о том, что перелопатила ранее весь тырнет в поиске подобной инфы. Оставляю повторно. Ещё раз спасибки за контент!

Привет! Спасибо за видео, может быть я пропустил, но почему цвета ты делаешь через прозрачность? Почему не просто задание параметров hsl?

Спасибо за ролик! Подскажите, а что за шрифт на превью?

Какой-какой плагин? Я про начало, который помогает стили завести... Очень полезная информация, очень интересная подача, очень жду новых видео!)

Для больших систем цветовые токены, выстроенные на прозрачности не очень подходят - они тяжелее за счет альфы. Но если брать их разумно - обводка, подсветка кнопок (ховер, дизайбл и т.д.) - то да..

Привет, хорошее видео) А твой ui кит, часть которого ты показывал, это что? Твоя разработка, или опен ресурс? Можешь поделиться, хотя бы частью которая на видео, довольно уж приятно выглядит 👉🏻👈🏻

Как я понял ты разбил основную палитру на суб-оттенки, но ведь это альфа-каналы, почему ты сделал именно так? Разве не лучше разбивать цвета без изменений прозрачности? Это ведь сыграет злую шутку. А вообще видео топ, буду рад если ответишь в каких случаях применяются альфа-каналы и почему ты сделал именно таким образом

Даниил, спасибо за воркшоп, просто в сердечко!!! Подскажите как так круто организован UI-kit еще и с демонстрацией работы компонента??

Понравилась идея с альфа цветами, а можешь подскзаать какую-нибудь популярную дизайн систему, построенную по такому принципу? Material, Atlassian, Ant, Uber и тд - все они делают SOLID палитру. Хотелось бы почитать гайдлайны с твоим подходом

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

Классный видос! Есть вопрос - насколько корректно использовать разные значения Opacity для градации цвета? Помню работал в командах, где разрабы требовали чтобы были полноценные цвета со 100% opacity

Благодарю за вокршоп, в нем прекрасно всё! У меня вопрос: какой плагин используете / можете порекомендовать для автоматизированного описания созданной палитры и токенов?

Добрый день Возник вопрос. Почему именование цвета с трехзначным числом, всегда ли оно такое и почему? Возможен ли нейминг по типу blue1, blue2; red-1, red-2; green-a, green-b, oxra_I, oxra_II; ?

Спасибо, Даниил, за интересный воркшоп! Полезная тема, кое-что новое узнал :) Помимо структуры токенов и палитры понравилась организация компонентов в сетку из фреймов, каждый из которых можно просмотреть в окошке превью inline 👍 Единственное, с чем не согласен, так это использование цветов в качестве токенов верхнего уровня: blue, red, orange & green. В данном случае нарушается абстрактность и семантика. На мой взгляд, лучше использовать более абстрактные имена, чтобы была привязка с смыслу, а не свойствам: cta, brand, etc. В остальном получилось отличное видео! Давно не встречал таких качественных уроков в русскоговорящем сегменте ;) Спасибо еще раз!

51:10 это прототип ты показываешь? (все кнопки работают при наведении и нажатии). Просто не видел, как ты его создавал и привязок не увидел, запутался немного)

45:22 для текста (в Color Scoping) оставили только «Text», затем скопировали всю группу токенов и переименовали копию в «icon». А какой Color Scopng для «icon» делать или также и оставлять «Text»?

Спасибо большое за материал, может быть кто-то сможет подсказать - почему у нас начинается именование цветов с mail (тут понятно), а потом blue-600? откуда именно 600? почему не 789? буду признательна за ответ или полезные ссылки)

Спасибо огромное за твою работу, Даниил! ❤Возник вопрос: а как именовать элементы в макетах, если есть 2 коллекции? Пример: есть текст в макете без цветового стиля. Могу подцепить исключительно цвет из первой коллекции (black/main), а могу text/primary/black/main из второй. Понятно, что второе логичнее, но тогда пакетом быстро не сделать, придется каждый элемент вручную цеплять к переменным :( И ещё кое-что :) Color Styles теперь не надо заводить, если Variables есть?

Привет! Крутое видео, спасибо) Хотел спросить, ты сам все изучал или обучался у кого-то?

Так и сотворил наш мир творец - по токенам и переменным, а иначе ни как :)

Привет! Большое спасибо за видео! Я веб-дизайнер и в поисках улучшения подкапотки в проектах со мной поделились ссылкой сюда) У меня для себя стоит цель найти какую-то гибкую систему, чтобы держать в порядке макеты, более быстро что-то новое собирать, поддерживать проект в случае появления новых разделов, чтобы другим дизайнером тоже понятно было и чтобы не ломалось ничего другими людьми Подскажи пожалуйста на каком этапе такое лучше собирать? Если брать этап концепции для сайта какой-то компании, то будет ещё непонятно, думаю, какие цвета и где + дополнительно ограничивать кажется будет и времени на концепцию уйдет больше. Наверное стоит так делать, когда уже есть согласованная концепция и нужно проектировать остальные макеты?

Почему выбираешь такие проценты для прозрачности? Чую что это не с проста такие значения, но могу уловить

Приветик, а как быть, если у меня для ховеров существуют градиенты?

Мозг кипит 😮

Вопрос, почему опасити? Разработке же больно от нее

Что значит Undate?

Берем цвет в плагин и он гернерирует стили ... 2м плагином из стилей в варианты