Overview · Компонентная библиотека

Все компоненты

Полная матрица компонентов FinancialDS. Единый Figma-файл Components, 4-уровневая токен-архитектура, Light/Dark тема, 4 Viewport-режима.

Статус библиотеки

FinancialDS v0.1 · 2026
24
Stable
Построены, протестированы, готовы к продуктовым экранам
1
In Progress
Токены созданы, Figma-компонент в процессе сборки
10
Planned
Задокументированы в спецификации, ожидают построения · 35 итого
Покрытие компонентной библиотеки
69% Stable · 35 итого
24 Stable (69%)
1 In Progress (3%)
10 Planned (29%)

Stable — готовы к продакшену

24 компонентов
Button
Atoms · Action
Stable
Три визуальных стиля: Solid, Outline, Ghost. SM–XL, 6 интентов, до 5 состояний.
SM · MD · LG · XL Solid · Outline · Ghost 6 intents 5 states
SIZE_BASED · Dark ✓ Открыть
ButtonsGroup
Atoms · Action
Stable
Контейнер для группировки кнопок. Horizontal и Vertical. Primary = Neutral Solid (не Brand).
SM · MD · LG · XL Horizontal · Vertical Align left · right
LAYOUT · Dark ✓ Открыть
Badge
Atoms · Indicator
Stable
Числовой индикатор: Solid и Soft. SM–LG, 6 семантик, включает Dot-тип.
SM · MD · LG Solid · Soft · Dot 6 семантик
SIZE_BASED · Dark ✓ Открыть
Tag
Atoms · Label
Stable
Три стиля: Solid, Soft, Outline. SM–MD, 6 семантик, High Contrast.
SM · MD Solid · Soft · Outline 6 семантик 120+ variants
SIZE_BASED · Dark ✓ Открыть
Chip
Atoms · Filter
Stable
Интерактивный фильтр-чип. Soft и Outline стили, Neutral и Accent семантика. Single- и multi-select группы.
XS · SM · MD Soft · Outline Neutral · Accent 5 states
SIZE_BASED · Dark ✓ Открыть
Radiobutton
Forms · Selection
Stable
Выбор одного варианта из группы. Вертикальная и горизонтальная ориентация, error state, description.
SM · MD RadioGroup Error state 5 states
SIZE_BASED · Dark ✓ Открыть
Switcher
Forms · Selection
Stable
Три варианта: Switch (базовый), Switcher / Ghost, Switcher / Container. SM и MD, error state, caption, hint icon.
SM · MD Ghost · Container Error state 5 states
SIZE_BASED · Dark ✓ Открыть
Toggle Group Button
Atoms · Control
Stable
Переключатель режимов. Secondary (Outline) вариант. 2–5 частей, иконка или иконка + лейбл, badge-счётчик.
SM · MD · LG 2–5 parts Icon · Icon+Label
SIZE_BASED · btn-* aliases Открыть
Select Control
Atoms · Control
Stable
Переключатель с фоновым контейнером. Default и High Contrast варианты. 2–5 сегментов, иконка или текст, badge-счётчик.
SM · MD · LG Default · High Contrast 2–5 segments Icon Only
SIZE_BASED · btn-* aliases Открыть
Link Text
Atoms · Navigation
Stable
Текстовая ссылка с опциональной иконкой. SM–LG, 6 интентов, 6 состояний. Алиасы размерной лестницы Button.
SM · MD · LG 6 intents Icon left · right 6 states
SIZE_BASED · btn-* aliases Открыть
Divider
Atoms · Layout
Stable
Разделительная линия. Горизонтальная и вертикальная ориентации, 3 уровня контраста, 3 варианта отступов.
Horizontal · Vertical Low · Medium · High Padding 0/2/4
VARIANT_BASED · Dark ✓ Открыть
Checkbox
Forms · Selection
Stable
Три варианта: Check, Checkbox / Ghost, Checkbox / Container. Уникальное состояние Indeterminate для групп с частичным выбором. Error state, caption, hint icon.
SM · MD Indeterminate Error state 5 states
SIZE_BASED · Dark ✓ Открыть
InputText
Forms · Text entry
Stable
Текстовое поле двух типов: LabelOut (лейбл снаружи) и LabelIn (floating label). Helper text, иконки prefix/suffix, clear, 4 интента валидации.
SM · MD · LG · XL LabelOut · LabelIn Neutral · Error · Success · Warning Leading · Trailing icon · iconHelpOut
SIZE_BASED · Dark ✓ Открыть
Tabs
Navigation · Content
Stable
Переключение между связанными панелями контента. Горизонтальная и вертикальная ориентация, иконки, бейджи, ARIA tablist с roving tabindex.
SM · MD · LG Horizontal · Vertical Icon · Badge 4 states
SIZE_BASED · Dark ✓ Открыть
Modal
Feedback · Overlay
Stable
Диалоговое окно с focus trap и portal в body. SM/MD/LG/Fullscreen, Escape, backdrop-close, опциональный footer.
SM · MD · LG · Fullscreen Focus trap Portal Dark ✓
PORTAL · Keyboard · Dark ✓ Открыть
MultiSelect
Forms · Selection
Stable
Поле множественного выбора. LabelOut (40px) и LabelIn (48px) варианты. Теги внутри поля (20px, 4px r), overflow badge +N, pill-чипы снаружи (24px).
LabelOut · LabelIn Tags · Overflow Chips group 9 states
MD only · Dark ✓ Открыть
Combobox
Forms · Dropdown
Stable
Поле ввода с выпадающим списком и поиском. Фильтрация по метке, клавиатурная навигация, portal dropdown с анимацией. Состояния: default, error, disabled, readonly.
SM · MD · LG Searchable · Clearable Keyboard nav 4 states
SIZE_BASED · Portal · Dark ✓ Открыть
InputPassword
Forms · Text entry
Stable
Password input with show/hide toggle. Кнопка переключения видимости пароля, индикатор силы, валидация.
SM · MD · LG Show · Hide toggle Strength indicator Dark ✓
SIZE_BASED · Dark ✓ Открыть
InputSearch
Forms · Text entry
Stable
Search input with magnifier icon and clear button. Два варианта: LabelOut (SM–XL) и LabelIn (MD–LG). Новых токенов не добавляет.
SM · MD · LG · XL LabelOut · LabelIn Clear button Dark ✓
SIZE_BASED · Dark ✓ Открыть
SelectField
Forms · Selection
Stable
Dropdown select field. Два варианта: LabelOut (SM–XL) и LabelIn (MD–LG) с плавающим label. Нативный <select> с полной токенизацией.
SM · MD · LG · XL LabelOut · LabelIn Error validation Dark ✓
SIZE_BASED · Dark ✓ Открыть
TextArea
Forms · Text entry
Stable
Multi-line text input with resize. Автовысота, счётчик символов, helper text, label, валидационные состояния.
SM · MD · LG Auto-resize Char counter Dark ✓
SIZE_BASED · Dark ✓ Открыть
Progress Bar
Feedback · Progress
Stable
Индикатор прогресса операций. Determinate (0–100%) и Indeterminate (анимация). Пять validation-состояний, два размера, три позиции лейбла.
SM · MD Determinate · Indeterminate 5 validations Dark ✓
SIZE_BASED · Dark ✓ Открыть
Calendar
Forms · Date
Stable
Standalone-календарь для выбора даты и диапазонов. Навигация по месяцам/годам, range-режим, weekends, disabled дни. MD и SM.
SM · MD Simple · Nav · Range 7 day states Dark ✓
SIZE_BASED · Dark ✓ Открыть
DateTimePicker
Forms · Date
Stable
Поле ввода даты, времени или даты+времени. Три типа: Date, Time, Date-Time. LabelOut и LabelIn (floating label). 5 состояний, Error, Disabled.
Date · Time · Date-Time LabelOut · LabelIn 5 states Dark ✓
FIELD · Dark ✓ Открыть

In Progress — в работе

1 компонент
Alert
Feedback · Notification
In Progress
Inline-уведомление. Иконка + текст + кнопки действий. Субкомпоненты Core, Body, Text.
Info · Positive · Negative · Warning 36 tokens
SUBCOMPONENT_BASED · Нет Size-коллекции

Planned — в очереди

10 компонентов
Tooltip
Atoms · Overlay
Scrollbar
Atoms · Layout
Select
Forms · Dropdown
Date Picker
Forms · Date
Breadcrumbs
Navigation
Pagination
Navigation
Stepper
Navigation
Notification
Feedback
Popover
Feedback
Collapse
Feedback

Planned = спецификация в 03_Components/, токены не созданы, Figma-компонент не построен. Кандидаты на следующий квартал.

Архитектура токенов

4 уровня · Figma Variables
Уровень 1
Primitive
Сырые значения без семантики. Цвета, размеры, типографика.
Light/Grey(Blue)/700
→ #6B7280
Уровень 2
Semantic
Смысловые алиасы на примитивы. Brand, Negative, Info, Positive, Warning.
Main/Brand/Light/brand-700
→ Light/Brand/700
Уровень 3
Theme
Компонентные токены с режимами Light/Dark/Invert. Привязываются к fills компонентов.
Fill/Brand/Solid/Default
→ Main/Brand/Light/…
Уровень 4
Component
Прокси-переменные в файле Components. Алиасы на Viewport-токены размеров.
Button/Container/Height
→ ❖ Button/MD/Height

Figma-файлы системы

5 библиотечных файлов
Файл
Содержимое
File Key
Components
Единый файл всех компонентов. Страницы: Atoms, Forms, Navigation, Feedback, Composite.
isVYOT7tW0RTaIofg7FAqM
Dimensions + Typography
Размерные токены и типографика. Viewport-коллекция: Desktop / Desktop B2B / Tablet / Mobile.
UmtoBez5r9NtVgsc9nIhIt
Colors 1-2 lvls
Primitive и Semantic цвета. Grey-Blue рамп, Brand red, Info/Positive/Negative/Warning.
NDepjYIrrLSCsyS7ZsYpr7
3rd lvl Colors
Theme-коллекция (L3). Fill / Text / Icon / Stroke / Static. Light / Dark / Invert режимы.
12qD3KozrhjN89KRI5SOtN
Text Styles
Текстовые стили Inter. D0–D1, H1–H6, Subtitle, Body, Caption, Label L0–L3 Default/Compact.
vwNHIqAb7hXH5R72e8TggR