#Дайджест Дизайн-системы, 29.09.23

Сегодня в выпуске:
— два продукта;
— гипотезы бизнес-модели Атомаро;
— сегментация пользователей;
— текущие задачи;
— роадмап и ближайшие планы (следующий дайджест);

Два продукта
Как я уже писал в предыдущем дайджесте, мы работаем сразу над двумя продуктами.
Команда тратит примерно половину времени на каждый. Дизайн-система Ростелекома — это поддержка и улучшение текущей функциональности: лечим баги, активно поддерживаем пользователей, отвечаем на проблемы, дорабатываем наши супер-паттерны, таблицы и деревья, в коде.
Атомаро — это совершенно новая дизайн-система на новой архитектуре, которую легче переиспользовать, адаптировать, кастомизировать и вообще она топчик.
Но работать над двумя продуктами и дальше будет тупо и сложно, это повышает издержки, увеличивает количество недоработок, тормозит развитие, и в целом увеличивает энтропию.
Поэтому после релиза и обкатки новой архитектуры, мы планируем постепенно переводить ДС Ростелекома на новые рельсы Атомаро и снижать количество времени команды на поддержку старой системы. И это правильно, прогресс в движении и обновлении.

Гипотезы бизнес-модели Атомаро
Атомаро сейчас на стадии стартапа и поиска своей ниши, или поиска Product Market Fit.
PMF — это гипотеза о бизнес модели, мы верим, что если мы находим соответствие продукта рынку, значит мы можем масштабировать продукт, и он будет приносить прибыль.
PMF состоит их трёх важных частей:
Жизнеспособность — клиенты готовы платить, есть способ привлечения, и юнит-экономика выше нуля;
Востребованность — у людей действительно есть задачи, которые наш продукт решает лучше конкурентов, либо дешевле;
Реализуемость — у нас есть команда, которая за разумный бюджет и сроки сделает продукт

Основная гипотеза в проверку которой мы сейчас идём называется Product Led Growth, а именно рост за счёт продукта.
Стратегия в том, что наш продукт должен решать боли очень массового сегмента, максимально дёшево, либо вообще бесплатно.
Чем больше «работ» (в терминологии JTBD) покрывает продукт, либо чем качественнее он делает определёные, тем проще распространять продукт, и тем виральнее становится привлечение. Самые яркие примеры — Figma, Miro. Простые инструменты, которые на старте практически не вкладывались в маркетинг, но быстро росли, потому что успешно решали работы большого сегмента.
Но за счёт чего продукт будет окупаться? За счёт платных фич и сегмента b2b, сотрудники которого уже пользуются продуктом.

Пользователи
Наша главная аудитория — это UI-UX дизайнеры и фронтенд-разработчики. Любой дизайнер, и любой фронтендер постоянно сталкиваются с дизайн-системами в своей работе. У них множество работ и болей, которые успешно может закрыть Атомаро:
сделать свою дизайн-систему, быстро запустить проект, научиться делать дс, внедрить в компании дс, заручиться поддержкой команды, получить одобрение арт-директора, реализовать проект, меньше тратить времени на вёрстку, а больше на логику, сделать красивый ui в конце концов и т.д.
Работ много! А решения разрозненные и неидеальные. Как раз эту проблему и нивелирует Атомаро.
Об этом подробнее в следующих дайджестах.

Текущие задачи
Подготовили к выпуску бета-версию таблиц и деревьев в дизайне, релиз в понедельник!
Дописываем контент для нового сайта Атомаро: описываем и показываем всю новую функциональность продукта, как он будет решать задачи дизайнеров, фронтендеров, и бизнеса.

В следующем дайджесте
Про роадмап и ближайшие планы.
Рассказать о концепции айдентики Атомаро?

Ура! Таблицы и иерархические деревья доступны в Фигме для дизайнеров.

Обновленные таблицы

— Пофиксили ошибки. Избавились от багов фигмы в виде слетавших обводок, поправили выравнивание колонок, улучшили вариантсы.

— Добавили сборку таблиц в колонках. Для большего удобства — в зависимости от ситуации таблицы удобнее собирать либо на основе строк, либо на основе колонок. В инструкциях прописано, как собирать таблицы в двух вариантах.

— Добавили примеров и шаблонов собранных таблиц на колонках.

— Использовали Nested Properties — теперь не нужно глубоко проваливаться в компонент, чтобы его настроить.

— Обновили гайды, описания и инструкции.

Иерархическое дерево

— Каждый узел настраивается отдельно.

— 2 типа деревьев: accordeon и directory.

— Несколько уровней вложенности узлов.

— Представлено в двух размерах: medium и small.

Страница анонса

Осенний релиз 7.7.0

Алоха! У нас новые стори, исправление багов, а также новые возможности Slider и PickerDate

— InputDate: Добавлен пример в storybook, демонстрирующий работу только со временем, если выставить calendarMode = TIMES_ONLY

Multiselect:

— Исправлено поведение, при котором options, подгруженные не в момент монтирования компонента некорректно отображались и не возвращались в onChange.

— Исправлена работа параметра value, теперь callback onChange отрабатывает корректно.

— Поправлены css-стили в размерах small и xsmall в соответствии с макетами.

Slider:

— Добавлена возможность перемещать ручку по клику на трек

— Добавлены примеры в storybook.

— Исправлено поведение, при котором передвижение ручки управления не сбрасывалось при выходе за границы компонента. Добавлен новый параметр colorHighlightTrack

PickerDate:

— Добавлен новый параметр isOnlyEnabled

— Исправлена стилизация псевдоэлемента на активном элементе при параметре shape = circular

#Дайджест Дизайн-системы, 15.10.23

Привет! Делаю дайджест покороче, раскрываю по одной теме, а ещё переносим простыню дайджеста из постов в статью в телеграфе. Так удобнее.

Сегодня в выпуске:

— Как создаются дизайн-системы. Текущий пайплайн;
— Как создаются дизайн-системы. Коммерческий пайплайн;
— Текущие задачи.

Пишите в комменты, какую тему раскрыть полнее

Всем привет! На связи команда Дизайн-системы Ростелекома. Пройдите пожалуйста опрос (время прохождения 1 мин) об опыте использования дс, ваш отзыв поможет улучшить продукт и сделать его ещё более полезным и удобным. Спасибо за ценную обратную связь!

#Дайджест Дизайн-системы, 20.10.23

Сегодня в выпуске:

— Какие боли и проблемы мы хотим решить;
— Современные требования к дизайн-системам;
— Почему все переходят на токены;

Пишите в комменты, какую тему раскрыть полнее

Релиз 7.7.1

Алоха! У нас небольшие, но важные исправления

— Multiselect. Исправлена ситуация, при которой в callback onChange не возвращался пустой массив при удалении последней из выбранных опции

— Multiselect. Исправлена ошибка, возникающая при использовании компонента в качестве контролируемого. Функция onChange больше не вызывается бесконечно. Добавлен пример контролируемого мультиселекта в сторибук

— Multiselect. Добавлен параметр hideLabel, позволяющий скрыть лейбл. Исправлены отступы при autoHeight и отсутствии label

— Multiselect. Добавлен event в onClear

— Select. Исправлен перенос текста в option

— InputDate. Добавлена возможность заменить основную иконку, параметр icon. Добавлены примеры в сторибук

— InputDate. Исправлена ошибка, из-за которой компонент крашился при удалении daysOfWeek, disabledDates, enabledDates

#Дайджест Дизайн-системы, 3.11.23

Сегодня в выпуске:

— Суб-дизайн-системы;
— Текущие задачи

#Дайджест Дизайн-системы, 10.11.23

Сегодня в выпуске:

— Скачок к универсальности
— Фабрика дизайн-систем. Или как новая архитектура Атомаро будет решать задачи клиентов;
— Текущие задачи.

#Дайджест Дизайн-системы, 24.11.23

Сегодня в выпуске:

— Внешнее продвижение;
— Текущие задачи.

#Дайджест Дизайн-системы, 14.12.23

Сегодня в выпуске:
— atomaro.design на проде!;
— Версия для Ростелекома;
— Планы на 1 кв 2024;
— Проблемы и текущие задачи.

❄️Релиз 7.8.0

Алоха! Разрабатывали Атомаро 0.1, вернулись с фичами

— InputDate. Добавлен callback onCalendarOpened, вызываемый при открытии календаря InputDate

— InputDate. Новые callback-функции — onChangeMonth и onChangeYear. События отрабатывают при клике по стрелкам в календаре

— InputDate. По аналогии с PickerDate теперь параметр renderDate возвращает не только дату, но и view активного календаря (day, month, year)

— Notification. В хук useNotificationsStack добавлены новые методы: closeAllNotifications и getNotificationId

Привет всем пользователям Дизайн-системы Ростелекома. Запрос в коммьюнити: есть ли у вас фидбэк и данные о влиянии дс на производительность и скорость веб-приложений на проде?

Всем привет!

У нас супер новость для дизайнеров: встречайте новую версию «Дизайн-системы Ростелекома» 🔥

Что нового:

— Новая версия библиотеки поддерживает токены и variables

— Теперь стили, variables, компоненты и иконки в одной библиотеке

— Обновили типографику и цветовые палитры

— Компоненты тоже преобразились: добавились состояния, обновился внешний вид компонентов, а количество вариантов сильно сократилось

— Расширенные возможности темизации: темная тема, orange и purple режимы

— Использованы последние возможности фигмы, библиотека стала легче, а компоненты оптимизированы

Помимо этого, можете заценить обновленную документацию и новый инструмент — слоты, специальные компоненты контейнеры, которые можно заменить на любые другие комопненты, без детача.

Стало гибко, быстро и удобно!

Про переход:

В 2024 году новая библиотека Atomaro Pro Rostelecom станет основной. Библиотеки Atomaro Web, Atomaro Style, Atomaro Icons будут поддерживаться, фикситься, но не развиваться.

#Дайджест Дизайн-системы, 24.11.23

Сегодня в выпуске:

— Результаты Дизайн-системы Атомаро за 2023;
— Планы на 2024.

⚡️ Релиз 7.8.1

Алоха! У нас пачка багфиксов.

На данный момент действуют ограничения на внесение изменений в прод. Мы обновили NPM пакет, новая версия доступна.
По обновлению сайта и сторибука сообщим отдельно, когда это произойдет.

— InputEmail. Теперь валидация срабатывает при контролируемом изменении value

— Notifications. Добавлен перенос строки в title и subtitle

— InputDate. Callback onCalendarOpened больше не вызывается при уже открытом календаре

— Textarea. Цвет label в размере medium теперь соответствует макету

— Select. Исправлено позиционирование иконки-шеврона в размере small и xsmall при включённом hideLabel

— Улучшения сторибука

🤗Всем приветик! Мы с небольшими, но приятными новостями для дизайнеров:

— В файле дизайн-системы теперь можно найти страничку «Motion», где описаны основные принципы анимации, которая используется в Атомаро

— В компоненте Badge добавилась иконка-индикатор dot

— Добавились новые иконки, а у некоторых иконок изменились названия (подробнее на странице «✎ История изменений»)

Временный нюанс:

Какое-то время в проектах будут доступны переменные от компонентов TableGrid и Tree. Извините за неудобства, скоро мы их скроем 🙏

Всем классного дня!

🔥 Релиз 7.9.0

Алоха! Исправляем баги по заявкам от пользователей

Изменения:

— DropdownMenu. Изменён тип параметра title на ReactNode. Добавлены два новых пропса: headerSlot и footerSlot

— DropdownMenu: Исправлено отображение опций с длинным текстом внутри. Теперь текст переносится корректно

— Modal: Изменено дефолтное значение для параметра unmount на true. Теперь без передачи unmount модалка не блокирует взаимодействие со страницей после закрытия

— Modal/Drawer: Невозможно было прокинуть className на элемент, исправлено

— Modal/Drawer: Теперь при открытии компонента страница не скролится в начало. На своей стороне запретили возможность скролить по странице при уже открытой модалке

— Slider: Исправлен баг с отсутствующим вызовом onChange при клике на шкалу

Подняли версию библиотеки react-number-format, которая использовалась в компоненте InputAmount, до @4.9.4, теперь поддерживается react 18

🔆 Релиз 7.10.0

Алоха! Врываемся в жаркое лето с багфиксами

Изменения:

— DropdownMenu/Select/Multiselect: При передаче пустого массива в options список не изменялся. Исправлено

— DropdownMenu: Добавлен атрибут data-key для option и className dropdown-menu__option-text для текста

— Select/Multiselect: Добавлены новые параметры itemClassName и itemStyle, позволяющие задать класс и стили для элементов списка в выпадающем меню

— DropdownMenu/Multiselect/Select: В callback-функциях onSelect, onMultiselect и onChange теперь вторым аргументом возвращается event. Раньше был только один аргумент — выбранные options

— Notifications: Теперь можно задать id для компонента. По дефолту id проставлены в порядке возрастания. Уведомления с одинаковым идентификатором существовать на странице не могут