Когда продукту действительно нужна дизайн-система
Дизайн-систему часто начинают слишком рано и превращают в отдельный проект, который никому не нужен. Или слишком поздно — когда в продукте уже пять вариантов кнопки. Разберём признаки того, что пора.
Признаки, что система нужна
- одинаковые элементы выглядят по-разному на разных экранах;
- дизайнеры и разработчики тратят время на вопросы «какой тут отступ и какого цвета»;
- новый экран собирается дольше, чем должен, потому что всё рисуется с нуля;
- в проекте работают несколько команд или подрядчиков, и результат расходится.
Признаки, что рано
Если продукт — это пять экранов и один дизайнер, полноценная система будет избыточной. Хватит файла с цветами, шрифтами, отступами и десятком базовых компонентов. Систему стоит строить из того, что уже повторяется в продукте, а не из воображаемых будущих потребностей.
С чего начать
- Токены. Цвета, типографика, отступы, радиусы и тени как именованные значения, а не числа в макетах;
- Базовые компоненты. Кнопки, поля ввода, ссылки, карточки, модальные окна — со всеми состояниями (наведение, фокус, ошибка, отключено);
- Правила использования. Коротко: когда какой компонент применять, а когда нет;
- Одно место правды. Библиотека в дизайн-инструменте и компоненты в коде должны совпадать по названиям.
Как не заморозить разработку
Развивайте систему итерациями: каждый новый экран добавляет в неё то, чего не хватило. Так система растёт вместе с продуктом и всегда проверена реальными задачами. Отдельный «год на дизайн-систему» почти всегда заканчивается тем, что ею никто не пользуется.
Как понять, что система работает
Новый экран собирается из готовых частей за часы, а не за дни. Разработчик не задаёт вопросов про отступы. Правки в брендинге вносятся в одном месте и доходят до всего продукта. Об единых формулировках интерфейса — в заметке про тексты интерфейса.