Термин: «Компонент дизайн-системы»

Термин: «Компонент дизайн-системы»

Компонент дизайн-системы — это самостоятельная сущность интерфейса, которая имеет чётко описанное назначение, состояние и поведение, а также визуальное и семантическое описание. Важно: компонент — не просто “кнопка в макете”, а набор правил, по которым она собирается и работает в разных сценариях (например, в форме, в таблице, в модальном окне).

Чем отличается от родственного термина «элемент UI»
— Элемент UI (например, “иконка”, “тень”, “линия”) может быть частью визуального решения и не обязан содержать логику состояний.
— Компонент UI включает состав, варианты (variants), состояния (states) и обычно интерактивные правила (хотя бы на уровне поведения: наведение/фокус/ошибка/disabled).

Типичные ошибки применения
— Переиспользуют “кусок стиля”, а не компонент: меняют отступы и высоту, теряя согласованность поведения.
— Описывают только внешний вид, но не состояния (что делать при ошибке ввода, когда данных нет).
— Делают компонент без семантики: визуально выглядит как “тег”, а по смыслу остаётся декоративным блоком.

Пример
Компонент “Поле ввода (Input Field)”:
— состояния: default / focus / error / disabled / read-only
— варианты: с и без префикса, с подсказкой под полем, с маской ввода
— результат: дизайнеры и разработчики собирают форму единообразно, а бренд-голос сохраняется даже при росте количества интерфейсных сценариев в 2026.

— @DesignSystemsBrandPro