Бесконечный слайдер в Figma
В этом уроке мы научимся создавать интересный и необычный слайдер в Figma.
Шаг 1
- Создаём фрейм.
- Добавляем элементы дизайна.
- Добавляем фотографии.
- Подгоняем их под один размер и выстраиваем друг за другом.
Шаг 2
- Дублируем первую фотографию и переносим её в конец.
- Выделяем все фотографии и оборачиваем их во фрейм (Ctrl+Alt+G).
- Уменьшаем фрейм по размерам одной фотографии.
- Поставьте галочку Clip content.
Шаг 3
- Дублируем фрейм.
- Создаём Component set.
- Во втором варианте, сдвигаем фотографии на следующую.
- Добавляем вариант.
Шаг 4
- В третьем варианте сдвигаем фотографии.
- Добавляем вариант.
Шаг 5
- Сдвигаем фотографии в четвёртом варианте.
- Фотографии в первом и последнем варианте должны быть одинаковые.
Шаг 6
Связываем варианты 1–4:
- After delay — 1ms
- Smart animate
- Slow — 2000ms.
Шаг 7
Связываем варианты 4–1:
- After delay — 1ms
- Instant.
Шаг 8
Копируем первые три варианта и переносим их во фрейм.
Готово!
Теперь ты умеешь создавать бесконечный слайдер.
Рекомендуем ознакомиться:
Делаем интерактивный слайдер в Figma
Для создания интерактивного слайдера нам понадобятся фото, которые мы будем использовать в карточках слайдера
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
