#анонс 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

Друзья, сегодня Figma обновила автолэйаут с новыми настройками и мы экстренно пофиксили компоненты в библиотеке. Если у вас всё ещё что-то ломается — пишите нам, будем чинить.

Вместе с фиксом автолэйаута улетели накопившиеся доработки:

- Размер шрифта Desktop / Description изменился с 12 пунктов на 11, межбуквенное 0.2
- Notification Toast подняли на уровень XL (изменилась тень)
- Заменили стиль текста цифры в чипсах на Desktop / Caption
- Удалили из библиотеки табы старой версии (их давно уже заменили Tabs Classic)

Добавились новые компоненты:

Tooltip, он же popover. Появляется при клике (не забываем про мобильных пользователей), предоставляет дополнительную информацию.

Input Card — поле ввода номера банковской карты. Поддерживает маску номеров, показывает иконку платёжной системы.

Привет! Figma изменила Auto Layout, из-за чего кнопки дизайн-системы могли вести себя некорректно. Вчера мы обновили структуру и настройки кнопок, чтобы библиотека оставалась актуальной и ваши кнопки не ломались.

После обновления в проектах, проверьте кнопки. Кнопки, которым меняли ширину руками, могут сжаться до ширины текста кнопки. Починить просто: выбрать кнопку и сменить Resizing ширины кнопки с Hug contents на Fixed width. Так кнопки вернутся к своей прежней ширине.

Привет! У нас большое обновление библиотеки иконок. Подготовили долгожданный пак уменьшенных иконок в размере 16x16. Всего 162 штуки, аккуратно уменьшенные версии больших иконок в нашем стиле. Плюс 51 новая иконка и небольшие изменения в размере 24x24.

Обратите внимание, в коде иконки 24x24 допустимо увеличивать, передавая параметр size. В Figma вы можете использовать инструмент Scale для массштабирования иконки. Иконки 16x16 не изменяют свой размер, используйте их без масштабирования.

EPIC!
Друзья, сегодня мы запустили релиз со стабильной библиотекой. Компоненты протестированы и готовы к использованию в проектах. Теперь библиотека доступна к просмотру в Storybook. Здесь вы можете посмотреть на компонент в действии, увидеть различные состояния и список доступных параметров компонента, скопировать его код. Подробнее про использование Storybook читайте на странице релиза.

Список компонентов в библиотеке:

- Цвета и темы
- Типографика
- Иконки
- Button
- Function Button
- Icon Button
- Checkbox
- CheckboxGroup
- Chip
- InputNumberStepper
- Input
- Input Email
- Input Amount
- Input Phone Number
- RadioButton
- RadioGroup
- Stepper
- Sticker
- Switch
- TabsClassic
- TagItem
- TagGroup
- TextArea