Привет! Это канал бесплатного проекта онлайн-доски Арти https://design.rt.ru/tools_public/arti
Здесь мы будем делиться новостями и планами развития проекта.
Арти — это сайд-проект команды Дизайн-системы Ростелекома, который мы запустили для себя и сотрудников ртк ит, как простую замену миро.
В Арти можно проводить мастер-классы, ретроспективы, стратегии, вести документирование встреч. А также: рисовать роадмапы и схемы, прототипы интерфейсов, CJM, и слайды для презентаций.

Текущий функционал:
1. бесконечный холст;
2. сквозное шифрование;
3. совместное редактирование;
4. инструменты рисования: фигуры, текст, карандаш, стрелки;
5. все операции на горячих клавишах;
6. уникальные url зашифрованных досок;
7. «вечные» доски.

В чат @arti_board_chat можно писать вопросы или предлагать улучшения.

К нашей команде присоединились тестировщицы!

Таня Ильющенко и Юля Дельнова теперь занимаются QA в проекте дизайн-системы: поиском багов и несоответствий и тестированием всех изменений. Мы задали девочкам несколько вопросов, чтобы познакомиться.

– Таня, Юля, как видите свою миссию на проекте?
🔹Юля: Сломать всё, что можно сломать!
🔸Таня: И сделать так, чтобы дизайн-система не попала в канал UI фэйл 😛

– Что стало вашей первой задачкой?
🔸Таня: Мы начали с налаживания процесса QA вместе с ребятами и нашим лидом Никитой Орловым, чтобы все issues в GitLab проходили этап тестирования перед включением в релиз.
🔹Юля: Ещё мы сопоставили компоненты в Storybook и Figma – заметили, что некоторых компонентов в Figma не хватает, и решили с этим разобраться. А сейчас занимаемся тестированием компонента Input Card.

– Какие впечатления сложились о дизайн-системе?
🔸Таня: Дизайн-система — интересный проект со своими особенностями тестирования. Например, нужно правильно выстроить последовательность проверки разных источников, так как компоненты есть и в Storybook, и в Figma, и в коде.
🔹Юля: Ещё нам очень понравилась сама команда – никакой бюрократии, дружеская атмосфера, живые обсуждения. И все включают камеры на встречах!
🔸Таня: Да, все ребята активные, интересные, всегда готовы помочь. Очень рады стать частью команды!

Мы уверены, что благодаря Тане и Юле качество дизайн-системы будет расти от релиза к релизу. Если же какой-то баг всё-таки проскочит мимо девочек, его можно зарепортить в наш GitLab или описать в чате — мы обязательно посмотрим и ответим!

Новости Дизайн-системы Атомаро

1. Тестировщицы навалили багов на новый компонент InpudCard. Все рады, особенно Дима Уткин, который его делал.
2. Работы по темизации Дизайн-системы для Спектра идут вовсю. Токенизировали Checkbox и уже заканчиваем RadioButton. На следующей неделе приступаем к Input.
3. Проконсультировали проект Датапорт по разработке собственного ui-kit на Vue.js + рассказали про наши планы на следующий год по написанию универсального кита на WebComponents.
4. Выпустили патч для 5-ой версии ДС — помощь команде Ключ, которая пока не готова технически переезжать на 7-ю актуальную версию ДС.
5. Проводим внутри команды регулярный дайджест технологий, на котором начали разбирать компоненты на предмет качества кода, архитектуры, структуры, и дальнейшей масштабируемости. Это позволит заранее определить возможности улучшения Дизайн-системы.
6. Планируем в декабре провести крекер на Ростелеком про цикл жизни дизайн-систем.

Дайджест новостей недели

🔹Протестировали новый компонент InputCard, зарепортили баги и перешли к тестированию SegmentedControl
🔹Закончили токенизирование в коде компонента RadioButton и приступили к компоненту Switch
🔹Переосмысливаем компонент Input как в дизайне, так и в коде, чтобы его можно было легко кастомизировать с минимальным количеством токенов
🔹Лечим баги в компоненте Tree
🔹Долго собираем релиз 7.1.4, где должны решить проблемы с DropdownMenu и Multiselect. В релизе 6.3.0 мы перенесли логику множественного выбора из Multiselect в DropdownMenu, вылезло много багов. Решили откатить доработку, но так как она затрагивает много других компонентов, а после 6.3.0 было много изменений, это заняло некоторое время. Но основные проблемы решили и сейчас находимся на финальной стадии тестирования релиза

Как мы ищем дизайнера в команду

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

1. Понимание специфики дизайн-систем

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

2. Хороший UI и системное мышление

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

3. Софт-скиллы

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

Кандидат уже принял оффер. Но наша дизайн-студия всегда ищет таланты и кроме уже стандартного для IT соцпакета (премии, ДМС и разные компенсации) даёт возможность стать частью большого коммьюнити талантливых дизайнеров — узнавать новое, делиться своим опытом, а заодно и прокачивать навыки самопрезентации на лекциях и воркшопах. Чтобы стать частью нашей команды, присылайте ваши резюме и портфолио на Design.job@rt.ru

Дайджест новостей недели

🔹Завершили токенизацию компонентов Switch и Input
🔹Токенизируем компонент DropdownMenu и дорабатываем его функционально: пункты меню можно будет группировать и отделять линией, у каждой группы появится заголовок. Также предусмотрели контейнеры, в которые можно будет поместить другие элементы (например, поле поиска или кнопку) и расширить возможности DropdownMenu под разные продукты
🔹Продолжаем тестировать компонент SegmentedControl, доделываем пул тест-кейсов по компоненту InputCard в Figma
🔹Наш продакт-оунер Денис Пушкарь выступил на онлайн-митапе SuperJob и рассказал про цикл жизни дизайн-систем
🔹Пообщались с командой дизайн-системы МТС — обсудили общие боли, планы и технические решения. Вышло очень плодотворно и интересно!
🔹Тимлид разработки Дима Шевченко и аналитик Юля Берникова из нашей команды выпустились из Школы тимлида РТК ИТ. А Дима ещё и стал лучшим учеником своего класса — поздравляем! 🥳

У нас вышла статья на хабре про то, как Дизайн-система повлияла на цифровую трансформацию Ростелекома

https://habr.com/ru/company/rostelecom/blog/706288/

Релиз 7.2.0

Привет! Включаемся в рабочий режим после праздников и начинаем год с обновлений — допилили два новых компонента, исправили баги, поработали над улучшением документации в сторибуке

Новые компоненты
— InputCard: поле ввода номера банковской карты
— SegmentedControl: группа кнопок-сегментов для переключения состояний или смены контента

Изменения
— InputDate. Исправлена критическая ошибка, приводившая к падению приложения, при параметре isRange=true и изменении первой даты периода
— Multiselect. Исправлена работа колбэк-функции при удалении тега. Добавлены параметры dropdownClassName, dropdownStyle — они отвечают за стилизацию DropdownMenu в компоненте
— Select. Исправлено поведение параметра dropdownStyle, при котором стили применялись к Input

Изменения в Storybook
— Переименованы примеры с Basic на Examples
— Добавлен пример импорта компонента
— Блок ShowCode раскрыт по умолчанию
— Для ShowCode включено динамическое отображение. В некоторых компонентах показывается весь код
— Options в ArgTypes вынесены из Control
— Убран код, потерявший актуальность (промоакция с футболкой)
— В Textarea убрана неиспользуемая переменная hideLabel внутри компонента

Релиз 7.2.1

Не останавливаемся, сразу чиним то, что сломали в предыдущем релизе =) Константин Поленков, спасибо за моментальный фидбек! 💚

Изменения
— Dependencies. Добавлена библиотека card-validator в зависимости

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


«Для реализации дизайн-системы в коде используются различные технологии. Наиболее распространенными являются HTML, CSS, JavaScript и фреймворки для них.

HTML — является сущностью, на которой основывается дизайн-система. Он используется для создания структуры страницы, и это может быть реализовано, используя различные HTML-теги, такие как div, span, h1, h2, p и т.д.

CSS — является «костюмом», которым одевают HTML-элементы. CSS-код позволяет украсить HTML-код, указывая цвет, размер, отступы, рамку и многое другое.

JavaScript — это «мудрость». JavaScript-код позволяет реализовывать различные функции, такие как: анимация, AJAX-вызовы, обработку форм, вывод уведомлений и т.д.

Фреймворк — это «костюм», «мудрость» и «сущность». Фреймворк — это комбинация HTML, CSS, JavaScript-кода, который помогает ускорить разработку web-дизайн-системы.»

Насколько понятно такое объяснение для человека не сильно погруженного в разработку? Можете поделиться мыслями текстом или реакцией. Как бы вы объяснили что такое дизайн-система в коде?

Релиз 7.3.0

Поправили несколько багов, переписали позиционирование для Tooltip и Popover

Изменения

— EditableText. Исправили периодические сбои в поведении компонента

— Multiselect. Исправлена проблема с отображением тегов выбранных элементов по дефолту внутри инпута

— Checkbox. Убрано лишнее всплытие события при клике на чекбокс

Изменения Tooltip, Popover

— Добавлена библиотека Popper.js для позиционирования

— Переписана логика позиционирования Tooltip и Popover, исправлены ситуации, при которых тултип перекрывался другими элементами и пропадал из зоны видимости

— Теперь тултип автопозиционируется не только при placement = auto, но и в остальных случаях. Добавлены новые позиции autoLeft и autoRight

— Новый пропс useInPortal переключает использование Tooltip, Popover на порталы (React createPortal), по умолчанию true

— Отличия: Pointer позиционируется по-другому, теперь стрелка указывает на центр элемента (кроме позиций top, left, bottom, right)

Релиз 7.3.1

C первыми весенними деньками! Сегодня у нас работа над ошибками и новый хук

Изменения

— Select. Исправлена ошибка, при которой с включенным autocomplete выпадающее меню не сворачивалось при нажатии на стрелку

— Multiselect. Исправлена ошибка, при которой при добавлении значений в value, они не отображались в поле ввода, но при этом выпадающий список выглядел корректно

— SegmentedControl. Добавлено затемнение фона при наведении на сегмент

— Tooltip, Popover. Исправлено позиционирование в закрытом состоянии. Теперь всплывающие элементы не изменяют высоту страницы

— Tooltip. Исправлен баг некорректной работы тултипа, внутри которого находится кнопка, обернутая кастомным компонентом

— Исправлена ошибка, при которой невозможно было использовать некоторые компоненты без ThemeProvider

— UsePopper. Добавлен новый хук, основанный на библиотеке popper.js.org. Служит для корректного и легко настраиваемого позиционирования всплывающих элементов. В сторибуке есть пример использования

Дизайн-система получила корпоративную премию «Бизнес-прорыв»

На Атомаро за три года реализовано 100+ проектов. Недавно состоялась первая коммерческая продажа лицензии ведущему производителю виртуального и инфраструктурного ПО. Финансовый успех — один из критериев для участия в премии.

https://portal.it.rt.ru/article/747

ПЦП сегодня объявило о том, что с 09.03.2023 будут отключены зеркалирующие репозитории для всех языков. Это означает, что пакеты с нашим ui-kit перестанут быть доступны по адресу — https://nexus.digital.rt.ru/

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

registry=https://registry.npmjs.org/
@design-system-rt:registry=https://repo.digital.rt.ru/repository/npm-group/

Также, мы готовим свой репозиторий и вы можете принять участие в его тестировании. На данный момент на нем доступны версии 7.3.0 и 7.3.1. Располагается он по адресу — https://atomaro-registry.apps.okd.stage.digital.rt.ru/
Файл .npmrc в таком случае должен выглядеть так:

registry=https://registry.npmjs.org/
@design-system-rt:registry=https://atomaro-registry.apps.okd.stage.digital.rt.ru

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

Если возникают сложности, вопросы, проблемы, предложения, пишите в чат, мы поможем

С днем новых компонентов для дизайнеров! В дизайн-системе пополнение: слайдер и 150 (вау) иконок. Давайте посмотрим, что же там интересного.

Обновление Atomaro Web

— Slider: теперь можно легко выбирать желаемое значение или диапазон значений, перемещая ползунок по треку слайдера. Компонента пока нет в коде, добавим в следующих релизах

Обновление Atomaro Icons

— Добавили новые иконки 16×16 и 24×24
— Обновили названия нескольких имеющихся иконок
— Добавили новую категорию Logotypes для общеупотребимых логотипов, не связанных с Ростелекомом.

Обновление Atomaro Icons RTK

— Добавили 24 новые иконки

Полный список новых иконок смотрите на сайте

Спасибо всем ребятам, которые участвовали в создании иконок 💚

Бальцер Артур, Макушева Ирина, Мухаметшин Ильназ, Нигматулина Гузель, Плешаков Денис, Советов Петр, Середа Анна, Слизков Константин

Всем хай! Хотим поделиться с вами новостью: у нас вышел гайд для дизайнеров о том, как правильно подготовить макеты к разработке, избежать частых ошибок и сделать так, чтобы разработчик вас любил.

Что интересного

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

— Почему не стоит детачить компоненты

— Как навести порядок в файлах и сценариях

— Какие технические моменты должен учесть дизайнер

— Как стать любимчиком фронтендера

И многое другое!

Приятного чтения 💚

Релиз 7.3.2

Патч с фиксами, повышаем стабильность компонентов

Изменения

— Select. Исправлен баг с не работающим onFocus при нажатии на иконку стрелку

— InputNumberStepper. Исправлена ошибка: при выборе только одного параметра из max или min, оставалась возможность ввести вручную число больше максимального/меньше минимального

— Улучшения сторибука. В компонентах Input добавлен выбор иконок для параметров iconLeft и iconInputField

Релиз 7.3.3

Патч с фиксами, повышаем стабильность компонентов

Изменения

— RadioButton. Псевдокласс :hover теперь находится на уровне label. Ситуации, при которых стили hover не применялись, исключены

—Tooltip, Popover: В параметре placement исправлены выпадающие элементы, которые отображались не в соответствии своим названиям: topRight/topLeft, bottomRight/bottomLeft, leftTop/leftBottom, rightTop/rightBottom

— Tooltip, Popover: Поправлено позиционирование. Тултип больше не «прыгает» в сторону при появлении. Добавлены параметры tooltipClassName и popoverClassName, непосредственно относящиеся к самому элементу, а не обертке

Переработка DatePicker, часть 1

Компонент полностью переработан. При этом все пропсы остались неизменными. Компонент собран на модульной архитектуре

— calendarMode. Добавлен пропс calendarMode, который принимает одно из значений: YEARS_ONLY, YEARS_WITH_MONTH, YEARS_WITH_MONTH_DAYS, YEARS_WITH_MONTH_DAYS_TIMES, MONTHS_ONLY, MONTHS_WITH_DAYS, MONTHS_WITH_DAYS_TIMES, DAYS_ONLY, DAYS_WITH_TIMES, TIMES_ONLY. Примеры работы каждого из режимов смотрите в сторибуке

— today. Доработана функциональность отображения сегодняшней даты. Теперь сегодняшняя дата отображается для дней, месяцев, лет и времени

— renderDate. Callback renderDate теперь помимо даты возвращает аргумент view. View — это контекст календаря: 'time' | 'day' | 'month' | 'year'. Используйте view для точечной стилизации дат, времени, лет или месяцев