{cherkashin.dev}
← Все посты

15 декабря 2023 г. (изменено: 23 сентября 2024 г.)

Канал: @cherkashindev

773
#design #architecture

📺 Дизайн токены

Сегодня я порекомендую несколько докладов о дизайн токенах

1️⃣ MoscowJS 49 — Дизайн-система на фронтенде — Сергей Володин

Сергей рассказывает, как первый редизайн почты и других продуктов mail.ru — “где нужно было поменять только цвет” занял неделю и в нём участвовали 10 человек.

В итоге они поняли, что что-то не так с их архитектурой, и что одного компонентного подхода не достаточно. Mail.ru — большая компания, и на разных проектах могут быть разные технологии. Но помимо этого, ещё определённо будут разные платформы — не только веб, но и, например, мобилки. В таком случае у вас физически нет возможности заставить использовать всех одну и туже библиотеку компонентов.

Чтобы ускорить разработку, в проекте должна использоваться дизайн-система. Дизайн-система — язык, на котором описываются интерфейсы. Это не просто UI Kit, дизайн-система описывает как работать со шрифтами, как правильно компоновать компоненты, описывает анимации и прочее. К тому же, дизайн-система должна быть платформо-независимой.

И далее рассматриваются:

  • Дизайн токены — ядро дизайн системы.
  • Проектирование API компонентов. Что интересно, они запретили прокидывать в компоненты className и инлайн стили.
  • Как реализовывать темы.

2️⃣ Токены в дизайн-системах / Юрий Ветров (Mail.Ru Group)

Еще один доклад от Mail.Ru. Здесь подробно рассказывается о том, как происходила унификация различных продуктов в компании, почему библиотека компонентов не решила все проблемы и как помогли дизайн-токены.

3️⃣ Дизайн-система на токенах в Figma, коде и проде – Константин Подрубный, Wrike

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

Ещё по теме:

👍 1