Дизайн-система YouplanДизайн-система Youplan

Проект начинался без дизайнера: интерфейс собирали на Ant Design и локальных решениях. Я превратил это в систему, на которой теперь работают все 13 разделов платформы — в макетах и в коде

моя роль

Выстроил дизайн-систему: от ролей цвета и тем до продуктовых компонентов и правил переноса в код

Project team

1 PM1 PO1 Analyst1 Designer2 Frontend3 Backend

Результат в цифрах

5 234 размещения компонентов в рабочих макетах

Это не витрина ради витрины: библиотека собрала реальные экраны расписания, табеля, сотрудников и настроек

Все 13 разделов опираются на одни правила

Команда использует общие роли цвета, типографику, состояния и продуктовые паттерны вместо локальных решений

Светлая и тёмная темы меняются целиком

Семантические токены отделяют смысл цвета от конкретного оттенка — новый экран не приходится перекрашивать вручную

Системы не было — был Ant Design без правил

До появления дизайнера интерфейс собирали по ситуации: часть решений брали из Ant Design, часть придумывали прямо в задачах. Цвета, плотность и состояния расходились от экрана к экрану, а общей логики не существовало

Я начал не с библиотеки кнопок, а с разбора продукта: собрал используемые решения, сценарии и состояния, отделил универсальные правила от специфики YouPlan. Это стало фундаментом, на котором можно развивать новые разделы без очередного локального набора UI

UI до дизайн-системы

Сначала задал роли цвета, а не просто палитру

Фон, текст, границы, статусы и акценты получили смысловые токены. Их значения отдельно настроены для светлой и тёмной тем, поэтому тема меняется на уровне системы, а компоненты сохраняют смысл и контраст

Компоненты строил вокруг сценариев продукта

Таблицы, фильтры, поля и меню спроектированы вместе с рабочими состояниями: плотностью, фокусом, ошибкой, загрузкой и отключением. Система отвечает не только на вопрос «как выглядит», но и «как работает»

Отдельно решил продуктовую задачу со сменами

Клиент сам задаёт цвета типам работ, поэтому палитра стала параметром системы. Одна ячейка принимает 17 цветовых вариантов, сохраняет читаемость и одинаково работает в обеих темах

Итог

Система стала рабочим слоем продукта: на ней собраны все 13 разделов, компоненты повторены в React, а команда может проверять решения в живом прототипе. Её ценность не в количестве элементов, а в том, что новые сценарии наследуют общие правила вместо очередного локального UI