UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Подробный разбор интерактивных компонентов (Interactive Components) Figma
Редакція
Редакція

Опубліковано

Подробный разбор интерактивных компонентов (Interactive Components) Figma

В этой статье объясняется, почему интерактивные компоненты Figma (сейчас находятся в стадии бета-теста) улучшат процесс прототипирования. Новая функция сокращает время и усилия, необходимые для создания взаимодействий, снижая стоимость исследований и дизайна. Если вы хотите попробовать ее, все, что вам нужно, это бесплатная учетная запись Figma.

Недавно Figma выпустила бета-версию новейшей функции Interactive Components, которая позволяет определять взаимодействия и анимацию непосредственно в вариантах, и распространять их на все экземпляры компонента. Это означает, что теперь можно создать компонент с состояниями (hover, active, clicked, focus) и сделать его интерактивным, чтобы все копии компонента по умолчанию унаследовали те же взаимодействия. Это очень помогает на этапе прототипирования.

Вот сравнительный пример того, как изменится рабочий процесс:

Четыре экрана и восемь различных взаимодействий

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

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

Один единственный интерактивный компонент, используемый дважды на экране

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

Интерактивные компоненты (Бета-тест)

Для начала вам необходимо зарегистрироваться в программе бета-тестирования интерактивных компонентов. Это совершенно бесплатно. После того, как вы подадите заявку должно пройти не более двух или трех дней, прежде чем интерактивные компоненты появятся в Figma.

Бесплатно

Я создал файл дизайна Figma с примерами из этой статьи. После того, как вы присоединитесь к бета-тесту, вы сможете продублировать мой дизайн.

Прежде чем начать

Необходимо понимать ряд ключевых элементов Figma, которые мы собираемся использовать. Если вы уже знакомы с ними, пропустите эту часть и сразу начните с раздела «Создание интерактивного компонента».

Компоненты

Думайте о компонентах, как об элементах, которые при дублировании создают связь со своей копией (называемой экземпляром), и когда компонент изменяется, экземпляр получает аналогичные изменения. Вы также можете применить к экземплярам переопределения (в основном изменения стиля свойств компонента, которые допускают некоторую настройку).

  • Узнайте больше о компонентах
  • Узнайте больше о переопределениях

Варианты

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

Панель Interaction Details

Важно разобраться с панелью «Interaction Details», поскольку она позволяет определять различные взаимодействия и анимации наших интерактивных компонентов. На сайте Figma много информации о ней, поэтому я оставлю ссылки для тех, кто захочет копнуть глубже.

Панель Interaction Details (с аннотациями)

Точка доступа (Hotspot)

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

Триггеры (Triggers)

В процессе разработки они известны как события (Events) и представляют собой различные способы, которыми пользователь может активировать взаимодействие.

  • On Click,
  • On Drag,
  • While Hovering,
  • While Pressing,
  • Key/gamepad,
  • Mouse Enter,
  • Mouse Leave,
  • Mouse Down,
  • Mouse Up,
  • After Delay.
  • Узнайте больше о триггерах →.

Действия (Actions)

В этом параметре вы можете определить, что будет происходить при активации взаимодействия. Для интерактивных компонентов мы будем использовать Change To, что позволяет менять варианты внутри компонента.

  • Change To,
  • Navigate To,
  • Open Overlay,
  • Scroll To,
  • Swap With (overlay),
  • Back,
  • Close Overlay,
  • Open URL.

Пункт назначения (Destination)

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

Анимации (Animations)

Figma поставляется с набором предопределенных переходов, которые могут быть полезны в ряде случаев (движение внутрь, толкание, скольжение), но я всегда предпочитаю использовать функцию Smart Animate и определять собственные переходы. Ее очень легко использовать – она проверяет имена слоев и, если есть изменения между выбранным и целевым фреймом, она анимирует эти слои.

Плавность (Easing)

Под плавностью понимается способ движения анимации, в основном то, как элемент ускоряется и замедляется. В этом руководстве я собираюсь использовать две настройки: Ease In and Out для переключателя и Linear для loops, но имейте в виду, что также можно задать собственное значение плавности. Узнайте больше о плавности.

Создание интерактивного компонента

Теперь, ознакомившись с основами, вы можете приступить к созданию своего первого интерактивного компонента. Я покажу вам очень распространенный случай, создав простой переключатель, имеющий два состояния (выключено и включено), и использую варианты для воспроизведения этих состояний.

Начнем с создания простого переключателя

Создание компонента

Первый шаг – создание компонента.

  • Используя инструмент «Прямоугольник» (R), создайте серый прямоугольник (#A7A9BC) размером 56x32 pxи примените радиус закругления угла 16 px.

Используя инструмент Эллипс (O), создайте белый круг (#FFF) размером 24x24 px и поместите его поверх прямоугольника в левой части, оставив интервал 4 px. Вот так должен выглядеть результат:

Компонент переключателя

  • Объедините эти два элемента в один компонент, используя сочетания клавиш Ctrl / Cmd + Alt + K (или иконку компонента на верхней панели Figma):

Иконка компонента на верхней панели

Примечание: Здесь и далее я буду использовать обозначение универсальных клавиш Windows / Mac, где клавиша Ctrl в Windows соответствует клавише Cmd на Mac; Alt в Windows эквивалентен Alt / Option на Mac. Поэтому для краткости я буду использовать Alt, а клавиша Shift одинакова на обеих платформах.

Добавьте вариант

  • Выберите только что созданный компонент и на правой панели (внутри вкладки «Design») нажмите плюс рядом с пунктом Variants:

Часть боковой панели «Design»

Будет создан фиолетовый фрейм с пунктирной границей, представляющей группу имеющихся у вас вариантов.

Группа вариантов

К настоящему времени у вас должно быть два варианта: первый Off state для состояния «Выкл.», а второй – On state для состояния «Вкл.».

  • Примените другой стиль к варианту Onstate, чтобы сделать его активным. Я рекомендую использовать синий фон (#0B5FFF) и переместить круг вправо.

Теперь определены два стиля для состояний Off и On

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

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

Альтернативный подход

Как вы видели, мы создали эти компоненты, продублировав их внутри группы вариантов, но также можно создавать их по отдельности и комбинировать как варианты, конечный результат будет аналогичным. Если вы хотите попробовать этот метод, просто создайте и выберите два компонента, тогда на правой панели появится действие под названием «Combine as variants», щелкните его и готово – теперь у вас будут те же два варианта.

Выберите компоненты и объедините их как варианты

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

Назовите варианты

Названия вариантов не окажут прямого влияния на конечный результат (если вы не используете одно и то же имя более одного раза). Однако, определение имен и иерархии поможет лучше организовать прототип и сделает его понятнее для коллег, которым он может потребоваться для других проектов.

По умолчанию основная группа вариантов называется «Property 1», вы можете изменить название на боковой панели при выборе всей группы. Я предлагаю переименовать ее в «State», поскольку мы собираемся использовать состояния Off и On.

Переименуйте варианты с «Property 1» на «State»

Переименование одного варианта выполняется аналогично, вам нужно выбрать один вариант внутри группы, и на той же панели вы найдете имена «Default» и «Variant 2», которые можно изменить, чтобы переименовать переключатель. Назовем их «Off» и «On».

В результате имена слоев вариантов будут автоматически изменены на «State=Off» И «State=On».

Интересный факт: если у вашего компонента есть только два варианта, и вы используете имена «Off» и «On», в месте назначения будет отображаться переключатель вместо раскрывающегося списка!

Давайте сделаем его интерактивным!

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

  • Щелкните вкладку «Prototype» (в правом верхнем углу экрана), чтобы открыть панель «Prototype» и активировать ее функции.
  • Выберите вариант Off (на нем должна быть синяя точка) и перетащите его на вариант On, чтобы связать их.

Состояние On связано с состоянием Off

  • Дважды проверьте, что вы выбрали весь вариант, а не только фоновый слой, это заставит взаимодействие работать, даже когда пользователь нажимает на элемент круга.
  • На панели «InteractionDetails» установите для триггера значение «On Click».
  • Убедитесь, что для действия установлено значение «Change To».
  • Измените анимацию на Smart Animate и используйте Ease In And Out для придания анимации ощущения естественности.

Я переведу эти настройки в одно предложение, чтобы объяснить, что произойдет: когда пользователь нажимает на Off State, которое через 300 миллисекунд переходит в On State с помощью функции Smart Animate с параметром плавности Ease In And Out.

  • Примените аналогичные настройки к варианту «On State», чтобы при повторном нажатии на него переключатель выключался. (Примечание: Figma запомнит настройки взаимодействия, примененные к элементам внутри группы, и применит те же настройки при перетаскивании нового взаимодействия).

Теперь оба состояния связаны

Готово! Если вы хотите проверить, работает ли он, вам нужно включить один из вариантов во фрейм, выбрать фрейм и затем щелкнуть кнопку презентации (представленную значком Play), которая расположена над вкладками.

Кнопка «Play»

Это позволит вам включать / выключать каждый переключатель индивидуально.

Однако, если вы хотите увидеть реальную мощь этой функции, продублируйте компонент во фрейме несколько раз (минимум три) и активируйте их по отдельности в презентации.

Переключатель интерактивных компонентов в действии

Использование более двух вариантов

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

Кнопка раскрывающегося меню с шестью различными состояниями в качестве вариантов

Состояния компонентов

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

  1. Default — Default,
  2. Hover — WhileHover,
  3. Pressed — MouseDown,
  4. Active — MouseUp (можно использовать OnClickдля получения идентичного результата),
  5. Hover while Active — WhileHover,
  6. Pressed while Active — MouseDown.

Полезный совет: можно использовать MouseDown для имитации нажатия кнопки (без отпускания), а затем использовать MouseUp для активации перехода. Это приятная деталь взаимодействия, которая делает кнопку более реальной.

Используйте триггер MouseDown перед триггером Click

Вложенные интерактивные компоненты

Вы также можете создавать вложенные интерактивные компоненты.

Используя тот же пример раскрывающегося меню, можно создать интерактивный компонент под названием «Dropdown» с двумя интерактивными компонентами внутри него: Dropdown Button и Dropdown Menu. Это поможет контролировать взаимодействие между кнопкой и меню, позволяя определить, какой вариант кнопки будет открывать меню.

Примечание: Можно создать еще один вложенный компонент для параметров раскрывающегося меню и использовать переопределение для изменения текста.

Та же кнопка раскрывающегося меню, которая появляется только в вариантах «On Click» и «While Hover»

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

Можно имитировать настоящие эффекты наведения курсора и клика

Навигация

Мы можем пойти еще дальше, также можно переходить от варианта к внешнему фрейму. Вы можете подключить отдельный вариант к фрейму с помощью триггера «On Click» и действия «Navigate To». В этом примере я связал каждое действие компонента раскрывающегося меню с внешним фреймом (серым прямоугольником) в том же месте, что и меню (справа, сверху, слева, снизу).

Пункты назначения прототипов могут быть подключены вне варианта фрейма

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

Это раскрывающееся меню – отличный пример того, насколько реалистичным может стать интерактивный компонент

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

Спецэффекты

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

В следующем разделе я подробно рассмотрю их!

Loop-анимации

Наконец-то стало возможным без особых усилий создавать loop-анимации в Figma, а также различные спиннеры и индикаторы загрузки.

Размер элементов можно изменять для создания loop-анимаций

Чтобы создать loop-анимацию, используйте триггер After Delay, установленный на 1 мс, чтобы автоматически поменять местами варианты и соединить, как минимум, два из них.

Используйте триггер After Delay, установленный на 1 мс, и свяжите варианты

Примечание: 1 мс – это минимальное время, которое мы можем установить в Figma, чтобы перейти от одного варианта к другому и сделать это почти мгновенным изменением, а благодаря триггеру AfterDelay, это произойдет автоматически. Можно использовать более высокое время задержки, если вам нужно, чтобы анимация выглядела, как будто между вариантами есть пауза.

Вращение (Rotation)

Позвольте начать следующую часть статьи с заметки о том, как странно Figma обрабатывает вращение.

В Figma есть странный способ поворота элементов, он, кажется, ограничен от -179º до максимума в 180º, и не позволяет идти дальше этих значений. Кроме того, невозможно определить направление вращения, поэтому, если вы попытаетесь повернуть от 0º до 180º и наоборот, вместо того, чтобы делать поворот на 360º, анимация сначала повернется на 180º, а затем вернется к 0º (как качели).

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

Вот как это сделать:

  • Создайте компонент с тремя вариантами: VariantA, VariantB, VariantC (для этого примера я изменил эллипс, чтобы придать ему треугольную форму).
  • VariantA: установите элемент на 0º и свяжите с VariantB.
  • VariantB: установите элемент на -120º и свяжите с VariantC.
  • VariantC: установите элемент на 120º и свяжите с VariantA, чтобы замкнуть петлю.
  • Примените следующее вращение к элементам внутри вариантов (но не к самим вариантам).
  • Все взаимодействия должны иметь After Delay (1ms)в качестве триггера и Linear значение плавности.

В результате мы получим нейтральный спиннер, который будет иметь три небольшие паузы по 1 мс каждая из-за замены вариантов, не идеально, но быстро, и для прототипа этого достаточно. Вы, вероятно, будете единственным, кто заметит паузы.

Полезный совет: вы можете использовать одно и то же время анимации для каждого варианта, чтобы создать линейный цикл, или вы можете поэкспериментировать с анимацией, используя более быстрое время для одних вариантов и более медленное для других, это будет имитировать curved easing.

Вращение такое же, но время анимации другое

Сложные спиннеры (Complex Spinners)

Я бы не предлагал использовать интерактивные компоненты Figma для сложных спиннеров. В таких случаях лучше создать спиннер с помощью специального инструмента создания анимаций (например, After Effects) и импортировать его в прототип в виде GIF-файла.

Микровзаимодействия (Micro interactions)

Интерактивные компоненты позволяют добавлять в прототипы более интересные детали. Я вернусь к примеру с переключателем, чтобы показать, как добавить к этому компоненту микровзаимодействия с помощью триггеров MouseDown и On Click.

Хотите превратить простой переключатель в потрясающий?

Компонент

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

  • Сделайте копию ранее созданного переключателя состояния Off.
  • Создайте еще один эллипс размером 16 * 24 px, поместите его поверх предыдущего эллипса (круга).
  • Объедините два эллипса в логическую (boolean) группу с помощью Union.
  • Узнайте больше о Boolean группах.

Логическая группа объединит эти две фигуры в один круг

  • Примените радиус границы 32 px к слою Union, это создаст эффект искажения, который вы можете видеть в примере.
  • Создайте компонент (Ctrl / Cmd + Alt + K).

Варианты и прототип

Для работы вам понадобится четыре варианта: OffState, OffStatePressed, OnState и OnStatePressed.

  • Используйте триггер Mouse Down, чтобы имитировать нажатие мыши и активировать искажение, переместив больший эллипс на 8 px в другую сторону.
  • Используйте триггер On Click, чтобы изменить состояние с Off на On.

Вот еще одна забавная диаграмма, показывающая, как создать интерактивный компонент!

3D-анимация с помощью последовательности изображений

Прежде чем мы продолжим, я хочу поблагодарить Andrea Cau, автора этой классной 3D-сцены, которую я собираюсь использовать в качестве примера.

Это больше похоже на хитрость с интеграцией 3D-анимации в прототип Figma. Конечно, вы можете использовать GIF-файлы, но таким образом вы получаете полный контроль над изображениями, а не только над воспроизведением, что позволяет создать прототип, имитирующий интерфейс для вращения объектов, часто встречающийся на автомобильных сайтах, где вы можете повернуть автомобиль.

Представьте себе веб-сайт электронной коммерции с 3D-моделью, которую вы можете повернуть

В этом случае я использовал девять изображений (вы можете использовать больше или меньше, в зависимости от необходимого поворота). Важные шаги для воспроизведения этого взаимодействия:

  • Создайте по одному варианту для каждого изображения (в этом случае потребуется 9 вариантов) и включите по одному изображению в каждый вариант, следуя порядку последовательности.
  • Создайте кнопку со стрелкой, это будет точка доступа (Hotspot).
  • Соедините стрелку вправо со следующим вариантом (повторите для каждого варианта).
  • Соедините стрелку влево с предыдущим вариантом (повторите для каждого варианта).
  • Используйте Instant анимацию вместо Smart Animate, чтобы избежать эффекта постепенного появления / исчезновения и для создания иллюзии движения.

Вывод

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

Как упоминалось ранее, я создал файл Figma с примерами из этой статьи (и еще несколькими экспериментами, которые я проводил во время тестирования новой функции). После того, как вы присоединитесь к бета-тесту, не стесняйтесь копировать мой дизайн, следовать ему или начинать экспериментировать . Не забывайте делиться своими результатами! Поэкспериментируйте со временем анимации, измените динамику, попробуйте повернуть или масштабировать элементы, попытайтесь вложить различные интерактивные компоненты.

Если у вас есть вопросы или что-то не совсем понятно, напишите автору в Twitter (@emi_cicero) – он будет рад помочь! :)

Материалы по теме


Перевод статьи smashingmagazine.com

Найновіші коментарі (0)