2022Q1 · Не опять, a c NOVA

Обновлено 19.05.2022

Мы хорошо поработали — и выпустили несколько новых вещей. Самая заметная, к которой мы готовились полгода, — это запуск лендинга дизайн-системы. Но обо всём по порядку, читайте до конца, чтобы не пропустить ни одну важную новость.

Запуск лендинга

Да, друзья, мы с Nova — лендинг рассказывает о возможностях дизайн-системы Сбера и даже разрешает её «потрогать» за некоторые открытые возможности. Это яркий выход в свет, который принёс нам новых пользователей из экосистемы и собрал много очень лестных отзывов.

Nova promo

Деление библиотек

С прошлым релизом мы анонсировали, что хотим выйти за рамки приложения СберБанк Онлайн. Это уже произошло с библиотеками в дизайне и почти готово в коде. Теперь вместо одного пространства DS SBOL есть два проекта:

DS Core Libraries — единая библиотека для финансовых продуктов Сбера. Это Nova для мобильной разработки — основной ресурс с едиными целями и задачами, компонентами, правилами, паттернами, которые создают базу для всех финансовых приложений экосистемы Сбер.
DS SBOL Libraries — локальная библиотека только для приложения СберБанк Онлайн. Такие библиотеки будут и у других цифровых продуктов.

Мы стараемся проводить работы с минимальными потерями и незаметно для вас — наших пользователей. На первый взгляд может показаться, что стало не так удобно, как раньше. Но это дело привычки, можем вас заверить: всё к лучшему! Главное проверьте, оба ли пространства у вас подключены в Figma =)

Новые гайды

Обновление структуры дизайн-системы, новый лендинг и, главное, стремление к совершенству — всё это подтолкнуло нас пересмотреть подход к документации. Мы улучшаем существующие и пишем новые гайдлайны, одновременно меняя их месторасположение, чтобы сделать структуру более логичной и вы находили нужное, не блуждая. Уже есть что почитать.

Nova: обновлённые гайдлайны

Обновление Text Field и Value Select

Оу, кто-нибудь, звоните пожарным, сейчас будет огонь! Обновляем дизайн и совершенствуем возможности полей ввода. На новый дизайн уже можно посмотреть в Figma. Но без шуток: обновление серьезное и будет проходить в несколько этапов. Эти группы компонентов очень популярные, и обновление затронет много сценариев. Пожалуйста, посмотрите внимательно и заранее подготовьтесь. Особенно важно, если у вас в процессах есть кастом подобных компонентов.

План внедрения обновлений:

Первое: в UI-китах уже появились дублирующие страницы с компонентами в новом дизайне. Сделано это для того, чтобы все смогли визуально ознакомиться с неизбежным обновлением.
Второй этап — реализация в коде. Да, обычно компонент доступен к использованию сначала в дизайне, а потом он реализуется в коде, тут наоборот.
Третий этап: когда Text Field и Value Select будут готовы в коде, то произойдет обновление старого дизайна компонентов на основных пейджах в Figma. В дизайн-макетах всё обновится автоматически, если принять обновление. Продуктовым дизайнерам останется только проверить макеты и при необходимости немного их «причесать».
В коде на Android обновление пройдет автоматически, исключая кастомные решения команд. На iOS обновление будет сделано через деприкейт старых полей со ссылкой на новый компонент.

Ну посмотрите, как же круто освежатся привычные экраны:

Календарь

Долгожданное событие — календарь появился в дизайн–системе! Мы подготовили гибкое решение: в UI-китах доступны компоненты–модули, из которых можно собрать версию календаря, подходящую для вашего сценария; а в шаблонах — готовые решения. В будущем мы планируем дополнить группу ещё несколькими компонентами и расширить адаптационные возможности календаря. В коде календарь дизайн-системы уже можно использовать на Android, немного позже он появится для iOS. Следите за обновлением статусов компонента в Figma.

Onboarding

Мы подошли к вопросу шире, чем просто добавить полностью собранный экран для классического онбординга. В UI-библиотеках доступны два варианта компонента:

Onboarding Slider — поддерживает стек из нескольких слайдов. Компонент можно встраивать как в Bottom Sheet, так и использовать в подаче Fullscreеn. Отлично подходит для вёрстки классических онбордингов. Onboarding Slider позволяет добавить много текста, но не стоит злоупотреблять. Об ограничениях можно прочитать на странице компонента, в микроспецификациях.
Onboarding Top — применим для промоэкранов, когда надо добавить на экран дополнительные функциональные компоненты. В этом случае Onboarding Top будет первым блоком на экране.

Разницу между компонентами можно рассмотреть в шаблонах дизайн-системы. В коде компонент уже готов для Android.

Cell Rich на Android

Мы приступили к реализации Cell Rich: «богатые» ячейки уже готовы для Android, для iOS вот-вот появятся в коде. Все, кто успел применить компонент в своих сценариях, смогут перейти на системное обновляемое решение.

Плагин Libro

Новый плагин дизайн-системы! Libro поможет пакетно управлять компонентами, стилями и эффектами: переименование с возможностями нумерации и функции find&replace в названиях, дублирование и удаление. Вот такой младший менеджер, ооочень выручает при работе с UI-библиотеками.

За разработку плагина персональная благодарность Михаилу Данилову.

Новые правила для токенов

Теперь мы не заводим в дизайн-систему абсолютно все токены для всех. Появилась система фильтрации, о которой можно подробно узнать в инструкции «Новые токены».

В соответствии с новой системой текущая таблица токенов тоже изменится, но немного позже. Обязательно будут руководства к действию (или бездействию) для команд. Пока с накопленной базой в дизайн-системе живём как раньше.

Статусы компонента

У любого компонента есть несколько стадий реализации: дизайн, код, виджет. Если в двух словах, то: компонент, проработанный на стадии дизайна, вы видите в UI-библиотеках; компонент, разработанный в коде, — это отображение состояний компонента на фронте; виджет воркфлоу — это логика поведения компонента и связь с бэком. Разработка всех стадий не параллельна. В дизайн-системе мы внедрили несколько инструментов, которые помогут вам сориентироваться в том, на какой стадии находится компонент:

Бейдж статуса. Выглядит как небольшой квадратик в правом верхнем углу от компонента. Бейджи разных цветов и содержат кодовую букву или иконку: — «С» — No in Code — «W» — No in Workflow — «С|W» — No in Code & Workflow — Иконка корзины — Deprecated Всего 4 статуса, которые наглядно показывают стадию реализации компонента от дизайна до виджета воркфлоу. Если у компонента нет бейджа со статусом, значит, он полностью готов.
Второй инструмент, который помогает разобраться в статусе реализации компонента, а также узнать его название в разных ресурсах — дескрипшн описания в правой панеле в Figma. Просто выделите компонент, чтобы увидеть его описание. Есть следующие поля: Design, Code, Workflow. Если в поле вы видите крестик (✗), то компонент не проработан в этом виде.

А ещё, когда компонент готов в коде, он обязательно появится в приложении Playground.

Заглянем в будущее

Полное деление дизайн-системы

Кодовое название «Коробка». В Q2 мы планируем завершить деление дизайн-системы полностью. Это значит, что не только в дизайне, но и в коде все ресурсы будут поделены на две части: Core и SBOL. DS Core Libraries будет запакована в виртуальную коробку под названием NOVA, с которой смогут работать все финансовые приложения экосистемы.

Калькулятор

Нетривиальная задача для мобильного приложения — сделать встраиваемый в процесс удобный калькулятор. Мы уже провели большую аналитическую работу, разработали несколько решений. Дело за малым: провести ряд тестирований, преодолеть технические ограничения, разработать компонент в коде =)

Ваша дизайн-система 🖤