Из чего состоит дизайн-система
Обычно выделяют шесть частей. Первые три видны в макете, последние три держат систему вместе: без них она превращается в набор файлов, который каждый понимает по-своему.
| Часть | Что это | Пример |
|---|---|---|
| Принципы | Утверждения, которые помогают выбрать между двумя решениями | «Одно главное действие на экране» |
| Основы и токены | Именованные значения цвета, типографики, отступов, скруглений, теней | «Фон/Основной», «Отступ M» = 16 |
| Компоненты | Элементы интерфейса с вариантами, состояниями и свойствами | Кнопка в четырёх видах и трёх состояниях |
| Паттерны | Типовые решения из нескольких компонентов | Форма входа, пустой список, подтверждение удаления |
| Документация | Когда использовать элемент, когда нет и как он себя ведёт | «Не ставьте две основные кнопки рядом» |
| Порядок изменений | Кто предлагает и принимает правки, как выходят версии | Компонент попадает в библиотеку после проверки и с описанием изменений |
Дизайн-система, UI-кит, стайлгайд и брендбук
Все четыре описывают, как выглядит продукт, но отвечают на разные вопросы. Система не заменяет брендбук и кит: она опирается на первый и включает второй.
| Понятие | Отвечает на вопрос | Что внутри | Кто пользуется |
|---|---|---|---|
| Брендбук | Как выглядит бренд везде | Логотип, фирменные цвета и шрифты, правила для рекламы и печати | Маркетинг, дизайнеры, подрядчики |
| Стайлгайд | Какие визуальные правила у интерфейса | Цвета, шрифты, отступы и тон текстов в виде описания | Дизайнеры |
| UI-кит | Из чего собрать экран | Готовые элементы со стилями и состояниями | Дизайнеры |
| Дизайн-система | Как строить и менять интерфейс всей командой | Токены, компоненты, документация, порядок изменений и код | Дизайнеры, разработчики, менеджеры продукта |
Подробно о ките — в статье UI-кит, о самых мелких частях системы — в статье дизайн-токены.
Как растёт дизайн-система
Систему редко проектируют целиком заранее. Обычно она проходит пять ступеней, и на любой можно остановиться, если продукту этого хватает.
- Стили. Цвета и текст вынесены из слоёв и меняются в одном месте.
- UI-кит. Повторяющиеся элементы стали компонентами с вариантами.
- Библиотека. Кит опубликован, и все файлы команды берут элементы из одного источника.
- Токены и код. Значения стали переменными, а в коде у них те же имена, что в макете.
- Документация и порядок изменений. У компонентов есть описания, у системы — хозяин и правила выпуска версий.
Где части системы живут в Morfa
У каждой части есть своё место в редакторе. Пошаговая сборка, от коллекции переменных до выгрузки токенов в код, описана на странице для дизайн-систем.
| Часть системы | Где в Morfa |
|---|---|
| Токены | Переменные «Цвет», «Число», «Строка», «Логическое» в коллекциях; режимы для тем; «Сослаться на переменную» |
| Типографика, тени, сетки | «Стили текста», «Стили эффектов», «Стили сетки» |
| Компоненты | «Создать компонент» (⌥⌘K), наборы вариантов, свойства «Вариант», «Логическое», «Текст», «Замена экземпляра» |
| Документация | Описание компонента, аннотации (Y) с категориями «Разработка», «Взаимодействие», «Доступность», «Контент» |
| Распространение | «Файл → Опубликовать библиотеку…», окно «Обновления библиотек» с изменениями «было / стало» |
| Версии | «Сохранить версию…» (⌥⌘S) перед выпуском; веток нет |
| Код | Вкладка «Код» и «Экспорт в React…» с файлами src/tokens.css и src/tokens.ts |
Если поменять значение переменной, обновятся все слои файла, у которых к ней привязано свойство: заливка, отступ, скругление. Файлы, подключившие библиотеку, получат новое значение, когда примут обновление. Подробнее — на странице переменные и режимы.
Частые ошибки
Систему чаще всего портят решения, принятые в самом начале.
- У системы нет хозяина. Каждый правит компонент под свой экран, и через полгода в библиотеке три разные основные кнопки.
- Документация отдельно от файла. Описание в другом сервисе отстаёт от компонентов. Держите правило в описании самого компонента.
- Обновления не принимают. В Morfa обновление библиотеки не применяется само: пока участник не нажал «Обновить», его файл живёт на старой версии.