Как сделать анимацию смены фотографий в Figma
Для создания анимации смены фотографий, нам понадобятся красочные изображения, их можно найти на бесплатных стоках, например Pexeles или Unsplash. Так же можно воспользоваться плагином Unsplash прямо в Figma.
Шаг 1
- Добавляем фотографии. Оборачиваем каждую фотографию во фрейм (Ctrl+Alt+G).
- Настраиваем размер каждого фрейма 1200×756.
- Выравниваем фотографии по центру фрейма.
- Поставьте галочку Clip content у всех фреймов.
Шаг 2
- Дублируем наши фреймы.
- Изменяем размеры у копий фреймов на 470х640.
- Выравниваем фото внутри по размерам фрейма.
Шаг 3
- Создаём фрейм размером 1200х756.
- Добавляем в него 1-й фрейм и выравниваем по центру.
- Добавляем в него 2-й и 3-й фрейм.
- Поворачиваем фотографии внутри фреймов на 30°.
- Задаём координаты 2-му и 3-му фрейму х=0, у=-756.
Шаг 4
- Создаём ещё один фрейм размером 470х640.
- Переносим в него копии фреймов (вертикальные фреймы).
- Поворачиваем фотографии внутри фреймов на 30°.
- Задаём координаты 2-му и 3-му фрейму х=0, у=-640.
Шаг 5
- Выбираем оба фрейма и выравниваем по центру относительно друг друга.
- Оборачиваем их в общий фрейм (Ctrl+Alt+G).
- Создаём компонент из этого фрейма (Ctrl+Alt+K).
Шаг 6
- Добавляем вариант компонента.
- В варианте меняем координаты второго фрейма на x=0, y=0, и поворачиваем фотографию на 0°.
- Так же делаем это для вертикального фрейма.
Шаг 7
- Создаём ещё один вариант.
- И делаем те же действия для следующего слайда.
- Во всех вариантах фреймам на заднем плане добавляем Layer blur ~20.
Шаг 8
Связываем варианты:
- After delay — 1000ms
- Smart animate Slow — 800ms.
- Копируем первый вариант и вставляем в финальный фрейм.
Готово!
Теперь ты умеешь создавать анимацию смены фотографий в Figma. Эта анимация отлично подойдёт для главных экранов.
Рекомендуем ознакомиться:
Как сделать анимацию карусели в Figma
Для создания карусели в Figma нам понадобятся фотографии объектов без фона. Чтобы убрать фон с фотографии, можно воспользоваться плагинами.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
