Дизайн-система Freedom с нуля за 2 недели
от первых набросков до UI-кита
компонентов — от кнопок до OTP
в работе почти без изменений
Проблема. Дизайнеры копировали элементы из чужих макетов, и один элемент выглядел по-разному.
Цвета назывались цифрами от 100 до 900, и было непонятно, какой где использовать. Я за час набросал пару компонентов и показал лиду. Он согласился: только быстро.
Токены. Вместо «зелёный 500» — имя, по которому понятно, где цвет применять.
| Часть | Что значит | Значения |
|---|---|---|
| Type | тип ресурса | Color |
| Use | где используется | Static, Text, BG, Situation, Bottom, Button |
| Sentiment | смысл | Neutral, Positive, Negative, Warning, Info |
| Prominence | насколько заметный | Primary, Accent, Secondary, Tertiary, Quaternary, Muted |
Например, color.text.negative.primary — основной цвет текста ошибки. Дизайнеру больше не нужно вспоминать, какой из красных правильный.
Тёмная тема. Заложена с первого дня: у каждого токена есть значение для дня и для ночи.
При смене темы цвета меняются сами. Отдельная группа Static — цвета, которые не меняются: белый, чёрный, серый.
Компоненты. 27 групп: от кнопок до OTP и видеоидентификации.
Кнопки, ячейки, инпуты, навбары и банковские вещи вроде лимитов, OTP и виджетов.
- Alert
- Banner
- Bottom sheet
- Buttons
- Calendar
- Cell
- Chip & Filter
- Controls
- Counter
- Inputs
- Info blocks
- Limits
- Navbar
- Placeholder
- Progress
- Scan
- Search
- Services
- Status pages
- Status tags
- Stories
- Tabs
- Tab Bar
- Toast
- OTP
- Video Identification
- Widgets
Банковские компоненты: лимиты, OTP, видеоидентификация, виджеты
Документация. К сложным компонентам — инструкция: что можно, что нельзя и как ставить в макет.
У каждой страницы одна структура: компонент, который можно скопировать, правила использования, все настройки и размеры. Вот как это выглядит у кнопки.
Результат. Больше 2 лет в работе почти без изменений.
- С нуля за 2 недели чистой работы.
- Больше 2 лет в работе: по словам коллег, системой пользуются до сих пор.
- Светлая и тёмная тема с первого дня.
Что бы я сделал иначе. Убрал бы лишнюю часть имени токена и собирал компоненты крупнее.
- Type лишний. Если тип всего один — Color, — он ничего не добавляет к имени.
- Слишком много атомарности. В теории это гибко, на практике такими компонентами сложнее пользоваться.
Но главную задачу система решила: дизайнеры перестали копировать элементы друг у друга, а у команды Arbuz, которую Freedom тогда встраивал в суперап, появился понятный набор компонентов.