Релиз 7.6.0 💥

Алоха! Выпускаем новый компонент, улучшения мультиселекта

— Slider: Новый компонент в нашей библиотеке. Представляет собой элемент управления, помогает легко выбрать значение, либо диапазон значений, перетаскивая ползунок по треку

— DropdownMenu/Multiselect: Добавлен параметр hideSelectedOptions, отвечающий за сокрытие выбранных элементов в dropdownMenu

— Tag/TagGroup: Добавлено состояние error для компонента Tag. Новый параметр invalidTags для TagGroup

— Tooltip/Popover: Параметр arrowIsCentered переименован в pointerIsCentered

— Dropdown: Добавлен параметр offsetCounterAxis, задающий отступ по поперечной оси

— Button: Расширили набор типов в пропсах стандартными свойствами ButtonHTMLAttributes

Multiselect:

— Исправлено подергивание выпадающего меню при выборе опции

— Исправлена ошибка, которая возникала при отсутствии options

— Теперь, при включённом автокомплите, можно заполнять поле ввода значением для поиска двумя способами - нажатием клавиши Enter, либо вводом запятой

Обновления библиотек в Figma

Приём, дизайнеры! Чуть-чуть обновили библиотеки, держим вас в курсе.

Обновление библиотеки с иконками

— Добавились иконки в размере 24×24 и изменилась буква i в иконках info. Полный список новых иконок смотрите на сайте.

Спасибо всем ребятам, которые участвовали в создании иконок: София Бернацкая, Петр Советов, Ирина Макушева.

Обновление в библиотеке компонентов

Ничего критичного, актуализировали компоненты, которые недавно появились или изменились в коде.

— TagItem: добавилось состояние ошибки.

— Slider: больше не помечается как компонент в разработке. Можно использовать без опасений.

— Scroll: больше не помечается как компонент в разработке. Дизайн-система стилизует нативный скрол.

— Code: отмечен как устаревший. Реализации в коде нет, в дизайне больше не поддерживается.

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

Всем привет. На связи Денис Пушкарь, оунер Дизайн-системы. Мы начинаем в регулярном формате публиковать новости, планы, и даже факапы Дизайн-системы, (а также учимся рассказывать об этом интересно=).
Для чего нужен Дайджест? Всю дорогу мы много работаем, но мало что рассказываем, а это создаёт барьеры и непонимание между продуктом и всеми, кто им пользуется, или как-то связан. Долой барьеры!

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

Событий в продукте происходит много, а проблем и неопределённостей ещё больше, поэтому раскрывать детали и углубляться в темы я буду постепенно. Для этого дайджест и задумывался.

Что делаем сейчас

Глобально — мы делаем два продукта.
Один вам хорошо известен, это Дизайн-система Ростелекома. Второй, это коммерческий продукт Дизайн-система Атомаро.
У каждого из них своя стратегия развития.

Главный клиент продукта — сам Ростелеком, РТК ИТ, и вендоры. Пользователи: дизайнеры, разработчиков и команды проектов. На данный момент мы добились консистентности использования в корпорации, дс применяется на 150+ проектах. Поэтому продукт с начала года развиваем в глубь, в качество кода, а также поддержку и обучение пользователей.
Еженедельная аудитория проекта: 1000-1200 человек. Это большая цифра и нагрузка, при том что у нас вся команда 8 человек, а выделенной техподдержки нет. Поэтому мы ввели дежурство в чате поддержки. Каждый день по расписанию выделяется один разработчик из нашей команды, который мониторит чат, и реагирует на все запросы в течение дня. С начала года обработали 142 заявки, в среднем два запроса в день. Это и вопросы, и найденные баги, и помощь с первым использованием. Все найденные баги дежурный заводит в задачу, после решения которой мы отписываемся стейк-холдеру о том, что проблема решена.
Второе важное направление работы, и она же наша проблема: многострадальные таблицы, которые мы разрабатываем уже полтора года. Первая версия вышла кривой и с кучей багов. С начала года мы начали рефакторить, и практически полностью их переписали.

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

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

Наш коммерческий продукт сейчас на этапе поиска Product Market Fit. Мы ищем сегменты пользователей и клиентов, проверяем гипотезы оффера (т.е. решение работы, на которую нанимается наш продукт). Это исследовательская работа со множеством неопределённостей.
Главные проблемы сейчас: найти бюджеты на системы мотивации (мерч) и бюджет на маркетинговый траффик. Почему это проблемы?
Потому что без мерча нам нечем благодарить респондентов за интервью, и первых последователей за фидбек после использования продукта. А без маркетингового бюджета трудно проверять гипотезы и искать Product Market Fit. Но даже когда эти проблемы будут решены, нас ждёт следующий вызов: посчитать юнит-экономику. Т.е. понять, что продукт может приносить прибыль, и мы не уйдём в минус, когда начнём масштабироваться.

Планы
Для Дизайн-системы Ростелекома — релиз таблиц в этом году, и дальнейшее улучшение качества.
Для Атомаро — мы создаём новые точки касания, это конечно новый сайт, cjm, и онбординг. Планируем релиз нового продукта в начале ноября, следите за новостями=)

Команда
Нас стабильно 8 человек, вот эти парни и девчата:
Денис Пушкарь — оунер;
Денис Плешаков — продакт и архитектор;
Ира Макушева — дизайнерка;
Юля Дельнова — тестировщица;
Дима Шевченко — тимлид разработки;
Сережа Фидлер — разработчик;
Дима Уткин — разработчик;
Данил Старко — разработчик.

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

#Дайджест Дизайн-системы, 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 будут поддерживаться, фикситься, но не развиваться.