С чего начать дизайн-систему
Полноценная дизайн-система — это не только UI-кит, а набор правил, компонентов и процессов, который масштабируется вместе с продуктом.
1. Токены
- Зафиксируйте цветовые токены: базовые, текстовые, фоновые, акцентные.
- Создайте типографическую шкалу: заголовки, body, подписи.
- Определите токены отступов и размеров на модульной сетке.
- Используйте Variables в Figma для тем и масштабирования.
2. Компоненты
Собирайте систему по принципам Atomic Design: атомы → молекулы → организмы. Все ключевые элементы делайте на Auto Layout.
Для состояний применяйте Variants: state (default/hover/disabled), size, icon и другие свойства в одном компоненте.
3. Документация
- Опишите, когда использовать каждый компонент и когда не использовать.
- Зафиксируйте правила доступности, контрастов и поведения состояний.
- Ведите changelog, чтобы команда видела эволюцию системы.
- Опубликуйте библиотеку Figma и подключайте ее к рабочим файлам.
Итог
Сильная дизайн-система сокращает время на дизайн и разработку, повышает консистентность и снижает стоимость изменений.
