Разработка цветовых токенов для мобильного приложения начинается с определения групп цветов: primary, secondary, error, success, surface и disabled. Выберите базовый цвет для каждой группы, опираясь на брендовые цвета для primary и secondary, красный для error и зеленый для success.
В каждой группе создайте токены, такие как [name], active_[name], on_[name], [name]_container, active_[name]_container и on_[name]_container, для основных групп. Для surface используйте surface_low, surface, surface_high, on_surface, on_surface_variant, inverse_surface и inverse_on_surface. Для disabled – disabled_low, disabled и disabled_high. Используйте HSL режим для настройки оттенков, меняя только значение lightness.
Создайте семантический уровень токенов с человекочитаемыми названиями. При необходимости создайте компонентный уровень, группируя токены для каждого UI-компонента (например, кнопки). Назначьте цвета из семантики токенам компонентного уровня, затем примените их к компонентам, скрыв видимость переменных.
Для передачи токенов разработчикам, экспортируйте их из Figma с помощью плагина (например, variables2json). Очистите лишний код в текстовом редакторе (Sublime Text) и преобразуйте в формат, удобный для Android и iOS, с помощью ChatGPT, согласовывая его с разработчиками.
Изображение носит иллюстративный характер
В каждой группе создайте токены, такие как [name], active_[name], on_[name], [name]_container, active_[name]_container и on_[name]_container, для основных групп. Для surface используйте surface_low, surface, surface_high, on_surface, on_surface_variant, inverse_surface и inverse_on_surface. Для disabled – disabled_low, disabled и disabled_high. Используйте HSL режим для настройки оттенков, меняя только значение lightness.
Создайте семантический уровень токенов с человекочитаемыми названиями. При необходимости создайте компонентный уровень, группируя токены для каждого UI-компонента (например, кнопки). Назначьте цвета из семантики токенам компонентного уровня, затем примените их к компонентам, скрыв видимость переменных.
Для передачи токенов разработчикам, экспортируйте их из Figma с помощью плагина (например, variables2json). Очистите лишний код в текстовом редакторе (Sublime Text) и преобразуйте в формат, удобный для Android и iOS, с помощью ChatGPT, согласовывая его с разработчиками.
