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