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