Лекторий

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

Одна из тем — про работу фронтендеров и самые важные понятия, которые нужно знать современному 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. Высота сегмента в этом размере была меньше, чем нужно.

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

Обнимаем 💚

Привет друзья, рассказываем, чем мы занимались в последнее время и что делаем сейчас:

- Подготовили изменения в коде в связи с новыми библиотеками в Фигма;
- Переезжаем в свой репозиторий. Мы переезжаем из Nexus, в рамках уменьшения зависимостей от других систем и структур;
- Оптимизируем таблицы. Благодаря тем, кто пользовался на ранней стадии нашими таблицами, были выявлены критические непладки с производительностью. Разбили работы на несколько задач. Пока таблицы ещё в закрытой альфа-версии, но вы можете нам написать, если хотите получить ранний доступ;
- Обновление реакта 18 и других зависимостей;
- Разрабатывали новую архитектуру тарифов и разделения на пакеты. Да, у дизай-системы появится платный функционал для внешних клиентов;
- Переезжаем в свой новый namespace в gitlab;
- Переезжаем из okd3 в okd4;
- Баги по селектам;
- Готовим обновленный пакет с иконками;
- Пишем лекторий:)
- Дописываем инструкции для контрибьюторов;
- Добавили в библиотеки в Figma инструкции по перелинковке стилей со старой версии (DS RT Global Style) на новую (Atomaro Style);
- Обновили библитеки в Figma с иконками и логотипами, пофиксили несколько багов в Web библиотеке;
- Переработали в Figma компонент Tree (иерархический список) под новые возможности варианта (релизнем как только допишем тесты для компонента в коде);
- Скоро так же обновим под новые варианты компонент TableGrid.
- Готовим крупный релиз в новом репозитории.

Будем регулярно держать вас в курсе того, что мы делаем, на скриншоте роадмап)

Портфолио

Привет друзья, на Дизайн-системе сделано более 100 проектов, мы собрали часть макетов и скриншотов в фигме. Осторожно, много картинок, грузится долго.

37 проектов клиентских, 29 профессиональных интерфейсов, 5 мобильных приложений и ещё около 40 проектов, до которых мы не добрались:)

Изначально мы делали дизайн-систему с закосом под клиентские красивые интерфейсы, но видно, что на ДС сделано много профессиональных интерфейсов — админки, crm-ки, erp системы. И потребность только растёт.

Поэтому мы берём курс на поддержку таких проектов:
1. Больше компонентов в маленьком размере, чтобы делать плотные высоконагруженные системы;
2. Бо́льшая кастомизация системы в сторону контрастности компонентов для читабельности (обводки, меньше прозрачных текстов и т.д.);
3. Паттерны в коде как контейнеры — дашборды, боковые меню, хэдеры, и т.д.;
4. Готовые шаблоны для быстрого запуска проекта.

Привет друзья. Написали на хабре статью про дизайн-системы, поддержите лайком, пишите сюда комменты, вопросики
https://habr.com/ru/company/rostelecom/blog/684816/

Рассказываем чем занимались

- Заканчиваем оптимизацию таблиц
- Начинаем доработку Select и Multiselect по асинхронной загрузке
- Доработка Select и Multiselect по виртуальному скроллу
- Переделали Tooltip
- Сделали новый компонент Popover
- Продолжаем готовить большой релиз
- Инфрастуктурно готовим репозиторий
- Заканчиваем переезд на новый namespace в гитлабе и okd
- Немного причесываем ARTi