Как сделать анимацию карусели в Figma
Для создания карусели в Figma нам понадобятся фотографии объектов без фона. Чтобы убрать фон с фотографии, можно воспользоваться плагинами.
Шаг 1
- Создаём фрейм.
- Добавляем элементы дизайна.
Шаг 2
- Создаём ещё один фрейм.
- Добавляем фотографии, для будущей карусели.
Шаг 3
- Создаём элементы карусели.
- Добавляем текст и группируем (Ctrl+G) его с фотографиями.
- Делаем это со всеми элементами карусели.
Шаг 4
- Увеличиваем первую группу (K) и поворачиваем фотографию в ней на 45°.
- Сворачиваем фрейм, чтобы был виден только один элемент карусели.
- Дублируем фрейм.
Шаг 5
- Поворачиваем фотографию обратно на 0° и уменьшаем.
- Сдвигаем группы на следующий элемент карусели.
- Увеличиваем вторую группу, поворачиваем фотографию на 45°.
Шаг 6
- Дублируем фрейм.
- Повторяем те же действия для последнего элемента в карусели.
Шаг 7
Выделяем все фреймы и создаём Component set. Связываем компоненты со следующими настройками:
- On drag
- Smart animate
- Gentle — 800ms.
Шаг 8
Копируем первый компонент (Ctrl+C) и вставляем (Ctrl+V) его в наш фрейм с дизайном.
Готово!
Анимация интересной карусели для твоих проектов готова. Данная анимация выглядит более динамично, чем статичное перелистывание карточек в стандартной карусели.
Рекомендуем ознакомиться:
Как сделать анимацию navbar в Figma
В этом уроке мы пошагово разберём, как сделать анимацию навигационной панели для мобильного интерфейса в Figma.
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
