Что входит в UI-кит
Кит состоит из основ и элементов. Основы — общие значения цвета, текста и теней, на которые ссылаются элементы: цвет акцента правят в одном месте, а не в каждой кнопке.
Цвета
Палитра бренда, нейтральные оттенки для текста и фона, цвета статусов: успех, внимание, ошибка.
Типографика
Стили заголовков, текста, подписей и кнопок: шрифт, размер, межстрочный интервал.
Тени, отступы, иконки
Два-три уровня теней, шкала отступов и один набор иконок в одной толщине линии.
Базовые элементы
Кнопки, поля, чекбоксы, переключатели, теги, аватары — во всех состояниях: обычное, наведение, фокус, ошибка, отключено.
Составные элементы
Карточки, формы, навигация, диалоги. Их собирают из базовых элементов, а не рисуют заново.
Какие бывают UI-киты
Киты различаются тем, откуда они взялись и для чего нужны.
| Вид | Что это | Когда подходит |
|---|---|---|
| Готовый универсальный | Платный или бесплатный набор элементов на все случаи | Учебный проект, быстрая проверка идеи, внутренний сервис без своего стиля |
| Кит платформы | Элементы операционной системы в их родном виде: навигация, меню, клавиатура | Приложение должно выглядеть как часть системы |
| Кит продукта | Собственный набор команды, выросший из экранов продукта | У продукта свой стиль, и его будут развивать |
| Вайрфрейм-кит | Серые блоки и заглушки без цветов и шрифтов бренда | Схемы экранов на ранней стадии |
Кит продукта часто начинают с готового и заменяют его части по мере роста. Серые схемы разобраны в статье вайрфрейм.
Чем UI-кит отличается от дизайн-системы и библиотеки
Коротко: UI-кит — это сами элементы, библиотека — способ раздать их другим файлам, а дизайн-система — элементы вместе с правилами и порядком изменений.
| Понятие | Что это | Чем отличается от UI-кита |
|---|---|---|
| Библиотека компонентов | Опубликованный файл, из которого другие файлы берут компоненты и стили | Это способ доставки: кит становится библиотекой, когда его публикуют для команды |
| Шаблон экрана | Готовый экран или страница целиком | Шаблон собран из элементов кита: кит — детали, шаблон — сборка |
| Стайлгайд | Описание визуальных правил: цвета, шрифты, отступы, тон текстов | Описывает правила словами и примерами, но готовых элементов не даёт |
| Дизайн-система | Токены, компоненты, документация и порядок изменений | Включает кит и добавляет к нему «почему так» и «как менять» |
Подробнее о системе — в статье дизайн-система, о значениях, на которых держатся стили кита, — в статье дизайн-токены.
Как сделать UI-кит в Morfa
Кит собирают из компонентов: компонент — образец, экземпляры на экранах повторяют его. Свойства подробно разобраны на странице компоненты и варианты, а стартовый файл можно взять из шаблонов: «Начать с шаблона» → «UI-кит».
Начните с основ
Заведите стили цвета, текста и эффектов. Значения, которые зависят от темы, например цвет фона, храните в переменных с режимами.
Нарисуйте первый элемент
Соберите кнопку во фрейме (F) и добавьте автолейаут (⇧A). С размером «Обтянуть» кнопка подстраивается под длину подписи.
Сделайте компоненты и варианты
Каждое состояние сделайте компонентом («Создать компонент», ⌥⌘K), выделите их и выберите «Объединить как варианты». Следующее состояние добавит «Добавить вариант».
Добавьте свойства
Подпись — свойство «Текст», иконка, которую можно выключить, — «Логическое», замена вложенной иконки — «Замена экземпляра».
Опубликуйте библиотеку
Если кит нужен другим файлам, выберите «Файл → Опубликовать библиотеку…». После правок участники видят «Доступны обновления библиотеки…» и сами нажимают «Обновить».
Частые ошибки при сборке UI-кита
Кит портится не от рисунка, а от того, как его собирают и называют.
- Копии вместо экземпляров. Скопированная кнопка не знает о правках образца, и через месяц на экранах живут пять разных кнопок.
- Цвета введены вручную. HEX в каждом слое не поменять разом. Подключайте стили цвета или переменные.
- Только обычное состояние. Без наведения, фокуса и отключённого вида разработчик придумает их сам. Если назвать варианты «Наведение», «Нажата», «Фокус» и «Отключена», в коде они станут :hover, :active, :focus-visible и :disabled.
- Названия по виду, а не по роли. «Синяя кнопка» перестанет быть правдой после смены бренда, а «Основная» — нет.