Смотреть фото
Назад
В студии одновременно шли несколько продуктов, и каждый дизайнер собирал кнопки и поля заново. Одинаковые элементы отличались на пару пикселей, разработчики каждый раз уточняли отступы, а запуск нового проекта начинался с копирования чужого файла.
Нужна была не библиотека на один продукт, а система, которая переживёт смену бренда: одни и те же компоненты под разные фирменные стили и темы.
Былопод тёмную тему собирали второй комплект компонентов.
Сталосветлая, тёмная и контрастная темы переключаются токенами. Компонент один, оформление подставляется.
Быломакет отдавали картинкой, отступы разработчик мерил линейкой.
Сталоавто-лейаут и варианты, названия свойств совпадают с пропсами в коде.
Былопод каждого клиента библиотеку пересобирали с нуля.
Сталоподменяется набор токенов, вся система перекрашивается следом.
Дизайн-система это не набор кнопок, а договорённость команды, записанная в файле.
Система стала основой для новых проектов студии и ушла в Figma Community — её можно скопировать себе и адаптировать под свой продукт. Я обучал дизайнеров работать с ней и вёл правки после релиза.
Система живёт ровно до тех пор, пока ей удобно пользоваться. Самой полезной частью оказалась не библиотека, а документация и обучение: без них через месяц команда снова начала бы собирать компоненты руками.
Второй вывод — закладывать смену бренда сразу. Мультитемность, добавленная в начале, стоила недели, а потом экономила по спринту на каждом новом клиенте.
Следующий кейс
AI-ассистент под NDA