Комментарии 11
В этом всём мне нравится, что figma variables называются в статье токенами. Что намекает на то, что автор сам не разобрался в том, что такое токен, и приравнял переменные только у дизайнера к дизайн-токену.
А сами токены отлично жили на стилях в фигме и без нативной поддержке переменных. Живут и до сих пор, особенно когда переезд на переменные экономически не выгоден.
Все верно, я допустил ошибку при использовании термина "дизайн-токен" в первой части статьи. Разумеется, имелись в виду переменные в Figma. Поправили. Спасибо за конструктивный комментарий!
Там у вас не только в понятиях проблема, но и в работе со стилями. В той части где все замены делаются вручную, а вот переменные...
В нормальных дизайн-системах только инструментарием фигмы не ограничиваются, и есть масса плагинов и приблуд, которые обновляют стили из json каскадно, а сами палитры можно хоть в веб приложении отдельном генерировать, главное чтобы был совместимый формат хранения.
Уже было подумал, что пропустил тот момент, когда в Фигме появился LCH. Пошел проверять и не нашел. Или речь о нем просто для справки?
В Фигме LCH нет. Надеюсь, что появится, как и OKLCH.
В целом, почти к каждому тезису статьи хочется накинуть претензий. Те же переменные отлично подключаются в стили, с чем статья спорит.
Вы в фигму давно заходили? Давно есть hsl при выборе цвета и в dev моде
hsl = LCh
Если HSL = LCH, зачем тогда нужен последний? А зачем тогда нужен OKLCH, о котором в Фигме я мечтаю уже который месяц?
HSL — это всего лишь надстройка над RGB, которая делает последний более человечным, отделяя оси цветового тона от яркости и насыщенности. В то время как LCH и его улучшенная OK-версия — это вообще другое. Это перцептивные модели, которые не просто меняют оси у RGB, а дают гарантию, что при движении по одной оси характеристики других осей не изменятся.
Буквально: двигаясь по Hue в HSL/HSB у нас скачут воспринимаемые яркость и насыщенность. В OKLCH такого не происходит, и именно в этом его смысл, а не в том, что это еще одна вариация HSL.
В Фигме поддержки LCH нет. Нет ни пикера, ни способа задать цвет численно.
речь о том, что есть возможность задать численно hsl. речь про полную поддержку не идет
Говорить, что в Фигме есть поддержка LCH, потому что там HSB/HSL-пикер и можно забирать цвет в HSB и HSL — супернекорректно. Когда говорят про LCH и OKLCH, сразу подразумевают их ОТЛИЧИЯ от базовых моделей. А главное отличие именно в перцептивности.
Если б HSL решал задачи LCH, никто бы и не парился по поводу последнего. Попробуйте нагенерить в HSB пару десятков цветовых палитр, одни и те же уровни в которых будут иметь равные яркости и насыщенности.
P3 пространства не всеми дисплеями и браузерами (отрисовщиками) поддерживаются. Чего уж про фигму говорить. В большинстве кейсов, даже если использовать и передавать LCH, велика вероятность, что будет конвертация на стороне браузера в sRGB.
У https://atlassian.design/tokens/design-tokens классный дизайн кит, в свое время много на его изучение и создание на его основе своей ДС потратил
Почему стили в Figma — прошлый век