Создание дизайн-системы для крупного проекта

Зачем нужна дизайн-система

На старте у клиента был хаотичный UI: дублирующиеся компоненты, разные отступы, нестыкующиеся шрифты. Каждая новая фича тянула за собой «свой стиль». Это мешало масштабировать продукт, повышало стоимость поддержки и раздражало пользователей.

Мы предложили решение — внедрить единую дизайн-систему с кодовой библиотекой компонентов, токенами и документацией. Цель: ускорить разработку и создать визуально целостный продукт.

---

Этап 1: Аудит и инвентаризация

Мы собрали все существующие интерфейсы и провели UI-инвентаризацию:

• выделили повторяющиеся шаблоны;
• зафиксировали отклонения;
• определили приоритетные компоненты (кнопки, поля, карточки).

Результат — живая Figma-доска с тегами, метками и статусами.

---

Этап 2: Система токенов

Чтобы централизовать управление стилем, мы ввели токены:

• Цвета (semantic-first: primary, on-surface, warning)
• Шрифты и размеры
• Радиусы, тени, spacing

Все токены связаны с Figma Variables и экспортируются в код (JSON + CSS Custom Properties). Это обеспечило единый источник правды между дизайнерами и разработчиками.

---

Этап 3: Компоненты

Каждый компонент имеет:

• Дизайн-спеку (в Figma, с вариантами состояний)
• Vue-реализацию (<script setup>, строгая типизация)
• Тесты + примеры использования
• Документацию в Storybook

Мы внедрили правила: всё новое — только через компонентную библиотеку. Уровень кастомизации — через слоты, токены и пропсы.

---

Этап 4: Документация

Для внутренней команды мы создали портал:

• Компоненты с интерактивным Playground
• Гайдлайны по отступам, сетке, цветам
• Коммуникационные паттерны (ошибки, уведомления, пустые состояния)
• Дизайн-принципы, чек-листы, changelog

Система документируется как продукт — обновляется вместе с кодом.

---

Эффект от внедрения

• Повторное использование: 80% новых экранов собираются из готовых блоков.
• Время на фичу сократилось в среднем на 30%.
• Дизайнеры и разработчики работают синхронно, без дублирования.
• Пользовательский интерфейс стал предсказуемым и целостным.

---

Хотите свою систему?

Если у вас в проекте:

• UI растёт хаотично,
• время на ревью постоянно увеличивается,
• баги в интерфейсе повторяются —

это значит, что пора внедрять единый подход.

📩 Обратитесь к нам — поможем с аудитом, проектированием и запуском полноценной дизайн-системы под ваш стек и задачи.