Дизайн-система
Синонимы: design system, система дизайна, DS, component library, design language
NAME
Дизайн-система — дизайн и ux
DESCRIPTION
Дизайн-система (Design System) — единый источник правды для дизайна и разработки продукта. Это не просто набор компонентов (как UI-кит), а живой организм: принципы, ценности, гайдлайны, компоненты, код, документация. Дизайн-система обеспечивает консистентность продукта на всех платформах (web, iOS, Android) и ускоряет разработку в 3-5 раз.
Слои дизайн-системы:
| Слой | Что включает | Для кого |
|---|---|---|
| Философия | Ценности, тон голоса, миссия | Все в компании |
| Принципы дизайна | «Простота», «Доступность», «Скорость» | Дизайнеры |
| Фундамент | Цвета, типографика, сетка, иконки, отступы | Дизайнеры + разработчики |
| Компоненты | Кнопки, формы, карточки (Figma + код) | Дизайнеры + разработчики |
| Паттерны | Готовые решения задач (login, checkout) | Продуктовые команды |
| Документация | Как использовать, примеры, do/don't | Все |
Известные дизайн-системы (ориентиры):
- Material Design (Google) — эталон для Android и веба
- Human Interface Guidelines (Apple) — iOS и macOS
- Shopify Polaris — e-commerce, открытый код
- Atlassian Design System — B2B-продукты (Jira, Trello)
- IBM Carbon — корпоративные решения
- Yandex Cloud UI — российский пример
Зачем нужна дизайн-система (бизнес-выгода):
- Скорость разработки — готовые компоненты, не пишем с нуля
- Консистентность — одинаковый UX во всех продуктах компании
- Масштабирование — новые продукты запускаются за недели, а не месяцы
- Онбординг — новый сотрудник изучает систему за 2-3 дня
- Доступность (a11y) — проверяется один раз в системе, а не в каждом проекте
- Снижение техдолга — нет зоопарка из 50 разных кнопок
Когда нужна дизайн-система:
- ✅ В компании 3+ продукта
- ✅ Команда 5+ дизайнеров и 10+ разработчиков
- ✅ Продукты на разных платформах (web + mobile)
- ✅ Частые редизайны и обновления
- ❌ НЕ нужна для лендинга или небольшого сайта (достаточно UI-кита)
Процесс создания (от 3 до 12 месяцев):
- Аудит — собираем все существующие компоненты из продуктов
- Выявление паттернов — что повторяется, что можно унифицировать
- Дизайн компонентов — в Figma с вариантами
- Разработка кода — React/Vue/Angular библиотека
- Документация — Storybook, Zeroheight
- Внедрение — постепенная миграция продуктов
Инструменты:
- Figma — дизайн компонентов (Variables, Auto Layout, Variants)
- Storybook — документация кода компонентов
- Zeroheight — платформа для публикации DS
- Tokens Studio — дизайн-токены (синхронизация Figma ↔ код)
- GitHub — версионирование кода
Кейс WEBVISUAL: Клиент — финтех-стартап (3 продукта: web-кабинет, iOS-приложение, Android-приложение). Было: 3 разные команды, 3 разных стиля, дублирование работы. Построили дизайн-систему за 4 месяца:
- 68 компонентов (Figma + React Native + Swift + Kotlin)
- Дизайн-токены (цвета, шрифты, отступы) синхронизируются автоматически
- Документация в Storybook с примерами использования
- Гайдлайны доступности (WCAG 2.1 AA)
Результат: время разработки новых фич сократилось с 3 недель до 5 дней. Новые продукты (платёжный шлюз, API-портал) запустили за 2 месяца вместо плановых 6. Экономия на разработке за год: ~12 млн ₽. Бюджет создания DS: 2.8 млн ₽ (окупился за 3 месяца).
СМ. ТАКЖЕ
Figma(7), UI-кит(7), Доступность(7)