Ключевые термины SDDS. Если встречаете незнакомое слово в документации — ищите здесь.
Новым пользователям: начните с introducing.md — там контекст системы и маршрут чтения по роли.
1. Базовые понятия
Термин
Определение
ДС — Дизайн-система
Набор стандартов, компонентов и базовых правил для создания цифровых продуктов и сервисов
White-label
Принцип ДС, при котором нейтральные компоненты стилизуются через токены темы бренда
Токены
Именованная переменная, хранящая значение. В SDDS токены делятся на базовые и семантические
Семантические токены
Именованная переменная, хранящая значение стиля. В SDDS токенами задаются цвета, шрифты, радиусы скругления, тени и размытие (blur). Токен описывает роль, а не значение. Пример: SurfaceNegative — это «поверхность ошибки», а не «красный цвет»
Базовые токены / Base Tokens
Нижний слой архитектуры SDDS: примитивы значений токенов, на которых строятся семантические токены
Библиотека компонентов / Component Library
Коллекция компонентов, доступная для дизайнеров в Figma/Pixso и npm-пакетом для разработчиков
Компонент / Master
UI-элемент с заданными токенами, свойствами и поведением
Инстанс / Instance
Копия компонента, которую пользователь использует в макетах
2. Визуальный язык
Термин
Определение
Палитра
Расширенный набор базовых цветовых токенов, рекомендованных для стилизации семантических токенов
Theme / Тема
Набор токенов, определяющий визуальную идентичность продукта/бренда. Несколько продуктов могут использовать одну библиотеку компонентов с разными Product Theme
Mode
Режим отображения интерфейса, определяющий палитру токенов для светлой и тёмной тем
Context
Набор токенов для адаптации цвета элемента под фон, на котором он находится
Typography Tokens / Типографика
Система иерархической организации текстовой информации
CornerRadius Tokens / Токены скругления
Система скруглений углов компонентов
Breakpoints / Брейкпоинты
Контрольные точки, которые определяют, как адаптивный макет будет вести себя в зависимости от размера устройства или области просмотра
Grid / Сетка
Система колонок и отступов для выравнивания элементов в макете
3. Термины компонентов
Термин
Определение
Конфигурация
Набор вариаций компонента, описывающий различные визуальные представления компонента. Конфигурация создаётся, когда компонент имеет существенно различающиеся представления, влияющие на структуру, состав или требующие изменений на уровне множества элементов (например, TextareaDefault / TextAreaClear)
Вариация
Набор свойств компонента. Если в макете у компонента изменяется значение одного или нескольких токенов или изменяются отступы/размеры, то эти изменения отражены на уровне вариаций. Является частью публичного API компонента; имеет семантическое значение (size меняет размеры, view меняет цвета); содержит набор свойств; может иметь зависимости от других вариаций
Свойство
Неделимая сущность, применяемая к компоненту и меняющая его внешний вид. Имеет булевое значение (True/False); не зависит от вариаций; имеет одинаковое значение для всех вариаций в рамках конфигурации
Слот
Именованная позиция внутри компонента для размещения контента: ContentBefore, ContentAfter и т.п. Компонент не знает, что попадёт в слот — только отображает или скрывает позицию. Управляется свойствами (например, hasContentBefore, hasContentAfter)
Состояние / State
Визуальное или функциональное условие компонента: hover, focus, disabled, error и др. Состояния реализованы через токены — смена темы автоматически меняет вид всех состояний
View
Семантическая вариация View для компонентов (не полей ввода): Negative, Warning, Positive. Передаёт смысл действия или информации — не состояние данных
Размеры / Size
Принадлежность компонента к масштабному уровню системы (см. sizes.md). Примечание: в исходнике блока определение продублировано из State — требует уточнения у команды
4. Доступность
Термин
Определение
Доступность / Accessibility (A11y)
Принцип проектирования с учётом доступности интерфейса для людей с ограниченными возможностями. Включает зрительную, слуховую, моторную и когнитивную доступность
WCAG — стандарт доступности
Международный стандарт доступности веб-интерфейсов. Определяет критерии и уровни доступности. Уровни соответствия: A — минимальный (базовые требования), AA — стандартный (рекомендуемый для большинства продуктов), AAA — расширенный (максимальный)
Индикатор фокуса
Визуальный элемент, который показывает интерактивность компонента/элемента интерфейса при клавиатурной навигации
5. Лейаут и структура
Термин
Определение
Контейнер
Блок-обёртка, который ограничивает размеры контента или компонента на странице
Лейаут / Layout
Система расположения элементов на странице/экране и их адаптивности при изменении размера экрана
Внешний отступ / Margin
Расстояние между компонентами или от компонента до родительского контейнера
Внутренний отступ / Padding
Расстояние от границы компонента до вложенных в него элементов
Отступ / Gap
Расстояние между элементами в компоненте
6. Технические термины
Термин
Определение
Figma Variables
Механизм хранения токенов в Figma. SDDS использует четыре коллекции: 01. Theme (цвета), 02. SubTheme (под-тема), 03. Typography (шрифты), 04. Numbers (скругления). → Подробнее: theming.md