#анонс 1

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

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

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

Что сделали:
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

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

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

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

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

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

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

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

#анонс 2

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

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

#анонс 4

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

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

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

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

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

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

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

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

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

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

#анонс 5

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

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

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

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

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

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

#анонс 6

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

#анонс 7

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

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

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

Что обновили:

Кнопки
Перевели на автолэйаут. Теперь кнопки содержат в себе иконки, их можно включать и выключать, отдельную кнопку с иконкой снесли.
Выровняли высоту средней кнопки с высотой инпутов.
Добавили новую мелкую кнопку Small.

Чекбокс
Уменьшили квадрат до 20×20, при этом контейнер остался прежний 24×24.
Дефолтный чекбокс сделали серым, теперь не так ядерно выглядит.
Добавили ховер.

Радиокнопки
По аналогии с чекбоксами сделали и радиокнопки, у них уменьшились кружки, и дефолтное состояние сделали серым.

Свитч
Подкоротили, они были длинные.

Теги
Перевели на автолэйаут, добавили мелкие теги, добавили новых состояний.

Чипсы
Перевели на автолэйаут, добавили новых состояний.

Инпуты
Уменьшили высоту контейнера инпута, он был больше видимой части, что вызывало вопросы. Пояснительный текст (Assistive text) под полем остался, но скрыт по умолчанию. Теперь удобнее пользоваться компонентом: не нужно каждый раз скрывать пояснительный текст (в большинстве случаев он не нужен). (в макетах придется вручную поджать размеры инпутов по высоте, к сожалению, избежать этой проблемы никак не получилось)

Дропдаун
Добавили к дропдаунам наконец выпадающий список со скроллом и без.

Что добавили:

Мультиселект
Дропдаун с возможностью выбора тегов из выпадающего списка.

Поле комментария

Скролл

У большинства старых компонентов мы убрали слой BG, за ненадобностью. Теперь цвет фона в компонентах мы задаём полупрозрачными стилями из Global библиотеки, а скругления ставим у фрейма, т.к. стили графики у нас в целом идут из коробки. Сами компоненты BG при этом никуда пока не деваются, их можно использовать для больших плашек и фонов.


История

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

#вводная

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

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

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