Недавно произошёл редизайн Figma⚹¹ и я решил поделиться своим очень важным мнением :)
Привет, Я UX/UI-дизайнер, то есть целевая аудитория Фигмы. На протяжении многих лет это мой основной инструмент работы, я облазил её вдоль и поперёк, был в числе первых бета-тестеров, кто пощупал авто-лэйауты и переменные. И теперь когда я заручился вашим доверием, могу переходить к критике и похвале интерфейса.
Сразу ссылочка на мой тг-канал, там статья появилась неделю назад (тут была на модерации):
Внимание, в конце статьи есть интересные ссылки!
Я тут не буду писать про Figma Slides или обнову DevMod, сконцентрируюсь только на самой Фигме с её core-функционалом (редактором).
Первое впечатление: пока жутко неудобно и жутко интересно. Появились новые функции, о которых мы все мечтали и немного того, что снились нам в кошмарах.
Самая главная обнова — глобальная интеграция AI, и он пока ещё абсолютно бесплатный и немного бесполезный. Но не думаю, что это продлится долго (я про бесплатность; думаю, его ждёт судьба DevMod).
Теперь вы можете генерировать изображения, нативно удалять фоны (прощай icon8), переименовывать слои. Он даже -есть за вас будет- может генерировать дизайны. Правда, это происходит очень сильно "так себе", просишь сгенерировать экран книжной читалки, а он генерирует книжный магазин и при этом постоянно детачит компоненты (можно прямо увидеть, что он вставил компоненты из китов, а в конце просто задетачил их)
Вторая по важности новинка — реструктуризация тулбара. Переработали всё, что-то исправили, что-то ухудшили. Изменили не только структуру, но даже иконки, придётся ко всему этому заново привыкать.
Тут же заметил минусы: например, теперь для "clip content" нужно сделать два клика, потому что тоггл заменили на дропдаун зачем-то. Та же судьба постигла и настройку Constraints (о ней в конце).
Кстати, можете проголосовать на форму за возвращение тоггла ⚹².
Другой громаднейший минус — это летающие в воздухе панели и пустота вокруг них. Причин по которым это плохо несколько:
Это уменьшило рабочее пространство с каждой стороны на 12 пикселей. А это довольно много, учитывая то, что панели нельзя открепить и вынести за пределы viewport. перенос панели инструментов также съедает пространство. и иронично, что они преподносят это как появившееся пространство ⚹³, хотя в действительности эта панель заблокирует рабочую область и будет раздражать (отдельно выключить её нельзя, к сожалению)
Линейка теперь ушла за эти панели, а это жутко нелогично: чтобы достичь линейки теперь нужно тянуться через слои.
И самое важное: Создав такой отступ они сделали бесполезным самый доступный для клика участок (края экрана).
Согласно закону Фиттса, время, необходимое для перемещения курсора или пальца к цели, зависит от расстояния до цели и ее размера. Края экрана являются "бесконечно большими" целями, так как за их пределами нет других элементов, что упрощает попадание в них.
Плюс, дыра в этих отступах от краёв кликабельная... (я боялся, что так будет, и оно так и случилось). То есть вы в желании кликнуть по слою теперь можете просто промахнуться и выделить объект на холсте.
Кстати, в одном из концептов видно, что они хотели сделать плавающие тулбары⚹⁴ (появляются, когда кликаешь по обьекту), но отказались от идеи. Вот там висящие в воздухе окна более чем оправданы.
Upd. 05.07.2024:
Помучался ещё с новым интерфейсом и выявил ещё особенности:
1. Настройка Constraints спряталась в дропдаун иконку
Это довольно важная панель настройки позиционирования элемента внутри фрейма. И она была нужна не только для того чтобы вводить данные, но также чтобы сверяться с ней. Теперь бегло бросить взгляд на Constraints не выйдет, вам придётся вглядываться. Да иконка дропдауна показывает эту настройку, но она делает это серым по серому, что никак не помогает.
Как бы я решил проблему? Не создавал бы её :) Оставил бы эту панель видимой целиком. Честно, не понимаю их желание всё скомбинировать и скрыть. В этом нет пользы, если вы комбинируете и скрываете важные панели. В любом случае, даже в новом интерфейсе этих настроек так много что они уходят в скролл. Тогда к чему это всё было?
Можно проголосовать на форуме за возвращение панели Constraints ⚹⁵
Cоnstraints теперь менее заметны
2. Поле ввода для размеров фрейма совместили с полем настройки fill/hug
И теперь для того чтобы узнать размер объекта нужно либо смотреть на нижний край вашего фрейма (не всегда возможно), либо наводить курсор на поле ввода размера (что лишнее движение), либо делать правую панель очень широкой (что съедает рабочую область)
Как бы я решил проблему? Не создавал бы её вовсе :) Идея совместить настройки Layout и Auto Layout — классная, но идея сливать две категории инпутов в один — нет. Просто дайте им жить отдельно. Зачем экономить место за счет ухудшения воркфлоу?
Я создал на форуме запрос разделить инпуты размеров height/width и fill/hug, можно проголосовать "за" ⚹⁶
Размеры слили с hug/fill
3. Go to main component теперь динамически прячется.
Иногда эта кнопка будет в заголовке панели настроек, а иногда она уйдёт в выпадающее меню. И, к сожалению, он уходит в это меню очень часто — потому что этой кнопке дали очень низкий приоритет (даже очень редко нужная функция "union" имеет больший приоритет)
Вообще плавающее местоположение кнопок очень сбивает и замедляет работу. Очень трудно выучить паттерн, когда эта кнопка будет видима, а когда спрятана, приходится каждый раз искать
Как я бы решил эту проблему? Естественно, не создавал бы её вовсе :)
В идеале:
Оставил бы все динамические кнопки на панели инструментов, как было раньше (пусть она будет шире, пустота с боков не имеет никакой ценности, рабочая область всё равно выше панели инструментов). Компромиссный вариант:
Оставить динамические кнопки в боковой панели, но выводить их отдельно от "Go to main component" (который будет зафиксирован) — дать им свою строку, где поместится не две кнопки + дропдаун, а шесть или больше.
Или увеличить количество кнопок при расширении сайдбара — сейчас их количество остается 2+dropdown независимо от ширины(да, это нововведение, панель справа можно расширять, но это не приносит никакой пользы, всё просто растягивается, но появившееся место никак не используется)
Я создал запрос на форуме, можно проголосовать ⚹⁷
Go to main component уже не в приоритете
4. Из хорошего: теперь Ctrl+Shift+\ скрывает не только правую панель, но и левую
Также доступна новая комбинация Shift+\. При этом, левая панель динамически появляется при кликах на объекты. Это удобно, но... Было бы классно, если бы была возможность показать левую панель, но скрывать правую. Потому что панель слоёв чаще важна даже в моменты "простоя". А правая панель пусть появляется динамически
Важно: для демонстрации на видео я увеличил интерфейс до 150%, обычно работаю на 100%
Вывод:
Обновлений много и они появились все вместе. Как по мне, такие обновы лучше делать постепенно, а не скопом на конфе (подсмотрели идею у Эппл с Гуглом), тогда онбординг будет плавнее и возможно недовольных (как я 🙃) будет меньше.
В общем, я понаписал много букв. В конечном итоге мы все привыкнем, ну или пересядем на penpot 👀
Ниже интересные ссылки:
Закон Фиттса:
Визуализируя закон Фиттса
Тут наглядный пример бесконечных кнопок на краях экранаUX Design Principle #001 : Fitt’s Law
Про magic edges и Закон Фиттса в целомFitts' Law and Infinite Width
Бесконечные кнопки на примере интерфейса MacOS
Обновление Figma:
Inside the redesigned Figma, where your work takes center stage
Пресс-релиз Figma про редизайн интерфейса редактораConfig 2024: How we redesigned Figma
Видео про редизайн с конференции Config
Проголосовать на форуме Figma:
Эта статья = личное мнение, аргументированное UX‑паттернами и практиками. Но тем не менее, это по‑прежнему личное мнение. Если вам понравилось абсолютно всё в этом обновлении, то прошу не злиться на мою критику 👀