Создание интерактивных компонентов: Hover, Click, Drag - Figma: От Атомарного Дизайна до Дизайн-Систем - Qpel.AI
QPEL.ai

Создание интерактивных компонентов: Hover, Click, Drag

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

В прошлых уроках мы научились создавать сложные компоненты с Variants и Component Properties, а также делать их адаптивными с помощью Auto Layout и переменных. Теперь оживим макеты и компоненты, добавив интерактивность. Вы сможете создавать реалистичные прототипы, которые точно передают поведение интерфейса, и показывать их заказчикам или команде.

Зачем нужны интерактивные компоненты?

Интерактивные компоненты помогают:

  • Имитировать реальное поведение. Покажите, как элементы реагируют на действия пользователя: наведение, клик, перетаскивание.
  • Улучшать коммуникацию. Наглядно демонстрируйте функциональность без долгих объяснений.
  • Сокращать время на разработку. Разработчики получат чёткое представление о работе интерфейса.
  • Тестировать пользовательский опыт. Проверяйте удобство до этапа кодирования.

Создаём интерактивные компоненты: Основы

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

1. Подготовьте компонент с Variants

Представьте кнопку, которая меняет цвет при наведении (Hover) и нажатии (Click).

  1. Создайте мастер-компонент кнопки.

  2. Добавьте свойство Variant, например, State.

  3. Создайте варианты для этого свойства:

    • Default (обычное состояние)
    • Hover (при наведении)
    • Pressed (при нажатии)

  4. Настройте внешний вид каждого варианта. Например, для Hover измените цвет заливки на светлый, для Pressed – на тёмный.

    Совет: Используйте переменные для цветов. Так вы легко управляете темами и состояниями.

2. Добавьте интеракцию в режиме "Prototype"

Теперь настроим переходы между вариантами.

  1. Переключитесь в режим "Prototype" (Shift + E).

  2. Выберите вариант Default вашего мастер-компонента.

  3. Нажмите на синий кружок (плюсик) на границе варианта и перетащите стрелку к варианту Hover.

  4. В окне "Interaction details" настройте:

    • Trigger (Триггер): While hovering (При наведении).
    • Action (Действие): Change to (Изменить на).
    • Destination (Назначение): Hover.
    • Animation (Анимация): Smart animate для плавного перехода. Настройте Ease out и длительность, например, 150ms.

  5. Повторите для состояния Pressed:

    • От варианта Hover перетащите стрелку к варианту Pressed.
    • Trigger: On click (По клику).
    • Action: Change to.
    • Destination: Pressed.
    • Animation: Smart animate, Ease out, 150ms.

  6. Добавьте обратные переходы:

    • От варианта Hover перетащите стрелку к варианту Default.

    • Trigger: While hovering (При отведении курсора). Figma предложит этот триггер, если вы уже настроили While hovering.

    • Action: Change to.

    • Destination: Default.

    • Animation: Smart animate, Ease out, 150ms.

    • От варианта Pressed перетащите стрелку к варианту Default.

    • Trigger: On mouse up (При отпускании кнопки мыши). Для кнопки лучше использовать On mouse up или On click с возвратом.

    • Action: Change to.

    • Destination: Default.

    • Animation: Smart animate, Ease out, 150ms.

3. Используйте интерактивные компоненты

Теперь разместите экземпляр этой кнопки на любом фрейме и запустите прототип (кнопка "Present" в правом верхнем углу). Она будет реагировать на наведение и клик, как настоящая!

Реализуем Drag (Перетаскивание)

Перетаскивание (Drag) нужно для элементов, которые можно перемещать по экрану: ползунки, карточки в канбан-досках, элементы для сортировки.

Пример: Ползунок (Slider)

Создадим простой ползунок с возможностью перетаскивания.

  1. Создайте мастер-компонент для ползунка. Он может состоять из линии (трека) и кружка (ручки).

  2. Создайте несколько вариантов компонента, представляющих разные положения ручки на треке. Например, Value=0, Value=50, Value=100.

  3. Переключитесь в режим "Prototype".

  4. Выберите ручку (или весь компонент, если ручка его часть) в варианте Value=0.

  5. Перетащите синий кружок от ручки к варианту Value=50.

  6. В "Interaction details" настройте:

    • Trigger: On drag (При перетаскивании).
    • Action: Change to.
    • Destination: Value=50.
    • Animation: Smart animate.

  7. Повторите для других состояний, связывая их по цепочке. Например, от Value=50 к Value=100 по On drag.

    Важно: Для реалистичного перетаскивания On drag обычно используется со Smart animate. Figma автоматически интерполирует положение элемента между начальным и конечным состоянием.

Практическое задание

Создайте интерактивный компонент "Переключатель" (Toggle Switch) с двумя состояниями: "Включено" и "Выключено".

  1. Создайте мастер-компонент Toggle Switch.
  2. Добавьте свойство State с вариантами On и Off.
  3. Настройте внешний вид каждого варианта (например, цвет фона и положение ползунка).
  4. В режиме "Prototype" настройте переход On click между состояниями On и Off с использованием Smart animate.

Попробуйте использовать этот переключатель на фрейме и проверьте его работу в режиме презентации.

Мы освоили создание интерактивных компонентов, которые сами реагируют на действия пользователя. Но как объединить несколько таких компонентов в единый, работающий прототип и продемонстрировать полноценный пользовательский сценарий? Об этом поговорим в следующем разделе.