Организация цветовой палитры через Color Variables | Воркшоп #1 | UI-kit
HTML-код
- Опубликовано: 29 июн 2023
- мой тг-канал t.me/+2Q738JTfRfoxOWNi
Консультации по портфолио и собесам в дизайн студии и продукты clck.ru/39yssA
В формате воркшопа показал как можно использовать Color Variables на проекте. А ещё рассказал про организацию цветовой палитры через alpha (прозрачность), токены и их организацию, чтобы освоить новые возможности с должной осознанностью.
очень полезные воркшопы! пожалуйста, делай еще)))
Самый лучший урок о применении переменных и токенов в Фигма в русскоязычном ютуб. Очень долго искал такой урок. Даниил, спасибо огромное ))))
Спасибо огромное за урок, соглашусь с другими - лучший на русскоязычном ютубе!
Даниил, спасибо за крутой контент! Сейчас буду активно применять эти новые фичи в своих проектиках) Запилил таймкоды
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 - что-то поломалось, но на самом деле ничего-)
Класс! Мне нравится что вы показываете как всё применять на практике
Дань, видос - кайф, спасибо большое) 😊
Спасибо за видео, сэкономило несколько вечеров разбирания в теме)
Господи боже мой, спасибо большое за урок, взялся за проект, чтобы в него врубить такой подход и теперь это начинает становиться похоже на что-то более интуитивно понятное, что я долго хотел. Чтобы другим дизайнерам понятнее было, чтобы разработчики лишний раз не крутили. Сижу улыбаюсь, пробую, какие-то кусочки пересматриваю! Спасибо!)
Спасибо! Рад что оказалось полезным 🤝
@@eldanielleee было бы интересно ещё посмотреть про типографику, организацию этого момента в проектах. Кажется там тоже много тонкостей. Если конечно не только у меня интересует эта тема и актуально
@@vllladek2117 Как только фигма выпустит варианты, обязательно сделаю)
Спасибо! У вас замечательная манера изложения. Хотелось бы побольше таких информативных видео. Желаю процветания вашему каналу!
Спасибо 🙌 новое видео выйдет на следующей неделе
Огромную работу сделал! Спасибо тебе огромное!🎉
Даниил, спасибо за ролик на довольно сложную и актуальную тему! Надеюсь, будешь еще делиться своими знаниями.
Большущее спасибо!🙏
Не знала как подступиться к variables и организовать понятную цветовую палитру. Ваше видео - кладезь полезной информации
Мужик, спасибо тебе за токены!
спасибо большое!! Жду новых видео на канале, уверена, что многие тут с нетерпением ждут новый контент :))
Просто огонь! Мощный инструмент! Большое спасибо за доходчивое изложение сути!
☺️ спасибо
очень круто, спасибо за контент
Это топчик! Спасибо. Подписка!
Благодарю за проделанную работу, очень полезная информация. Очень жду продолжения!
Спасибо за твой труд.
Много полезного узнал!
молоток! Информативно, спасибо!
Какой крутой и полезный видос. Токены перестали быть чем-то оверсложным. Спасибо за твой труд!😊
Классный ролик, буду ждать еще)
Рад слышать 🙌 скоро будет
Очень информативно. Спасибо большое❤
Спасибо, чув. Максимально приятно впитывать.
ты супер крутой) классно, интересно мысли излагаешь. Очень понятно объясняешь на примерах
Очень круто, такого не хватает на ютубе!
Спасибо! Новое видео уже в производстве 🙌
Привет, я твой новый подписчик
Классный и полезный видос. Тема довольно трудная, но ты помог лучше разобраться 🔥🔥
Подписка, очень крутой коннтент!
Отличный материал, продолжай в том же духе, колокольчик 100пр )
спасибо тебе! супер полезно, понятно и ты прямо закрыл много вопросов + прокачал еще лучше Фигма скилы :)
Крутая подача инфорамации, все четко и понятно без лишней воды, респект!👍
ps. еще хочу попросить, если это возможно, поделиться ссылкой на UI Kit Playground, который присутствовал на видео, было бы круто применить твой опыт в своих проектах, спасибо!
Большое спасибо! Мего полезный контент)) Осталось только понять, как теперь эти знания встроить в существующую библиотеку стилей))
Спасибо, чувак ты бог ))))
Прекрасное видео! Мозг, правда, ушёл отдыхать после него 😅
ЛУЧШИЙ!!!!!
Спасибо большое за видео, было очень полезно. Жаль, пока нельзя задавать переменные для размеров шрифтов.
🙌🙌🙌
Ага, надеюсь добавят.
А, новое видео уже в работе, скоро выпущу)
Привет! Спасибо за видео, может быть я пропустил, но почему цвета ты делаешь через прозрачность? Почему не просто задание параметров hsl?
Привет, хорошее видео)
А твой ui кит, часть которого ты показывал, это что? Твоя разработка, или опен ресурс? Можешь поделиться, хотя бы частью которая на видео, довольно уж приятно выглядит
👉🏻👈🏻
Привет!
Это мои компоненты, которые я реиспользую на новых проектах, чтобы каждый раз не тратить время)
Спасибо за ролик! Подскажите, а что за шрифт на превью?
✊
TT Hoves
Даниил, спасибо за воркшоп, просто в сердечко!!! Подскажите как так круто организован UI-kit еще и с демонстрацией работы компонента??
Спасибо! 🫶🏻
На самом деле там нет рокет сайнс) просто построены интерактивные связи внутри компонента через режим прототипирования
Неожиданно просто, спасибо😉😊@@eldanielleee
Спасибо, Даниил, за интересный воркшоп! Полезная тема, кое-что новое узнал :)
Помимо структуры токенов и палитры понравилась организация компонентов в сетку из фреймов, каждый из которых можно просмотреть в окошке превью inline 👍
Единственное, с чем не согласен, так это использование цветов в качестве токенов верхнего уровня: blue, red, orange & green. В данном случае нарушается абстрактность и семантика. На мой взгляд, лучше использовать более абстрактные имена, чтобы была привязка с смыслу, а не свойствам: cta, brand, etc.
В остальном получилось отличное видео! Давно не встречал таких качественных уроков в русскоговорящем сегменте ;) Спасибо еще раз!
Спасибо 🙌 скоро запишу ещё
По цветовым группам. Более абстрактные - как раз blue, а более конкретные - brand. Думаю вы имели в виду «конкретные». Соглашусь, это действительно лучше, если у продукта есть брендбук.
@@eldanielleee Нет, имел в виду как раз абстрактные, не привязанные к какому-либо цветовому значению или оттенку. К примеру, если основной цвет бренда поменяется с синего на зеленый, то значение blue в качестве основного цвета будет смотреться совсем не к месту 😄 В случае с абстрактным именованием (типа brand или cta) просто поменяется цветовое значение и готово. Но это, возможно, дело вкуса)
@@NektoDesigner Тут нужно вам еще одну прослойку добавлять для всего что касается бренда.
Итого будет вложеность с цветами блу/ред/пинк потом будет все что касается бренда праймари как раз и секондари и т.д. но это только цветов бренда касается. и тогда бг брендовый может быть праймари, или может быть оттенком серого. И тогда в праймари мы можем записать блу или при необходимости заменить его на любой другой.
Видимо что то такое имелось ввиду, или нет?
@@renk_vladyslav желательно все токены не привязывать к какому то определенному значению, а не только брендовые цвета. Тут речь уже об оптимизации, и это более глубокий уровень, но смысла добавлять в токен success значение green, blue и тд., если есть другое, семантическое название, нету, зачем?
@@dan9oct может не правильно написал.
Имел ввиду что для брендовых цветов можно отдельно слой сделать.
Условно примитивы ок мы сделали, красный синий желтый, например.
Сделали бренд, и сейчас он к синему привязан.
Сделали токены, и к ним бренд привязали отдельно.
Если бренд поменялся, мы в этом слое меняем его с синего на красный например, и на ас не нужно в примитивах менять синий на красный.
Надеюсь так понятнее
Какой-какой плагин? Я про начало, который помогает стили завести...
Очень полезная информация, очень интересная подача, очень жду новых видео!)
Блин, я случайно удалила комментарий о том, что перелопатила ранее весь тырнет в поиске подобной инфы. Оставляю повторно. Ещё раз спасибки за контент!
Как я понял ты разбил основную палитру на суб-оттенки, но ведь это альфа-каналы, почему ты сделал именно так? Разве не лучше разбивать цвета без изменений прозрачности? Это ведь сыграет злую шутку. А вообще видео топ, буду рад если ответишь в каких случаях применяются альфа-каналы и почему ты сделал именно таким образом
Классный видос! Есть вопрос - насколько корректно использовать разные значения Opacity для градации цвета? Помню работал в командах, где разрабы требовали чтобы были полноценные цвета со 100% opacity
Да корректно, почему нет) таких продуктов много. Просто нужно исходить не из собственного желания, а из понимания задач, которые предстоит решать. Где-то метод не подойдут, где-то зайдёт на ура)
Для больших систем цветовые токены, выстроенные на прозрачности не очень подходят - они тяжелее за счет альфы. Но если брать их разумно - обводка, подсветка кнопок (ховер, дизайбл и т.д.) - то да..
Понравилась идея с альфа цветами, а можешь подскзаать какую-нибудь популярную дизайн систему, построенную по такому принципу? Material, Atlassian, Ant, Uber и тд - все они делают SOLID палитру. Хотелось бы почитать гайдлайны с твоим подходом
Чтобы прям почитать - особо нет ничего(
Напиши в Гугле «каталог отечественных дизайн-систем» и смотри файлы
Еще в проекте «Домашка» собрано большое кол-во ссылок на дизайн-системы. Напиши в тг
Из продуктов, которые используют такой подход: Dovetail
Добрый день
Возник вопрос. Почему именование цвета с трехзначным числом, всегда ли оно такое и почему? Возможен ли нейминг по типу blue1, blue2; red-1, red-2; green-a, green-b, oxra_I, oxra_II; ?
Привет! Можно использовать любые названия, если у вас нет какие-либо ограничений (например бренд-бук), в противном случае лучше синхронизировать нейминг с другими артефактами ДС.
Благодарю за вокршоп, в нем прекрасно всё!
У меня вопрос: какой плагин используете / можете порекомендовать для автоматизированного описания созданной палитры и токенов?
Спасибо! Честно говоря, у меня нет такого плагина, потому что нет потока проектов, где я могу его применять) работаю в продукте. У нас есть чатик про компоненты, там больше 300 человек, можно спросить там) ссылка в описании к роликам
51:10 это прототип ты показываешь? (все кнопки работают при наведении и нажатии). Просто не видел, как ты его создавал и привязок не увидел, запутался немного)
Ага, это интерактивность. В этом видео я эту задачу не делал)
Вопрос по поводу прозрачности для серых оттенков в бордерах и bg. Как решается проблема наложения элементов, например, линий в таблицах и графиках, пересечениях дивайдеров со скроллом и др?
Хороший вопрос. Приходите к нам в чатик, он есть в описании. Нас там почти 200) ребята тоже могут подсказать
Спасибо большое за материал, может быть кто-то сможет подсказать - почему у нас начинается именование цветов с mail (тут понятно), а потом blue-600? откуда именно 600? почему не 789? буду признательна за ответ или полезные ссылки)
Привет! Крутое видео, спасибо) Хотел спросить, ты сам все изучал или обучался у кого-то?
Привет! Не, просто методом проб и ошибок) накосячил - прорефлексировал - в следующий раз сделал лучше
45:22 для текста (в Color Scoping) оставили только «Text», затем скопировали всю группу токенов и переименовали копию в «icon». А какой Color Scopng для «icon» делать или также и оставлять «Text»?
Спасибо огромное за твою работу, Даниил! ❤Возник вопрос: а как именовать элементы в макетах, если есть 2 коллекции? Пример: есть текст в макете без цветового стиля. Могу подцепить исключительно цвет из первой коллекции (black/main), а могу text/primary/black/main из второй. Понятно, что второе логичнее, но тогда пакетом быстро не сделать, придется каждый элемент вручную цеплять к переменным :( И ещё кое-что :) Color Styles теперь не надо заводить, если Variables есть?
Привет! Спасибо ❤️
1. Есть плагин, который собирает инфу о всех стилях в проекте и дает возможность назначать новые. Поищи в комьюнити, я сам не пользовался, необходимости не было, но знаю что есть. Если прям затык будет, поищу тебе)
2. К сожалению, вэриблс пока не умеют хранить градиенты, поэтому в некоторых случаях приходится и то, и то юзать.
Привет! Большое спасибо за видео! Я веб-дизайнер и в поисках улучшения подкапотки в проектах со мной поделились ссылкой сюда) У меня для себя стоит цель найти какую-то гибкую систему, чтобы держать в порядке макеты, более быстро что-то новое собирать, поддерживать проект в случае появления новых разделов, чтобы другим дизайнером тоже понятно было и чтобы не ломалось ничего другими людьми
Подскажи пожалуйста на каком этапе такое лучше собирать? Если брать этап концепции для сайта какой-то компании, то будет ещё непонятно, думаю, какие цвета и где + дополнительно ограничивать кажется будет и времени на концепцию уйдет больше. Наверное стоит так делать, когда уже есть согласованная концепция и нужно проектировать остальные макеты?
Привет!
Если речь про новый продукт, то да)
но на практике... бывает так, что даже макеты в порядок не приводишь, потому что тупо нет времени
@@eldanielleee спасибо большое!
ох, а я всё бывает самобичуюсь, что в проектах не получается навести порядок. я просто думал, что это я какой-то плохой и у нас как-то так плохо, а все успевают и прибирают, настраивают и тд. А получается, что так бывает
Так и сотворил наш мир творец - по токенам и переменным, а иначе ни как :)
Почему выбираешь такие проценты для прозрачности? Чую что это не с проста такие значения, но могу уловить
Они плюс-минус дают нужные оттенки, но опять же, лучше всегда перепроверять) обязательно примеряй со своими кейсами и чекай через A11 Color contrast
Приветик, а как быть, если у меня для ховеров существуют градиенты?
Сложно сказать, надо конкретный кейс смотреть. Возможно, метод с прозрачностью не подойдет. Если зовёшь, запиши лум и скинь в тг, чекну
Мозг кипит 😮
Берем цвет в плагин и он гернерирует стили ... 2м плагином из стилей в варианты
Что за плагин?
Что значит Undate?
Могли бы контекст дать?)
@@eldanielleeeпервые 1,5 минуты на экране
@@sunuvugun ахахахах, блин я только щас заметил. Update имел в виду 😅
На качество материала эта досадная очепятка не повлияла :)
@@eldanielleee тут не поспоришь. Спасибо за детали и нюансы! 💜
@@eldanielleee я думала специально "п" на русском - креативность)
Вопрос, почему опасити? Разработке же больно от нее
Да, расскажите, плиз, как разработчики к этому относятся?