Названия слоёв

Единая система названий слоёв упрощает работу над проектом для всех команд. Слои нужно называть понятно, лаконично и консистентно — это важно при создании компонентов для UI-библиотек и оптимизирует обработку макетов плагинами. Название конечного слоя должно совпадать с названием его фрейма-обёртки — тогда все изменения instance в макетах (тексты, цвета, иконки) не будут слетать при обновлении родительских компонентов в библиотеках.

Примеры названий

Текстовый фрейм или компонент

• Text — фрейм или компонент (деталька), где есть только текстовые слои. Исключение: поле ввода, где во фрейме Text может быть и слой с текстом, и слой с курсором ввода. Если нужно обернуть текст в дополнительный промежуточный фрейм, его тоже называем Text

Текстовый слой

• Title — заголовок. Если в компоненте есть несколько разных по смыслу и одинаковых в иерархии текстовых слоёв, то можно добавить нумерацию: Title 1, Title 2, Title 3
• Subtitle — подзаголовок
• Input — текст в поле ввода
• Unit — единица измерения: рубли, евро, км
• Label — лейбл или название: плейсхолдер для автозамены в разных состояниях компонента
• Body — основной текст
• Details — детали или подробности
• Info — дополнительная информация
• Value — значение или стоимость
• Description — описание
• Status — статус
• Button — кнопка, если кнопка контекстная в компоненте (пример: нint banner)
• Number — номер или цифра: пропущенные уведомления в бэйдже на иконке приложения
• Bonus — бонусы, например, СберСпасибо или мили
• Agreement — пользовательское соглашение

Другие слои в компонентах

• Content — фрейм-обёртка для объединения нескольких сущностей
• Icon — слой с фреймом и компонентом иконки, которую можно менять. Если в компоненте используется только одна конкретная иконка, то фрейм называется как иконка: cross, plus, dot
• Cross — кнопка закрыть в виде иконки
• Disclosure — стрелка раскрыть список в поле выбора
• Drag — ползунок/индикатор возможности перетаскивать или тянуть компонент
• Divider — разделитель
• Chips — чипсы или элементы управления выбором
• Counter — пошаговый переключатель с кнопками + и -
• Suggest — подсказка или предложение в полях ввода
• Tab — вкладка
• Stepper — степпер, индикатор шагов
• Timer — индикатор таймера
• Timeline — динамичная линия прогресбара
• Progress — группа элементов динамического процесса
• Accordion — стрелка, чтобы раскрыть или свернуть контент
• Search Field — поле ввода поискового запроса
• Сarriage — индикатор текстового ввода, курсор или каретка
• Status Bar — статус бар
• Avatar — фото аккаунта или контакта
• Switch — переключатель
• Checkbox — чекбокс для множественного выбора
• Radio — радиокнопка для единственного выбора
• Image — картинка, фото
• Fade — затемняющий прозрачный слой или градиент на картинке