Обновление фигмы?

Вчера совершенно случайно для себя обнаружил изменение в механике оверрайдов свойств текста в Figma. И то ли я проглядел анонс, то ли его не было… или это надвигается так «Конфиг»👀

В общем, теперь стиль не пропадает при изменении некоторых свойств текста: зачеркивание, курсив, жирность, подчеркивание.

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

При этом оверрайды ещё и наследуются при смене стиля.

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

- - - -
#figma #обновление

🛫Канал: Мыслью по древу

Что-то давно ничего не было про SDUI... Исправляем!🙂

Помните, я на Д-в рассказывал про наш собственный редактор интерфейсов, типа «собственная Фигма»?

Напомню, мы в компании делаем SDUI-платформу для мобильного приложения, и к ней разрабатываем собственный редактор. Он не заменяет Фигму, но работает с ней в связке и должен сильно облегчить работу с макетами, ведь у нас верстка автоматизирована. По сути, он позволяет визуально редактировать не макет, а уже сразу верстку экрана — в этом и вся фишка.

Разработка идёт полным ходом, и сейчас уже можно создавать компоненты и экраны. У нас появился менеджер файлов, все данные хранятся в облаке. Но лучше показать, чем рассказывать 😉

Прикладываю видосики. Работы ещё много, но осенью уже планируем пилотные тесты на нашей команде дизайнеров.


- - - -
#вебредактор #вкусвилл #sdui #figma

🛫Канал: Мыслью по древу

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

Разве что стилем. Постепенно переводим дизайн интерфейса в минимализм. Особенно доставляет новая темная тема 😎

Если всё пойдет хорошо, то скоро потрогать SDUI можно будет и в обычной версии приложения 😉

- - - -
#вкусвилл #мобильноеприложение #sdui #demo

🛫Канал: Мыслью по древу

Окна и всплывающие элементы

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

Однако кажущаяся простота оказалась иллюзией и довольно быстро покинула чат, а по мере изучения проблемы задача начала обрастать нюансами.

Сначала была идея создать универсальный компонент, который в зависимости от настроек мог бы работать как тост, снекбар или модальное окно. Кроме того, планировалось сделать единую очередь для их отображения, чтобы если на клиент одновременно поступят, скажем, 3 тоста, 2 снекбара и 5 модальных окон, они не появлялись все сразу, а показывались поочередно в порядке приоритета.

Но вскоре выяснилось, что тосты могут быть как продуктовыми, так и системными. Если с продуктовыми всё было более-менее понятно, то системные тосты включали различные ошибки и разрывы соединения. Возник вопрос: что делать, если в момент показа модального окна происходит разрыв соединения, и нужно отобразить тост? Закрывать модальное окно? Ставить тост в очередь? Я решил поспрашивать коллег и в комьюнити, но оказалось, что в основном все использовали нативные всплывающие окна платформ и подобными впопросами так глубоко не задавались. Ну что ж, пришлось разбираться самостоятельно.

В первую очередь я пересмотрел всю работу со слоями и разработал общую схему для платформы (рисунок 1). В основу легло распределение z-index из старого доброго Bootstrap. После переработки получилось следующее:

🔘 Content — на картинке не подписан, но это самый нижний слой, отвечающий за отображение основного содержимого на экране.

🔘 Dropdown — слой для контекстных меню. В мобильных приложениях это редкость, но на всякий случай пусть будет.

🔘 Sticky — слой для закреплённых элементов. Предполагается использовать его для футеров, хедеров и таб-бара.

🔘 Fixed — самый верхний слой до бэкдропа, на всякий случай.

🔘 Backdrop — затемнение, перекрывающее контент при появлении модального элемента.

🔘 Modal — основной слой для шторок и модальных окон.

🔘 Popover — слой для онбордингов, контекстных меню и других всплывающих элементов с высоким приоритетом. Также сюда предполагается отправлять системные тосты.

🔘 Tooltip — слой для всплывающих подсказок.

В итоге получились два отдельных виджета: Banner и Window. Первый отвечает за тосты и снекбары, второй — за модальные окна. Очередь для них стала раздельной. Системным тостам разрешено образовывать стек с продуктовыми, но не более двух баннеров на экране одновременно (рисунок 2). Теперь осталось провести тщательное тестирование и выявить все возможные "а что если" ситуации. Однако, кардинальных изменений системы, надеюсь, уже не будет 🤞.

P.S. Да, кто-то обязательно спросит: "А почему нельзя использовать нативные диалоги?"
Ответ прост: в них нельзя передавать свою верстку, то есть наши любимые врапперы. А нам очень важна управляемость контента.

- - - -
#дизайнсистемы #SDUI #дизайн #uxui

🛫Канал: Мыслью по древу