Роадмап

Всем привет, вы можете следить за движением задач Дизайн-системы на канбан-доске в нашем проекте в Gitlab.

To be released — в этой колонке скопились уже готовые задачи, ожидающие релиза;
In Progress — в этой колонке задачи, над которыми работает команда в данный моменты;
Next — это список первостепенных задач, из этой колонки мы берём новые задачи после выполнения предыдущих.
Soon — это задачи среднего приоритета, которые мы хотим реализовать сразу после задач в колонке Next.
Backlog — список оценённых и отсеянных задач, но пока без приоритета.
Open — это колонка куда падают все новые задачи от пользователей.

Гитлаб корпоративный и в целях информационной безопасности, нужна учётная запись для доступа.
Если у вас нет учетной записи - напишите письмо на rit.support@rt.ru с просьбой ее создать. В письме необходимо указать ФИО и рабочую почту. Когда УЗ создадут необходимо авторизоваться в git.digital.rt.ru

Текущие задачи и ближайшие

Релиз 6.1.1 Чинили баги, поднимали зависимости.

Изменения:

— Icons. В новых иконках был зашит цвет в svg, из-за чего не срабатывало изменение цветов.

— InputEmail и InputPhone. Исправлена работа forceError. При включенном параметре ошибка отображается до тех пор, пока не пройдет успешно валидация внутри компонента или пока значание error не станет пустым.

— InputDate. Исправлена некорретная работа маски внутри компонента при указании minDate. Последняя цифра года больше не пропадает.

— peerDependencies. Исправлена совместимость пакетов

Сайт дизайн-системы design.rt.ru получил третье место в конкурсе Золотой сайт в номинации лучший usability / UX

Лекторий

Всем привет. Хотим через пару недель провести ряд лекций для дизайнеров и фронтендеров.

Одна из тем — про работу фронтендеров и самые важные понятия, которые нужно знать современному UI-UX дизайнеру. Это позволит сократить разрыв коммуникации между дизайнерами и фронтендерами ❤️

Поэтому, если у вас есть темы или боли, которые можно осветить в лекции, или если хотите выступить — пишите нам)

Релиз 6.2.0 Переписаны импорты иконок, апрувлен МР, исправлены баги.

Изменения:

— Icons. Переписаны импорты иконок в компонентах: Select, Multiselect, TagItem, TagMore. Теперь при прямом импорте не тянутся все иконки в билд, что значительно уменьшит размер бандлов

— Checkbox. Лейбл теперь может наследовать параметр color от родителя, МР Михаила Синякова

— Input. Исправлен баг, из-за которого для размеров small и xsmall с включенным и выключенным параметром fixedLabel, цвет label остается неизменным

— Button. Добавлен параметр children. В 18 реакте ругался на недостающий параметр

Напоминалочка

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

import Button from @design-system-rt/rtk-ui-kit/components/Button/Button/Button

или включите tree shaking в своем сборщике.

Сегодня Microsoft прекратила поддержку браузера Internet Explorer 11 :)

ARTi

Привет друзья! Анонсируем бетку нашего нового бесплатного проекта — онлайн-доску для командной работы ARTi.
Это аналог миро, фигджэм и дравио.

Что может Арти сейчас:
- бесконечный холст;
- сквозное шифрование;
- инструменты рисования: фигуры, текст, карандаш, стрелки;
- все операции на горячих клавишах;

Авторизации нет, для каждой новой доски создаётся уникальный url, по которому доска будет всегда доступна.
Проект мы сделали чуть меньше чем за неделю на основе опен-сорсных решений.
Мы в команде ввели практику подобных быстрых пилотов, пет-проекты, чтобы ненадолго переключиться от нашей любимой Дизайн-системы)
Это уже третий проект, первые два — аватар-мейкер и фигма-бэкап.

#обучение

Пока готовим курс обучения Дизайн-системе, наш разработчик Дима Шевченко написал небольшую заметку о проблемах взаимодействия дизайнера и разраба:

«Основная проблема взаимодействия дизайнеров и разрабов, это его отсутствие 🙂
Чаще всего на проектах, каждый просто выполняет работу на своем месте, не выходя за рамки. Но на самом деле, не взаимодействуя друг с другом, невозможно даже просто хорошо выполнять свою работу.
Частая роблема с точки зрения разработки — слишком сложный дизайн, который трудно(=долго, дорого, никомуненужно) реализовать в коде.
Или если речь о дизайн-системе, то кастомизация дизайн-системы, без предварительного выяснения возможности реализации в коде такого решения.
Всё это можно решить/избежать, если будет нормальный мостик между разрабом и дизайнером. Разраб всегда будет готов рассказать как проще и быстрее сделать то или иное дизайнерское решение. Такой вариант не всегда будет идеальным, но от него можно будет хотя бы оттолкнуться для нахождения компромисса.»

Вопрос к дизайнерам и разработчикам РТК ИТ.

Дизайн-библиотека предлагает компонент ввода СМС-кода, но он не реализован в коде. Хотим понять ваши ожидания, давайте решим его судьбу вместе.

Ден Плешаков сейчас перерабатывает библиотеки в Фигме на вариантсы.
Посмотрите как удобно теперь настраиваются компоненты)

Скоро релиз)

Новый гайд по созданию иконок

Роман Белозёров и Петр Советов подготовили подробное руководство для дизайнеров.

Гайд по проектированию рассказывает про стилистические особенности и визуальные нюансы иконок Дизайн-системы.

Правила публикации помогут довести техническое качество иконки до стандарта, принятого в библиотеке.

Тёмная тема

Наша Дизайн-система с самого начала поддерживает тёмную тему. За это время мы в целом собрали приличный опыт в темизации дизайн-систем вообще.
Сейчас можно вспомнить доклад Дена Плешакова на лектории год назад, актуально до сих пор.
Ставьте 👏 если эта ниша вам интересна, мы продолжим выпуск обучающих материалов.
https://youtu.be/QOJlzv7199Q?t=1659

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

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

Чтобы ничего не сломалось в ваших макетах, библиотеки опубликованы новыми файлами. Вы можете продолжать использовать старые версии библиотек в стартовавших проектах. Скоро устаревшие библиотеки будут отключены как обязательные при создании нового файла, в названии библиотек появится пометка «Устарело». Новые проекты начинайте с новыми библиотеками. Они намного удобнее!

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

Основные изменения:

— Изменена структура библиотек.

— Компоненты пересобраны на новом Autolayout и Variants.

— Всё настраивается в панели свойств компонента, не нужно лезть в слои за скрытыми элементами.

— Компоненты максимально синхронизированы с компонентами в коде.

— Добавлены новые настройки и возможности

Дизайн-система постепенно обретает новый коммерческий облик, у нас появилось название: «Атома́ро». Оно образовано от слова «Атом» и означает атомарный подход к проектированию дизайн-систем. Что дальше? Айдентика, новый сайт, и коммерческие тарифы дизайн-системы.
Катя Мельникова и её девочки из граф-дизайна сделают нам новую айдентику. А Маша Орлова и её дизайнеры сделают нам новый дизайн сайта.

Смотрите полный список изменений на сайте. Приятной работы с новыми библиотеками! 💚

Ребята из соседней команды запилили мерч для наших дизайнеров и написали статью как они это делали.

Ссылка на статью

Статья в фигме, и это прикольный формат, т.к. там много фоток, и в вебе такое тяжело норм сверстать, а в фигме оч удобно читать и рассматривать фотки.

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

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

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

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

Если вам интересны подробности или вы хотите посоветоваться с авторами, пишите Мэгги @MaggyGolomonosova

Приветы, у нас обновления в библиотеках.

Что там по новинкам в Atomaro Icons?
— Добавили новые иконки 16×16, 24×24
— Обновили несколько имеющихся иконок
— Добавили варианты курсора

Что нового в Atomaro Icons RTK?
— Логотип Ростелекома в вариантах, теперь можно выбрать сегмент, ориентацию, наличие слогана, английскую версию, монохромную версию, тёмную тему
— Добавили несколько логотипов продуктов Ростелекома с возможностью включить тёмную тему для них

Чуток багфиксов в Atomaro Web
— В некоторых состояниях RadioButton толщина обводки осталась 1.5px, исправлено на 2px
— IconButton, size:small, исправлен размер на 32×32 (было 36×36, что некорректно)
— В Breadcrumbs исправлено дропдаун меню (был некорректный стиль шрифта у пунктов меню)
— Исправлена высота SegmentedControl accent, size:medium. Высота сегмента в этом размере была меньше, чем нужно.

Смотрите полный список изменений и новые иконки на сайте

Обнимаем 💚