Как сделать интересный слайдер в Figma
В этом уроке мы пошагово разберём, как сделать не банальный, а интересный слайдер. Для него нам понадобятся изображения, которые будут сменять друг друга.
Шаг 1
- Создаём фрейм.
- Рисуем произвольную фигуру при помощи пера (P).
- Получившейся фигуре добавляем скругление.
Шаг 2
- Добавляем текст будущего слайдера и чуточку дизайна.
- При помощи плагина Unsplash вставляем фотографии в наш контур (фигуру).
Шаг 3
- Выносим наш слайдер за пределы фрейма.
- Дублируем его, меняем текст, фотографию и поворачиваем её.
- Делаем эти манипуляции со всеми слайдами.
Шаг 4
- Объединяем все наши слайды во фрейм (Ctrl + Alt + G).
- Уменьшаем границы нашего фрейма, чтобы был виден только один слайд.
- Галочка Сlip content должна быть нажата.
Шаг 5
- Дублируем наш фрейм.
- Сдвигаем содержимое фрейма на следующий слайд. Делаем эти действия для всех слайдов.
- Выделяем все фреймы и создаём Component set.
Шаг 6
- Добавляем дополнительные элементы на первый слайд.
- Дублируем дополнительные элементы в следующие слайды и видоизменяем их.
Шаг 7
Связываем наши компоненты со следующими настройками:
- On click
- Smart animate
- Ease in and out — 600ms.
Шаг 8
Копируем первый слайд (Ctrl + C) и вставляем (Ctrl + V) в наш фрейм с дизайном.
Готово!
Интересный слайдер для твоих будущих проектов готов. Такой слайдер отлично заменит давно приевшиеся, однообразные карусели на главных экранах. Также его можно использовать для других блоков на ваших сайтах.
Рекомендуем ознакомиться:
Создаем 3D анимацию вращения в Figma
Иногда смотришь на свою работу и понимаешь, что хочется не то что добавить, а именно насыпать изюма в дизайн. Так почему бы не сделать эффектную анимацию вращения?
Нажимая кнопку «Подписаться на рассылку», ты соглашаешься с
Политикой Конфиденциальности
и Правилами сайта
.
