Интерактивный задний фон в Figma
В этом уроке мы научимся создавать интерактивный задний фон, который будет реагировать на действия пользователя.
Шаг 1
- Создаём новый фрейм.
- Добавляем элементы дизайна.
Шаг 2
- Вне фрейма создаём прямоугольник (R).
- Убираем у него заливку и добавляем обводку с цветом #04BB00.
- Дублируем его.
Шаг 3
- Непрозрачность копии ставим 0%.
- Выделяем оба прямоугольника и создаём Component set.
Шаг 4
Связываем варианты:
- While hovering
- Dissolve
- Slow — 600ms.
Шаг 5
Копируем (Ctrl+C) и вставляем (Ctrl+V) прозрачный прямоугольник в наш фрейм.
Шаг 6
- Переносим прямоугольник на задний план.
- Дублируем прямоугольник много раз, чтобы получившаяся сетка закрывала весь наш фрейм.
Готово!
Интересная анимация для твоих проектов готова.
Рекомендуем ознакомиться:
Делаем интересную hover анимацию в Figma
Для создания интересной ховер анимации нам понадобятся фотографии, которые будут появляться на фоне.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
