Создаём hover анимацию в Figma

Шаг 1

• Создаём фрейм.
• Добавляем элементы дизайна, текст и хедер.
• Группируем элементы, которые должны быть зафиксированы.
• Выбираем нашу группу и нажимаем Fix position when scroling в меню справа.

Шаг 2

• Создаём новый фрейм.
• Добавляем фотографию во фрейм.

Шаг 3

• Пишем текст (T).
• Выделяем текст и добавляем Auto layout (Shift+A).

Шаг 4

• Добавляем цвет на фон в Auto layout с непрозрачностью 80%.
• Добавляем эффект Background blur ~20.
• Настраиваем отступы.

Шаг 5

• Переносим Auto layout в наш фрейм с фотографией.
• Растягиваем Auto layout на всю ширину фрейма.
• Добавляем кнопку.

Шаг 6

• Дублируем фрейм.
• Выносим кнопку за пределы фрейма.
• Увеличиваем и немного поворачиваем фотографию.
• Выделяем оба фрейма и создаём Component set.

Шаг 7

Связываем компоненты:

• While hovering
• Smart animate
• Ease out — 150ms.

Шаг 8

• Копируем карточку и вставляем в финальный фрейм.
• Дублируем её, меняем текст и вставляем новые фотографии.

Готово!

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

Рекомендуем ознакомиться:

Анимация zoom in в Figma

В этом уроке мы научимся создавать zoom in анимацию в Figma, которая добавит глубины в ваш проект и сделает его интереснее.