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

Cover image for Проектирование микро-взаимодействий в Figma с помощью интерактивных компонентов (interactive components)
Редакція
Редакція

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

Проектирование микро-взаимодействий в Figma с помощью интерактивных компонентов (interactive components)

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

Во-первых...

Эта функция не совсем новинка в среде инструментов дизайна. Несколько месяцев назад я уже использовал похожую функцию в других приложениях, например, XD. На данный момент Figma – это инструмент с большой буквы. Добавление интерактивных компонентов сделает его еще круче. Судя по опыту использования этой функции в других приложениях, могу сказать, что бета-версия Figma отлично реализована. Интерактивные компоненты вместе с вариантами, auto-layout и мультиплеером выводят Figma на новый уровень.

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

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

Обзор интерактивных компонентов

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

Взаимодействие с полями ввода

Прототип поля ввода

  • Загрузчик: это простой компонент загрузчика, который бесконечно зацикливается. Это пример того, как движения могут быть созданы непосредственно с помощью Figma и включены в документацию по дизайн-системе. Эти анимации затем могут быть воспроизведены с помощью анимации svg / css.

Взаимодействие с загрузчиком

Прототип загрузчика

  • Кнопка «Скачать»: эксперименты с микровзаимодействием кнопки с иконкой. Интересно, что она повторно использует загрузчик как вложенный интерактивный компонент (потрясающая Figma!)

Взаимодействие с кнопкой «Скачать»

Прототип кнопки «Скачать»

  • Кнопка «Сохранить»: при этом взаимодействии попеременно используются текст и значки.

Взаимодействие с кнопкой «Сохранить»

Прототип кнопки «Сохранить»

  • Кнопка «Активировать»: теперь одновременно воспроизводятся текст и значки.

Взаимодействия с кнопкой «Активировать»

Прототип кнопки «Активировать»

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

Взаимодействия с раскрывающимся списком

Прототип раскрывающегося списка

  • Компонент подписки: это исследование, сочетающее в себе взаимодействия с предыдущими компонентами. Наличие полей ввода в прототипах, где вы могли бы набирать текст, является желаемой функцией. Я использовал здесь хак, не совсем самое эффективное решение. Есть ли что-то подобное в дорожной карте Figma?

Прототип подписки

Я всегда стараюсь напоминать себе, что инструменты – это всего лишь инструменты. Дизайнеры должны уметь творить с тем, что у них есть. Но наличие этого инструмента действительно полезно и делает работу веселее и проще. Спасибо, Figma!


Перевод статьи bootcamp.uxdesign.cc

Топ коментарі (0)