Теги компонентов
Единая справка по системе тегов в названиях компонентов: что обозначает каждый тег, как именовать компоненты и можно ли их переиспользовать.
Тег — это пометка в названии компонента, которая сообщает его роль и принадлежность. Теги делятся на два независимых семейства:
-
Теги-префиксы (в начале названия) — что это за компонент по роли. Общие для всей дизайн-системы.
-
Теги-суффиксы (в конце названия) — кому принадлежит компонент и можно ли его переиспользовать. Про продукт и продуктовую команду.
Оси независимы: у компонента может быть только префикс, только суффикс, оба сразу или ни одного.
Сводная таблица
| Префикс | (нет) | Базовый компонент DS |
| Префикс | DP | Design Pattern — готовая сборка |
| Префикс | Dev Example | Эталон вида и свойств для разработки |
| Суффикс | AF (2 буквы) | Принадлежность продукту (Astra Fintech) |
| Суффикс | XXX (3 части) | Принадлежность продуктовой команде |
| Префикс | ❌ Depricated | Устаревший компонент (не поддерживается на будущее) |
| Префикс | Page | Страница с фиксированным поведением (атомарный дизайн) |
| Префикс | Template | Шаблон страницы, наполняется через пропсы |
Семейство 1. Теги-префиксы — роль компонента
Стоят перед названием. Описывают, какую роль компонент играет в системе и для кого он сделан. Общие для всей дизайн-системы.
Базовый компонент (без префикса)
Что это. Основной, «боевой» компонент дизайн-системы, заточенный под сборку макетов дизайнерами.
Особенность. Внутри уже включены и подставлены через swap-свойства наиболее часто используемые вложенные компоненты. Это удобно дизайнеру, но скрывает реальную структуру и полный набор свойств — поэтому для разработчиков существует отдельный .Dev Example.
Dev Example
Назначение. Демонстрационный компонент, показывающий разработчику, как базовый компонент должен выглядеть на самом деле и какими свойствами обладать.
Зачем нужен. Базовый компонент заточен под дизайнеров: в нём уже подставлены через swap частые вложенные компоненты, из-за чего разработчику сложно увидеть реальную структуру и полный набор свойств. Dev Example раскрывает «эталонный» вид и поведение в чистом виде.
Правило именования. Dev Example {название компонента}
Аудитория. Разработчики — как референс при реализации.
Важно. Не используется в боевых макетах — это справочный артефакт.
DP — Design Pattern
Назначение. Готовая контентно-визуальная сборка на основе базового компонента — «упакованный паттерн», который нужен сразу в нескольких местах макета.
Зачем нужен.
-
Переиспользование — один и тот же наполненный паттерн вставляется в разных местах.
-
Единая точка правки — правишь внутренний контент в одном месте → обновляется везде.
Как создаётся.
-
Берём базовый компонент (например,
Layer). -
Наполняем его контентную область нужным содержимым.
-
Оборачиваем наполненный экземпляр в новый компонент.
-
Именуем по правилу
DP.
Правило именования. DP {базовый компонент} {контекст / история}
Пример. Layer — заголовок + контентная область (слот), в которую можно положить любые компоненты или нужный контент. Используется в большинстве историй в макетах.
Аудитория. Дизайнеры — для сборки макетов.
Статусный префикс — ❌ Deprecated (устаревший компонент)
Добавлено командой ДС поверх исходной справки (2026-07-15).
Что это. Префикс из иконки-крестика (❌) и слова «Deprecated» в начале названия.
Назначение. Помечает компонент, который больше не поддерживается на будущее. Его ещё можно встретить и использовать в уже существующих макетах, но в новых макетах и новых флоу использовать не рекомендуется — вместо него берётся актуальная (Stable) версия компонента.
Особенность. Это статусная метка, а не роль. Она может стоять у чего угодно, что выводится из обращения: у базового компонента, у DP, у продуктовых форков с суффиксами.
Правило именования. ❌ Deprecated {название компонента}
Практика. Увидел ❌ Deprecated в своём макете — при ближайшей пересборке замени на актуальный компонент; в новый флоу не тащи.
⚠️ В файлах встречались разные написания пометки об устаревании (❌ Description, ❌ Deprecated, ❌ <Name> (используйте <Name>)). Каноничным считаем «❌ Deprecated {название}»; остальные приводим к нему.
Префиксы уровня — Page / Template (атомарный дизайн)
Отдельная группа префиксов описывает уровень компонента по атомарному дизайну — какого рода экран перед тобой и насколько он изменяем. Оба относятся к уровню «страница», разница — в степени открытости для наполнения.
Page — страница
Назначение. Компонент-экран с фиксированным, неизменным поведением. Всё, что помечено Page, — это конкретный вид экрана, который ведёт себя строго одним образом; наполнять или переопределять его не предполагается, используется как есть.
Правило именования. Page {название}
Template — шаблон
Назначение. Компонент-экран с поведением шаблона. Такой вид страницы можно переиспользовать и заполнять данными через открытые пропсы, которые дают возможность редактирования содержимого. По сути Template — это Page, у которого намеренно открыты точки наполнения (слоты/пропсы) под конкретный контент.
Правило именования. Template {название}
Разница коротко: Page — смотри и используй как есть (поведение зашито); Template — бери и наполняй (поведение зашито, контент открыт через пропсы).
Семейство 2. Теги-суффиксы — продуктовая принадлежность
Стоят в конце названия. Обозначают, кому принадлежит компонент и где он живёт (в какой библиотеке, в дизайне и в коде). Главное, что кодирует суффикс, — границу переиспользования.
Уровни принадлежности:
-
Общая дизайн-система (без суффикса) — переиспользуемые компоненты, лежат в общей библиотеке и в дизайне, и в коде.
-
Продукт (двухбуквенный суффикс) — компонент принадлежит конкретному продукту; у продукта могут быть свои библиотечные компоненты.
-
Продуктовая команда (трёхсоставной суффикс) — компонент принадлежит конкретной команде, переиспользованию не подлежит.
Двухбуквенный суффикс — продукт
Назначение. Обозначает принадлежность компонента конкретному продукту.
Пример. AF = Astra Fintech → компонент относится к финтех-направлению продукта.
Особенность. В рамках продукта существуют свои библиотечные компоненты (подгруппы продуктовых компонентов). Это всё ещё переиспользуемые компоненты, но в границах продукта.
Правило именования. {Название компонента} AF (суффикс в конце)
Аудитория. Дизайнеры и разработчики продукта.
Трёхсоставной суффикс — продуктовая команда
Назначение. Обозначает принадлежность компонента конкретной продуктовой команде.
Что это. У продуктовых команд есть собственные компоненты, которых нет в общей дизайн-системе. Они построены на наших принципах и токенах, но являются собственными компонентами команды.
Ключевое правило — не переиспользовать. Такой компонент используется только внутри одной команды. В коде он не лежит в общей библиотеке — как и в дизайне. Трёхсоставной суффикс служит явным маркером: «это командный компонент, переиспользовать нельзя».
Правило именования. {Название компонента} {ХХХ}, где ХХХ — трёхсоставной тег команды.
Аудитория. Только команда-владелец.