Design-System RT

#обновление 5

Привет! выкатываем новые компоненты и обновления старых.

#анонс 7

Привет. С Дизайн-системой работает всё больше новых людей. И чтобы упростить знакомство с системой, мы собрали актуальную презентацию с подробным рассказом о её структуре, принципах и планах развития. И конечно всегда можно задать вопрос в чат:)

#анонс 6

Друзья, мы наконец прописали глубже и полнее принципы респонсива в Дизайн-системе.
Состоят из двух разделов, это конечно же брейкпойнт-фреймы с сеткой и адаптивная система отступов в контенте.
Добавились новые брейкпойны и сетки к ним, это 768 и 1920, а 1280 эволюционировал в 1440.
Новые отступы заложены в виде компонентов, их можно вставлять в макеты, чтобы сверяться с системой и показать разработчику.
Пишите в чат, если что непонятно, всем хорошего дня!

#анонс 5

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

Лейбл
Удобный компонент, которым можно показывать статусы в интерфейсе.

Редактируемый текст
Когда нужно добавить возможность редактирования текста, но инпут для этого не подходит.

Функциональная кнопка
Полезная служебная кнопочка с иконкой.

Заголовок с кнопкой назад
Основа простой навигации, это молекула в составе которой заголовок и функциональная кнопка. Компонент адаптивный, в мобильном виде сокращается до заголовка + иконка. Планируем для десктопа еще добавить вариант с хлебными крошками.

Инпут с маской мобильного телефона
Добавляем компонент поля ввода мобильного телефона. А также наши рекомендации к оформлению и валидации этого поля.

#обновление 4

Типографика!

Обновили текстовые стили, что нового:
Выровняли размерность у большинства стилей, теперь они органичнее и правильнее работают в адаптиве.
Сделали это, переназначив текущие стили, например в десктопе H2 часто применялся как H1, мы его таким и сделали. Так что в целом в макетах ничего не сломается и не поедет.
H1 который почти нигде не применялся, переименовали в Mega и прописали ему правила использования.
Жирные боди теперь H3 и H4, что логично, т.к. везде применяются как заголовки.
Button как бесполезный стиль, превращаем в Accent, который можно использовать в ценниках, карточках с инфой и т.д.
Гайд в витрине. А также большая подробная таблица изменений старых стилей на новые. Вместе со стилями прилетит и обновление кнопок и инпутов, потому что в них тоже изменятся стили текста, не пугайтесь, это нормально:)

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

#обновление 3

Новая система цветов

Друзья, вы наверняка видели и пользуетесь цветами из Global Style.
Нам цвета не очень нравились, потому что на этапе старта работ по Дизайн-системе мы перенесли цвета из брендбука, тогда это казалось правильным. Но они, мягко говоря, не очень подходят для интерфейсов. Плюс, для темной темы оформления не у всех цветов были пары, а у тех что были, собственно и не предусматривались для тёмной темы. И это вызывало множество проблем.
Мы проработали новую цветовую схему, в которой все цвета присутствуют для обоих тем оформления, и они прекрасно между собой сочетаются. Цвета выверены по яркости и насыщенности с учётом особенностей восприятия тёмного интерфейса. Также мы проработали черно-белую палитру и выровняли оттенки. Бренд палитру тоже оставили.
Написали подробный гайд, как этим пользоваться.
Таблица изменений в цветах.

#анонс 4

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

Вот примерный план обновлений:

3.04 Пт. Метрика тех.долга;
7.04 Вт. Новые цвета и описание;
8.04 Ср. Типографика;
9.04 Чт. Новые компоненты (Инпуты, ввод телефона, редактируемое поле, коммент, функц. кнопка, заголовок с навигацией, лейбл);
10.04 Пт. Принципы респонсива;
13.04 Пн. Новые компоненты (обновленные кнопки, контролы, дропдаун, скролл, мультиселект);
15.04 Ср. Принципы валидации полей (Первая статья в дизайн-принципах).

#анонс 2

Друзья, анонсируем гайд-процесс, по которому мы будем обновлять и вносить изменения в библиотеки.
Знаю, вас это очень волнует, и нас тоже. Не хочется, чтобы после обновления в макетах всё поехало и сломалось.
Полный гайд в витрине http://design-system.docs.restr.im/library_update_process/

Кратко:
1. Компоненты проверяем по чек-листу;
2. Тестируем и проверяем, где и в каких проектах могут быть проблемы в макетах и в коде;
3. Описываем;
4. Обновляем;
5. Анонсируем;
6. ??????
7. PROFIT!!!!!

Вот и подъехало #обновление 2

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

1. Seiling camera
2. Barrier
3. Counter, Meter

А также обновили угол скругления у «Street camera», после госолования на прошлой неделе. Половина дизайнеров проголосовала за скругленный угол — мы такой и сделали:)

Тикет https://trello.com/c/j8CyFg6o/19-иконки-для-видео

#голосование 1

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

Что сделали:
1) Arrow left down
2) Arrow right up
3) Call Incoming
4) Call Outgoing
5) Nocoming
6) Incoming Mail
7) Outgoing Mail
8 ) Mail Inbox
9) Send
10) Attachment Link
11) Attachment Link Add
12) Camera
13) Street_camera
14) Intercom
15) Dark theme Off
16) Dark theme On
17) Checklist
18) Statistics Circular
19) Statistics 2

И следом первое #обновление
Новые иконки!
Тикеты:
https://trello.com/c/j8CyFg6o/19-иконки-для-видео
https://trello.com/c/rdC09faX/13-круговая-диаграмма
https://trello.com/c/PrY3Tf7v/21-иконки

#анонс 1

Друзья, всем привет. Мы перенесли доску для контрибьюций в трелло и добавили все рабочие почты всех дизайнеров в команду в трелло. Теперь доска всем доступна для чтения и редактирования. Вэлкам!
Сама доска https://trello.com/b/XiDJ8SDr/contribution-to-the-design-system-rt

p.s. если кому не пришло приглашение, пишите @DenPushkar

Доска контрибьюций https://www.notion.so/designrit/5f48a03d51ab4acca6af36c72fecc700?v=ed9af1adb7884b7689c21c649f590222

Витрина http://design-system.docs.restr.im/

Друзья, спасибо что подключились