10 эвристик создания плагинов для Figma.
Плагины – это способ кастомизации, расширения и автоматизации Figma.
Создавая плагин, вы по сути меняете темп своего рабочего процесса. Также вы получаете определенное удовлетворение от решения задачи, которая раньше занимала несколько часов, или от гипероптимизации определенного взаимодействия или части интерфейса.
Эта статья – попытка систематизировать ряд эвристик создания плагинов Figma. Я буду ссылаться, где это уместно, на примеры из созданных мною плагинов. Мне нравятся инструменты дизайна и разработка интерфейса, и я стремлюсь привнести в эту работу мастерство и точность. Надеюсь, эта статья будет интересна как создателям плагинов, так и их пользователям.
Приступим!
1. Используйте UX паттерны и компоненты интерфейса, уже знакомые пользователям Figma
Вдохновляйтесь встроенными функциями и командами Figma. Использование вашего плагина должно быть максимально похоже на использование самой Figma.
Элементы управления формы – это основные строительные блоки интерфейса вашего плагина
Используйте цвета, стили текста и компоненты интерфейса из дизайн-системы Figma. Подумайте о создании плагина с помощью существующей библиотеки компонентов, которая воспроизводит внешний вид и поведение дизайна интерфейса Figma. Например:
- React: react-figma-plugin-ds, figma-styled-components
- Preact: @create-figma-plugin/ui
- Svelte: figma-plugin-ds-svelte
- Vue: figma-vue-boilerplate
- Vanilla JavaScript: figma-plugin-ds
2. Уменьшите количество действий пользователя, необходимых для работы плагина
Самый эффективный из возможных плагинов – это плагин, который сразу начинает работать при запуске, не требуя дополнительных действий со стороны пользователя.
Пользовательский интерфейс необходим только в том случае, если плагин имеет опции, которые должны быть настроены пользователем. Если это так, выберите соответствующие элементы управления формы, которые позволят эффективно настроить ваш плагин. Например:
- Если есть только несколько вариантов, которые можно выбрать, используйте флажок (чекбокс), сегментированный элемент управления или радиокнопки.
- Если есть много вариантов выбора, используйте автозаполнение или раскрывающееся меню.
- Длинный список вариантов можно сделать удобнее, если вынести в начало списка наиболее часто выбираемые варианты. Также можно сгруппировать связанные варианты, организовать их в иерархию или разрешить фильтрацию с помощью поиска.
- Для числового параметра используйте числовое текстовое поле или ползунок диапазона.
В плагине Format Currency для изменения параметра «Формат» требуется всего один клик, поскольку используется сегментированный элемент управления. (Для сравнения, с раскрывающимся меню потребовалось бы минимум два клика мышью)
В плагине Replace with Component пользователь может ввести текст в поле поиска, чтобы сократить длинный список компонентов
Первый элемент управления формы должен быть в фокусе при первоначальном отображении интерфейса, чтобы пользователь мог немедленно внести изменения.
В плагине Move Layers первое текстовое поле находится в фокусе и готово к вводу данных пользователем
Эмпирическое правило: варианты, которые обычно выбираются, должны быть выбраны по умолчанию или выбираться с помощью минимального количества действий – в идеале – в один клик мыши.
3. Решайте одну конкретную проблему
Ваш плагин должен хорошо выполнять только одну функцию (или несколько тесно связанных функций).
Подумайте, можно ли «разложить» функциональность вашего плагина и представить ее в виде подкоманд, которые можно запускать независимо.
В плагине Clean Document функции основной команды «Очистить слои» также доступны в виде отдельных подкоманд
4. Разрешите пользователю управлять интерфейсом плагина с помощью клавиатуры
Все элементы управления формы должны иметь очевидное состояние фокуса и быть доступными при нажатии клавиш Tab или Shift + Tab.
Порядок табуляции должен соответствовать визуальному потоку элементов управления формы в интерфейсе (слева направо и сверху вниз). В общем, воздержитесь от изменения естественного порядка табуляции элементов управления формы.
Порядок табуляции должен быть «цикличным». Нажатие клавиши Tab на последнем элементе управления формой должно переместить фокус на первый элемент управления. (Соответственно, нажатие Shift + Tab на первом элементе управления формой должно переместить фокус на последний элемент).
Разрешите управление формой, находящейся в фокусе, при помощи клавиатуры.
Например:
- Флажок: нажатие клавиши Enter или пробела должно переключать этот параметр.
- Сегментированное управление, радиокнопки, автозаполнение, раскрывающиеся списки: нажатие клавиш ↑ и ↓ должно изменить выбранный параметр.
- Цифровое текстовое поле: нажатие клавиш ↑ и ↓ (или Shift + ↑ и Shift + ↓) должно увеличивать и уменьшать значение на 1 (или 10).
Нажатие Esc должно закрыть интерфейс плагина.
Нажатие Enter должно запустить плагин с текущими настройками.
5. Определите объем работы вашего плагина
Плагин, работающий со слоями на холсте, должен иметь определенную область действия. Например:
- Только выбранные пользователем слои, все слои на странице или все слои на всех страницах документа.
- Только непосредственно выбранные слои или все слои в выделении, включая вложенные.
- Слои только «верхнего уровня» или все слои, включая вложенные.
- Слои только определенного типа или любые слои.
- Слои с одним и тем же родительским слоем или все слои, включая слои с разными родительскими слоями.
Разумный подход: по умолчанию работать со слоями, выделенными пользователем, но, если он не выделил слои – работать со всеми слоями на текущей странице.
Clean Layers работает со слоями, выделенными пользователем или со всеми слоями на странице, если пользователь не выбрал ни один слой. Активный объем работы также указан в интерфейсе плагина
Будьте готовы к тому, что один или несколько слоев (независимо от того, выбраны ли они пользователем или просто находятся на странице) будут вне области действия вашего плагина. Эту проблему можно решить одним из двух способов:
- Считать это ошибкой. Указать ошибку во всплывающем уведомлении.
- Игнорировать нерелевантные слои и работать только с теми слоями, которые находятся в пределах области действия плагина.
6. Сохраните предыдущие данные пользователя
Предварительно заполните элементы управления формы в интерфейсе плагина предыдущими данными пользователя. Это важно для плагинов, которые часто запускаются повторно.
В плагине Draw Slice Over Selection параметр Padding предварительно заполняется данными, введенными пользователем в последний раз
Ваш плагин также должен позволять пользователю очищать сохраненные данные и, по сути, возвращать плагин в «чистое» состояние.
7. Предоставьте фидбек системы в ответ на действия пользователей
Показывайте сообщения об успехе и ошибках в виде всплывающих уведомлений. Добавьте к этим сообщениям префикс ✔ и ✘ соответственно.
Сообщения об успехах и ошибках в плагине Distribute Layers
Добавьте в интерфейс плагина состояние загрузки, если время ожидания может превышать несколько секунд – например, при ожидании ответа API или завершения конкретной операции, требующей больших вычислительных ресурсов.
В состоянии загрузки плагина Insert Big Image мы видим счетчик загрузки и количество изображений, которые были обработаны на данный момент
8. Покажите превью результатов работы плагина
Предварительный просмотр может отображаться либо в самом интерфейсе плагина, либо непосредственно на слоях на холсте. Превью должно обновляться в режиме реального времени по мере того, как пользователь изменяет настройки в интерфейсе плагина или, когда был изменен выбор пользователя.
Мы видим столбцы «До» и «После» в плагине Format Currency. В столбце «До» измененные значения обозначены зачеркиванием
9. Отдавайте предпочтение текстовым меткам, а не иконкам
Определенные концепции может быть сложно однозначно представить с помощью иконки. Для ясности постарайтесь использовать метку, написанную простым языком.
Используйте иконки только в том случае, если вы уверены, что они знакомы пользователям. Разумное правило: используйте только те иконки, которые уже используются в пользовательском интерфейсе Figma.
В плагине Distribute Layers иконка, представляющая пространство между слоями, такая же, как иконка, используемая на панели свойств Figma
10. Выберите для плагина короткое, уникальное и понятное название
Название плагина и все его команды не должны быть длиннее четырех слов и не должны быть написаны прописными буквами.
Убедитесь, что название плагина отличается от названий функций и команд Figma. Уникальное название позволяет пользователям легче находить и запускать ваш плагин через окно поиска Figma.
Лучше всего, если название плагина говорит, что он делает. Будьте конкретны, используйте знакомые пользователю слова и избегайте выдуманных слов. Попробуйте использовать фразу, описывающую действие, где первое слово – глагол.
Названия плагинов, ориентированные на действия, начинаются с глагола
Еще раз повторим эти 10 эвристик:
- Используйте UX паттерны и компоненты интерфейса, уже знакомые пользователям Figma
- Уменьшите количество действий пользователя, необходимых для работы плагина
- Решайте одну конкретную проблему
- Разрешите пользователю управлять интерфейсом плагина с помощью клавиатуры
- Определите объем работы вашего плагина
- Сохраните предыдущие данные пользователя
- Предоставьте фидбек системы в ответ на действия пользователей
- Покажите превью результатов работы плагина
- Отдавайте предпочтение текстовым меткам, а не иконкам
- Выберите для плагина короткое, уникальное и понятное название.
Как и сама Figma, плагины создаются с использованием тех же технологий, что и open web. Используя HTML, CSS и JavaScript в сочетании с API Figma, вы можете четко контролировать работу своего плагина
Хороший UX – это продукт, состоящий из множества скромных и продуманных дизайн-решений. Когда все сделано хорошо, эти детали обычно не видны. Но когда вы присмотритесь и начнете обращать на них внимание, вы подумаете: «Круто! Они учли даже такую мелочь!» Это результат, к которому вам следует стремиться.
Если вам понравилась эта статья, подпишитесь на ее автора в Twitter, LinkedIn или Medium.
Перевод статьи uxdesign.cc
Топ коментарі (0)