Друзья, у нас пополнение инструментария! А именно внутренние контентные сетки. Звучит страшно, но работать с этим реально удобно. Они помогут вам быстро и просто разместить контент на странице с учётом адаптива. Описание раз, два
P.S. Также прилетит апдейт на кнопки, инпуты и лейблы, не переживайте, это техническое обновление, в макетах ничего не изменится

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

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

1) Мы не добавляем новые компоненты, а используем текущие полные кнопки, в которых благодаря автолэйауту выключаем текст и оставляем одну иконки. Это работает, но кнопки продолговатые получаются, из-за боковых отступов

2) Второй вариант — мы добавляем новые компоненты, конкретно укороченные кнопки, и они квадратные.

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

P.S. Народ, хочу еще раз уточнить, что у кнопок колбаской больше площадь нажатия для пальца, и проще библиотека. А квадратные эстетичнее, но надо плодить новых компонентов

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

Rounded Small → Rounded;
Rounded Large → Circular.

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

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

#анонс 11

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

Глубина в интерфейсе;

Нулевой уровень;

Уровни и тени;

Затемняющий слой;

Визуальная иерархия;

Уровни при взаимодействии;

Уровни типовых элементов.

Совет #2

У нас есть чат! В чате можно спросить совета, поделиться наработками, болями или подискутировать. Велкам. @chat_ds

Совет #3

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

#анонс 12

Друзья, мы продолжаем наполнять библиотеку компонентов.

Добавили поле ввода даты с масками и календарём.

И сам календарь, Date Picker, с выбором дня, периода, месяца и года.

Новые квадратные/круглые кнопки-иконки. Пригодятся для компактного размещения кнопок действия.

Плавающая кнопка, аналог Floating Action Button, с возможностью выбора дополнительных действий.

Обновление 9

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

Также, по вашей просьбе, мы добавили ко всем инпутам и дропдаунам состояние «Неактивный заполненный» Disabled Filled.

И, конечно, новые компоненты!

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

Новый контрол — ползунок Slider для быстрой настройки или выбора значения одним жестом.

С сегодняшнего дня доступ на просмотр библиотек дизайн-системы открыт для всех из команды RTK IT, а не только по инвайту

#анонс 13

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

1. В фигме вам упадёт уведомление о том, что вам расшарили проект.
2. Нажмите на «Accept», и тогда проект с библиотеками закрепится у вас в папке «Shared Projects» в левом меню.

Теперь библиотеки вам всегда доступны на просмотр. При этом библиотеки на панели Assets всё-также доступны для использования абсолютно всем дизайнерам в нашем пространстве фигмы RTK IT.
P.S. если кому-то не пришло приглашение, напишите мне

#анонс 14

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

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

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

Что нового:

В библиотеке появились нотификации aka уведомления, aka toasts, aka snackbars. Вылетающие из-за края экрана и встроенные. С разными статусами и кастомизируемые.

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

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

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

Изменения и доработки в полях ввода:
• пофиксили налезание текста на иконки;
• добавили правила обрезки слишком длинного текста лейбла, если он не помещается в поле ввода;
• новое состояние у мультиселекта - отображение всех выбранных опций. Несколько вариантов поведения – читайте описание.

Переименование компонентов:
• Label переименовываем в Sticker – так он будет отличаться от лейблов в полях ввода;
• Dropdown и Dropdown Multiselect переименовываем в Select и Multiselect – как оригинальный тег select в HTML;
• Menu Select и Menu Multiselect переименовываем в Dropdown Menu Select и Dropdown Menu Multiselect – семантически так будет правильнее.

Нейминг темизации:
• Тёмная / светлая тема теперь подписываются как day / night;
• Цвета библиотеки, имеющие пару для темной и светлой темы теперь называются одинаково и подписаны day / night. Это нужно для упрощения темизации в коде.

P.S. из-за обновления названий тем, обновы вам прилетят вообще на все компоненты, но не пугайтесь, это просто у них имена поменялись 🙂

Друзья, добавляем в библиотеку почти 70 новых иконок и тюним существующие! Промокод изменился, теперь это не бирка в морге, а билетик со скидкой =) В иконке эквалайзера три ползунка заменили на два, как в новой иконке очистки эквалайзера. Иконки скрепки и звена цепи согласовали друг с другом. В иконках увеличения/уменьшения экрана и изменения скорости воспроизведения немного увеличили скругление уголков. У многих иконок скорректировали названия и добавили недостающие теги, теперь у залитых иконок добавляется в имени «Fill», вместо «On» и «Off»

Новые иконки:

• Speed Playback
• Subtitles
• Subtitles Fill
• Speed 8х
• Play Previous
• Play Next
• Fast Rewind
• Fast Forward
• Fast Rewind 5s
• Fast Forward 5s
• Fast Rewind 10s
• Fast Forward 10s
• Fast Rewind 15s
• Fast Forward 15s
• Fast Rewind 30s
• Fast Forward 30s
• Equaliser Clear
• Attachment Link Break
• Statistics Curve
• Rename
• Split
• Shuffle
• Union
• Merge
• Group
• Food
• Coffee Break
• Delivery Bus
• Delivery Box
• Delivery Envelope
• Delivery Courier
• Vacation Sea
• Vacation Beach
• Present
• Incognito
• Statistics Board
• 4K screen
• Puzzle
• Ship
• Object
• Target
• Pulse
• Atom
• Heart Broken
• HandBreak
• Camera Group
• Registator
• Thermal Imager
• Microcircuit
• Chip
• Thermometer
• Face Grin
• Face Grin Fill
• Face Smilling
• Face Smilling Fill
• Face Neutral
• Face Neutral Fill
• Face Frouning
• Face Frouning Fill
• Face Rage
• Face Rage Fill
• Face Open Mouth
• Face Open Mouth Fill
• Lego
• Github
• Gitlab