#обучение

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

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

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

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

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

Скоро релиз)

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

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

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

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

Тёмная тема

Наша Дизайн-система с самого начала поддерживает тёмную тему. За это время мы в целом собрали приличный опыт в темизации дизайн-систем вообще.
Сейчас можно вспомнить доклад Дена Плешакова на лектории год назад, актуально до сих пор.
Ставьте 👏 если эта ниша вам интересна, мы продолжим выпуск обучающих материалов.
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

#дайджест_технологий

В нашей команде появилось новое регулярное мероприятие, в рамках которого разработчики обсуждают одно или несколько решений/инструментов, которые могут быть применимы для Дизайн-Системы или других наших сайд-проектов. По итогу нашей встречи мы резюмируем результат в короткий отчет, который будем публиковать сюда. Первым инструментом для обзора стал Blitz.JS. Вся команда очень вдохновилась представленным решением и нам захотелось поскорей его опробовать в бою. Возможно до конца года нам это удастся 🤞

#дайджест_технологий

Blitz.JS — полноценный fullstack-toolkit для Next.JS. Эквивалент Ruby on Rails, но для JavaScript и React. Вы получаете все самое лучшее от Next.js и все, что нужно для создания полнофункционального приложения.

Плюшки Blitz.JS:
- в новых проектах по дефолту настроены все скучные вещи по типу Prettier, Eslint и Jest
- Zero-API — собственный транспортный протокол, основаный на удаленном вызове процедур, который абстрагирует уровень API. Разработчику не нужно возиться с REST или GraphQL API. Blitz позволяет писать функции, которые запускаются на сервере и импортировать их в ваши компоненты React
- Authentication — из коробки в Blitz.JS есть функционал для управления сессиями пользователей. Авторизация, аутентификация, сбор пароля и восстановления пароля, всё есть. Также можно с легкостью добавить авторизацию через социальные сети и сторонние сервисы, используя стратегии Pasport.JS
- Data Layer — для работы с данными в Blitz.JS используется Prisma 2. Prisma — Это современная ОРМ для Node.JS и Typescript. Она упрощает подключение к БД, выполнение запросов, миграции и моделирование БД

Blitz.JS — очень мощный, многогранный инструмент, который делает за нас большую часть работы. Позволяет быстро и качественно создавать приложения, где в основе будут заложены современные подходы и решения. Немаловажно отметить возможность легкого масштабирования приложения — важный, но зачастую пропущенный параметр, особенно при быстрой разработке и создании MVP

Релиз 7.0.0

Аллоха! Мы обновили версию React, выкатили множество багфиксов и доработок, внимательно почитайте анонс

Изменения:

— React. Обновлена версия react на 18.2.0 и другие зависимые библиотеки. Ко многим компонентам добавлен в явном виде параметр children.

— Checkbox. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px. Переделаны ховеры

— RadioButton. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px

— Breadcrumbs. Добавлен ховер, дропдаун с крошками заменен на размер small

— TextArea. Изменен отступ от хинта до счетчика, добавлены параметры: hideLabel, placeholder, size

— Switch. Исправлена центровка текста для размера small

— Input. Для всех видов инпутов изменен цвет текста плейсхолдера на transparent 10. Изменены дефолтный лейблы InputEmail: Электронная почта, InputPhone: Номер телефона

— Stepper. Изменен отступ от текста до кнопок: для medium 4, для small 2

— InputNumberStepper. Исправлено отображение длинных чисел

— Select. Исправлены ошибки: при включенном автокомплите первый клик открывает список и только второй даёт вводить текст, лейбл дергается при клике по селекту, состояние открытого селекта теперь соответствует состоянию инпута в фокусе, открытый дропдаун теперь перекрывает хинт, добавлено описание параметра icon

- EditableText. Исправлена работа параметра value

BREAKING CHANGE В ВЕРСИИ 7.0.0

— Tooltip. Убраны параметры hint, hintSide, image, imageSide. Добавлен размер small. Параметры приведены к единому формату нейминга по компонентам header -> title, text -> subtitle

— TabsClassic переименован в Tabs. Внутренние компоненты, соответственно: TabsClassicGroup -> TabsGroup, TabsClassicItem -> TabsItem, TabsClassicPanel -> TabsPanel. Изменен отступ между табами в размере medium на 40px, добавлены параметры icon и iconPosition

— TabsItem. Добавлен параметр dotEnabled для отображения точки рядом с табом

— Chip. Изменен фон выбранного задизейбленного чипа, отступы в группе чипсов, значения параметра view теперь default и contrast

— TagItem переименован в Tag

Новый компонент

— Popover. Как и тултип, всплывает в указанную сторону при ховере или клике, но может содержать любой контент. Внутренние отступы настраиваются, стрелку-указатель можно скрывать