Почему стили в Figma — прошлый век
Привет, Хабр! Меня зовут Игорь Бутков, я старший дизайнер в компании Friflex. Мы занимаемся разработкой мобильных приложений и веб-сервисов.
Сегодня я расскажу, почему стили в Figma больше не подходят для современных дизайн-систем и как вместо них использовать токены. Всем, кто помнит, как я рассказывал об этом на CrossConf — привет!
Почему стили — все
В Figma стили представляют собой отдельные, не связанные между собой значения. Поэтому, если в крупной дизайн-системе нужно изменить основной цвет, придется вручную обновлять каждый стиль по отдельности.
Пример: замена цвета #2688EB на другой потребует правки во всех стилях, где он используется вручную. Эту проблему отлично решают дизайн-токены.
Что такое дизайн-токены?
Токены — это переменные, которые хранят значения цветов, отступов, шрифтов, размеров и других параметров интерфейса. Они позволяют управлять значениями централизованно: вместо того, чтобы вручную менять каждый стиль, достаточно обновить значение токена.
Главное отличие токенов от стилей в том, что токены можно связать друг с другом, чтобы обновлять сразу все связанные элементы.
Преимущества токенов:
Гибкость — изменения в одном месте распространяются на всю систему.
Скорость — процесс редизайна упрощается, уменьшается количество рутинных задач.
Консистентность — обеспечивается единый стиль интерфейса без расхождений.
Экономия ресурсов — сокращается время работы дизайнеров и разработчиков, что снижает затраты компании.
Где находятся токены в Figma?
При открытии любого проекта справа отображаются его настройки — стили, эффекты, подключаемые плагины и остальное. В этой же панели сверху есть вкладка Local variables. При нажатии иконки напротив откроется окно значений, в котором мы и будем добавлять дизайн-токены и работать с ними.
С чего начать?
На начальном этапе важно определить, какую семантику мы будем использовать при создании дизайн-токенов, чтобы придерживаться ее в дальнейшем. От того, насколько правильно мы подберем семантику, будут зависеть скорость и удобство нашей работы. Семантика зависит от задачи проекта, под который мы создаем токены, и от его дальнейшего масштабирования.
Ниже рассмотрим типы семантических слоев.
0. Базовые значения (нулевой слой)
Содержит основные параметры:
HEX-коды цветов;
Размеры отступов и радиусов скруглений;
Шрифтовые параметры.
1. Корневой слой
Определяет общие цветовые растяжки с учетом контраста. Например, он может включать оттенки, рассчитанные по формулам с учетом контрастности.
Задается палитра на основе выбранной цветовой модели.
Какую цветовую модель выбрать?
Две наиболее популярные цветовые модели:
HSL (Hue, Saturation, Lightness) — известна и поддерживается всеми браузерами и IDE. Но контрастность цветов зависит от оттенка, и цвета с одинаковой насыщенностью могут восприниматься по-разному.
LCH (Luminance, Chroma, Hue) — позволяет создавать цвета с одинаковой яркостью, которые успешно проходят тесты на контрастность. Это удобно для формирования цветовых градиентов и семантических палитр.
HSL
Преимущества:
Поддерживается всеми браузерами и IDE.
Удобно управлять насыщенностью и яркостью.
Недостатки:
Контрастность цветов зависит от оттенка.
Не всегда подходит для цветовых градиентов.
LCH
Преимущества:
Обеспечивает равномерную контрастность.
Отлично подходит для генерации цветовых палитр.
Недостатки:
Ограниченная поддержка браузерами.
Требует конвертации для использования в CSS.
2. Семантический слой
Семантический слой — абстрактные названия не самого цвета, а его роли (например, background.primary).
Токены получают смысловые названия, связанные с их функцией: text.primary, background.error, border.focus.
Плюс: компактный и понятный набор токенов.
Минус: нельзя адресно поменять цвет конкретной кнопки.
3. Компонентный слой
Компонентный слой — токены задают значения для конкретных элементов.
Например, button.primary.default — цвет основной кнопки, на которую навели мышь. Он берет значение из корневого слоя или из семантического слоя.
#7E5CFF > purple-500 > background.primary > button.primary.default
Чтобы покрыть все компоненты, таких токенов должно быть очень много. В отличие от кода, компонентный слой не так часто используется в Figma.
Плюс: точечный контроль над компонентами.
Минус: слишком много токенов в системе, можно запутаться.
Как называть дизайн-токены?
Токены и компоненты можно назвать предельно конкретно. Например, сиреневую акцентную кнопку можно назвать button.purple, текстовый стиль с шрифтом Lobster 12 кегля — text.lobster.12, а токен отступа в 8 px — spacer.8. Это удобно в моменте.
Но что, если завтра бренд решит изменить цвет кнопки на розовый? Розовая акцентная кнопка с именем button.purple будет нарушать логику — в этом проблема явного нейминга. Чтобы ее избежать, можно использовать систему абстрактного нейминга, где название токена содержит не цвет, а его роль.
Явный нейминг
Плюс: все понятно без пояснений.
Минус: сложно что-то менять.
Абстрактный нейминг
Плюс: легко менять стили без переименования токенов.
Минус: значения не считываются сходу, нужно объяснить команде, чтобы всем был понятен принцип.
Если проект стабильный — удобнее будет явный нейминг. Если планируются изменения или масштабирование — лучше абстрактный.
Как обозначить числовой шаг?
Есть два подхода:
Маечный (S, M, L) — привычно, но сложно добавлять промежуточные размеры (что между M и L?).
Числовой с большим шагом (100, 200, 300) — удобно для системы, где много размеров (не нужно выдумывать 2XL, 5M, как в маечной системе). Легко добавить промежуточный размер — например, 250 или 225. Но если в команду приходит новый сотрудник, важно ему объяснить, чему соответствует 100 и другие размеры. С маечной системой такой проблемы нет — эта размерная сетка знакома и в обычной жизни.
Как выбрать семантику?
Все зависит от проекта:
Если продукт стабильный и не предполагает больших изменений — проще использовать явный нейминг и маечные размеры.
Если продукт развивается и может меняться — лучше абстрактный нейминг и числовая система. Это сложнее, но дает гибкость.
Расскажите в комментариях — вы за токены или по-прежнему используете стили?
