Как сделать анимацию слайдера в Figma
Для создания анимации слайдера, нам понадобятся изображения без фона, который будут сменять друг друга.
Шаг 1
- Создаём фрейм.
- Добавляем чёрный прямоугольник на фон.
- Добавляем элементы дизайна, текст и кнопки будущего слайдера.
Шаг 2
- Создаём эллипс с линейным градиентом FF3535 — BB0202.
- Увеличиваем его и сдвигаем на половину нашего фрейма.
Шаг 3
- Дублируем чёрный прямоугольник и эллипс (Ctrl+D).
- Выделяем их и нажимаем Substract selection.
- Создаём ещё один прямоугольник с линейным градиентом от красного к прозрачному и выравниваем его по правому краю.
Шаг 4
- Добавляем фотографии нашего будущего слайдера.
- Выделяем и группируем их (Ctrl+G).
- Переносим их во фрейм и размещаем между прямоугольником и эллипсом.
Шаг 5
- Дублируем фрейм.
- Сдвигаем группу с фотографиями на следующий элемент.
- Вносим изменения в дизайн и элементы навигации.
Шаг 6
- Снова дублируем фрейм.
- Сдвигаем группу с фотографиями на последний элемент.
- Вносим изменения в дизайн и элементы навигации.
Шаг 7
Создаём анимацию (от кнопки к фрейму):
- On click
- Smart animate
- Slow — 600ms.
Готово!
Анимация слайдера для твоих проектов готова. Такой слайдер подойдёт для главного экрана интернет магазина, или для отдельного блока с товарами.
Рекомендуем ознакомиться:
Как сделать интересную графику и анимировать её в Figma
Для создания такой графики нам понадобиться изображение, которое мы будем анимировать, а также небольшие навыки владения инструментом «Перо».
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
