Introducing SDDS
SDDS — дизайн-система Сбера для быстрого создания брендированных внутренних цифровых продуктов и сервисов: B2C-площадки, B2B-порталы, операционные инструменты, личные кабинеты и административные интерфейсы.
White-label design system
SDDS — универсальная дизайн-система, которая определяет базовую структуру и набор свойств нейтрально спроектированных компонентов. Бренд-пользователь кастомизирует токены дизайн-системы под свой фирменный стиль, а компоненты динамически принимают значения без необходимости вносить правки в код.
Продукт не форкает систему под свой бренд. Он меняет значения токенов — цвета, шрифты — и получает те же компоненты в своей стилистике. Код компонентов при этом остаётся системным и продолжает обновляться вместе с релизами.
Платформы
SDDS покрывает Web и Mobile через единый файл в дизайне и единый набор токенов.
| Платформа | Контексты | Особенности |
|---|---|---|
| Web | Десктоп, адаптив | Полный набор компонентов |
| Mobile | iOS, Android | Полный набор компонентов и специфичные для мобильных платформ компоненты |
| TV | Android | Набор компонентов, адаптированный под TV-платформы |
Ресурсы SDDS
В отличие от потребительских дизайн-систем, SDDS оптимизирована под плотную информационную среду — таблицы, формы, дашборды — и рассчитана на разные бренды внутри экосистемы Сбера.
Базовые элементы визуального языка
- Цветовые токены
- Типографические токены
- Токены эффектов тени и размытия
- Адаптивная сетка и правила её построения
- Иконки в едином стиле
Компонентная библиотека
- Библиотека UI-компонентов (~80 компонентов) для веб- и мобильных интерфейсов
Паттерны взаимодействия
- Валидация, подсказки, маски ввода, навигационные паттерны и другие сквозные решения
Документация
- Гайдлайны по использованию токенов
- Руководства по использованию компонентов
- Инструкции по внедрению для дизайнеров и разработчиков
Инструменты и ресурсы
- Библиотеки компонентов в Figma и Pixso
- Фреймворки и библиотеки кода: React, Compose UI, ViewSystem, SwiftUI
- Инструменты для тестирования
Кастомизация
Бренд-пользователь заменяет:
- значения цветовых токенов;
- набор шрифтов;
- адаптирует компоненты под свои сценарии использования.
Собрать и проверить такую тему можно в конфигураторе — он покажет, как изменения расходятся по компонентам и состояниям.
Преимущества для бренда-пользователя
Экономия времени
- Быстрый запуск за счёт готовой системы
- Переключение на стилистику бренда через замену токенов
- Готовые решения протестированы, соответствуют UX-стандартам и требованиям доступности
Консистентность интерфейсов
- Единый набор компонентов и токенов в Figma и Pixso — для Web и Mobile
Масштабируемость
- Добавление тем
- Добавление новых функций в существующие компоненты
Техническая поддержка
- Команда системы разбирает обращения, ведёт доработки и мониторинг
Как читать документацию
Начните с Glossary — там объяснены термины, которые встречаются везде. Дальнейший путь зависит от роли.
Дизайнеру
- Glossary — термины
- Component Library — выбор компонента под задачу
- Sizes — размерная шкала
- Themes tokens — быстрый старт в Figma, переключение тем
- States — состояния компонентов в макете
Разработчику
- Glossary — термины
- Themes tokens — токены, коллекции Variables, контексты
- Sizes — размерная шкала
- States — состояния, пропы, комбинирование
- Properties Vocabulary — полный справочник пропов
- Component Library — список компонентов
Справочные документы
Эти страницы не нужно читать подряд — открывайте по необходимости.
| Документ | Когда нужен |
|---|---|
| Spacing & Layout | При вёрстке форм и лейаутов |
| Interaction Model | При реализации клавиатурной навигации |
| Validation Model | При проектировании форм с валидацией |
| Accessibility | При проверке доступности компонентов |