Дизайн-токены или как я положила дизайнерский прод

Сейчас будет история.
К продукту над которым я раньше работала, было решено добавить второй. Один уже был запущен для пациентов, второй нужно было запустить на стороне врачей. Брендовые цвета должны были быть разные, но в целом компоненты общие.
Решено было сделать всё на токенах, чтобы можно было легко переключаться между экранами двух разных брендов и при этом не плодить элементы дизайна в библиотеке. Ещё одно условие нужно было сделать это в общей библиотеке компонентов, которую используют ещё три других продукта компании)

Я приступила! Предупредила другие команды: «Ребята, я тут немного поколдую, не обновляйте библиотеку пока не скажу». Все окнули. Я вдохновлённо работала, настраивала, тестировал, и вот момент истины.
Я, сияя от гордости, уверенная что всё идеально, говорю: «Обновляйте! Всё готово!»
И тут... БАЦ! В дизайнах у меня всё поехало и у ребят соответственно из других команд тоже. Компоненты послетали, стили поплыли 😁
Я в холодном поту понимаю, что сломала либу. Представляю, как я несколько месяцев исправляю все дизайны коллег на других продуктах.
Вспоминаю, что можно откатить назад (спасибо, фигма).
Откатываю, нахожу проблемы, чиню.
Волшебство всё таки случилось, хоть и парочка седых волос у меня появилась. Можно теперь переключать экраны под разные бренды и использовать токены во всех остальных продуктах компании. Победа!

А теперь коротко, что же такое дизайн-токены: это переменные, которые используются для хранения и повторного использования ключевых значений дизайна. Таких как: цвета, шрифты, отступы, скругления, тени и пр.

Плюсы токенов:

⭐️Единообразие: всё везде красиво и не разнится

⭐️Масштабируемость: хочешь поменять зелёный цвет во всём продукте? Меняешь один токен — и вуаля!

⭐️Кроссплатформенность: токены можно использовать в вебе и на мобильных платформах

⭐️Командная работа: у разработчика и дизайнера заложены одни и те же токены, что ускоряет реализацию нарисованного дизайна

Если вы ещё их не используете обязательно попробуйте внедрить, главное не перемудрить, как я)

Чтобы лучше понять, как они работают — видео токены в фигме

❤️ — полезно
🤚 — жду следующий пост
😁 — весело

⬅️ 5 часть. Отличия HIG от Apple и MD от Google
7 часть. Продуктовые процессы ➡️