B2B
Web
Sigma
Токены цвета
Данный кейс не является полным отображением выполненной работы — он передаёт лишь принцип. Самой работы было в разы больше, но показать её полностью я не могу по причине NDA.
Задача.
Создание тёмной темы в рамках обновлённого визуального стиля и дизайн-системы компании Sigma. Разработка структуры цветовых токенов для удобства масштабирования и консистентности дизайна. Использование возможностей вариативности в Figma для ускорения работы над интерфейсом и оптимизации процесса дизайна.
Исследование.
После уборки это выглядело как-то вот так: жутко страшно, много и непонятно, что к чему относится. Предстояло завести систему токенов, интегрировать её в проект и добавить тёмную тему
На момент, когда я взялся за задачу, библиотека цветов выглядела, мягко говоря, печально. Цвета задавались либо просто HEX-кодом, либо брались из каких-то непонятных переменных, названных программистами, как им хотелось. Не было системы, и цвета добавлялись по необходимости. В итоге это сильно затягивало разработку и создавало хаос как в коде, так и в интерфейсе пользователя.
Для того чтобы привести всё это в порядок, в начале я запросил у разработчиков все цвета, которые когда-либо использовались. Получился огромный хаотичный список. После этого я систематизировал хотя бы схожие друг на друга цвета и подогнал под них весь остальной зоопарк. Получилось чище, и с этим уже можно было работать.
Для того чтобы привести всё это в порядок, в начале я запросил у разработчиков все цвета, которые когда-либо использовались. Получился огромный хаотичный список. После этого я систематизировал хотя бы схожие друг на друга цвета и подогнал под них весь остальной зоопарк. Получилось чище, и с этим уже можно было работать.
Решение.
После наведения порядка получилось чище, но пока без цветов для тёмной темы. Теперь предстояло проверить, как эти цвета лягут в дизайн, а это значило, что необходимо пройти по всем страницам и найти, что могло потеряться. Цветов, конечно же, было больше, но показывать всё мне не разрешили. Иллюстрация отражает принцип работы.
Изучив разные подходы и, что важно, проблемы, которые возникают во время масштабирования и изменения компонентов, я выбрал подход, при котором цвета присваиваются сущностям.
К примеру, у цветов текста есть несколько вариаций: основной цвет, второстепенный цвет, третичный и, что немаловажно, есть цвета, которые не меняются в зависимости от смены темы с тёмной на светлую. В сторону этого подхода подталкивает даже Figma, которая позволяет при создании вариантов запретить использование цвета фона для текста, что уменьшает количество ошибок при создании макетов.
К примеру, у цветов текста есть несколько вариаций: основной цвет, второстепенный цвет, третичный и, что немаловажно, есть цвета, которые не меняются в зависимости от смены темы с тёмной на светлую. В сторону этого подхода подталкивает даже Figma, которая позволяет при создании вариантов запретить использование цвета фона для текста, что уменьшает количество ошибок при создании макетов.
Тёмная тема.
Добавляем цвета тёмной темы для каждого из цветов. Важно не упустить, что есть контрастные цвета, которые могут не меняться в зависимости от смены темы — для таких заводятся отдельные токены с названием ...Invariably. Также важно было в инструменте вариаций добавить правила для использования цветов только в тех компонентах, к которым они относятся.
Что в итоге?
В итоге получилась крепкая и гибкая система цвета, в которой каждым элементом можно управлять отдельно. Разработчики завели цветовые токены в код, а тестировщики и я перестали проверять каждый цвет на странице. Использование токенов после их внедрения ощутимо сократило стоимость и время разработки. Подготовка макетов стала комфортной, и появилось больше времени на концепты и проработку UX.
