Дизайн-система — это не набор кнопок в Figma, а живой инструмент, который ускоряет разработку и обеспечивает консистентность.
Зачем нужна дизайн-система?
- Ускоряет разработку в 2-3 раза
- Обеспечивает единый стиль
- Упрощает онбординг новых разработчиков
- Снижает количество багов в UI
Наш подход
1. Design Tokens
Всё начинается с токенов: цвета, типографика, отступы, радиусы, тени. Мы используем CSS Custom Properties для поддержки тем.
2. Компонентная архитектура
Атомарный дизайн: атомы → молекулы → организмы → шаблоны → страницы.
3. Тёмная и светлая тема
Поддержка тем с первого дня через CSS переменные и data-theme атрибут.
4. Responsive дизайн
Mobile-first подход с плавной адаптацией.
5. Анимации
Framer Motion для продуктовых анимаций с уважением к prefers-reduced-motion.
Инструменты
- **Figma** — дизайн и прототипирование
- **Storybook** — документация компонентов
- **CSS Custom Properties** — токены
- **Framer Motion** — анимации
Каждый наш продукт начинается с дизайн-системы — это инвестиция, которая окупается на первом же спринте.