Дизайн-система: как я ускорила разработку в 2 раза

Когда я пришла в проект с CRM для MedTech, там было... много всего 😄

5 ролей пользователей, финансы, документы, интеграции с банками, сплит-платежи, агентские отчёты. Интерфейсы росли как снежный ком, а консистентность? Ну... её не было. Пу пу пу...🙄

Разработчики тратили время на «а как это должно работать?», дизайнеры (то есть я) — на «а почему эта кнопка снова другая?»

Тогда я решила: хватит тушить пожары. Надо строить пожарную безопасность. 🔥

Мой подход к дизайн-системе:

🔹 Сначала аудит, потом порядок Не стала сразу «изобретать систему». Собрала все разрозненные элементы проекта отдельно: все кнопки, поля, состояния, иконки. Без документации, просто чтобы увидеть реальный масштаб «зоопарка» и понять, что действительно повторяется.

🔹 Стилевая библиотека вместо «всё и сразу» Переменные в Figma не заводила — стейкхолдер сразу обозначил: темной темы не будет. Поэтому сделала чистую, логичную библиотеку стилей: цвета, типографика, отступы, тени. То, что закрывает 90% задач без лишней сложности и поддержки.

🔹 Документация — только та, что работает Не стала писать «учебник по компонентам». Вместо этого — короткие правила использования, примеры состояний и «почему так, а не иначе». Чтобы разработчик и новый дизайнер понимали логику за 5 минут, а не за час.

Что изменилось ✅ Время на создание новых экранов сократилось в 2 раза ✅ Меньше багов на стыке «дизайн → разработка» ✅ Команда стала говорить на одном языке ✅ Новые фичи стали запускаться быстрее — бизнес доволен 🎯

Мой принцип: Дизайн-система — это не «проект на полгода». Это живой инструмент, который растёт вместе с продуктом

Как конструктор: собрал базу — и дальше собираешь фичи быстрее, не изобретая велосипед каждый раз. 🚲

P.S. Если твой разработчик говорит «спасибо за дизайн-систему» — это как получить премию. Только чаще. 😄

Дизайн-система: как я ускорила разработку в 2 раза | Сетка — социальная сеть от hh.ru