Делаем интерактивный слайдер в Figma
Для создания интерактивного слайдера нам понадобятся фото, которые мы будем использовать в карточках слайдера
Шаг 1
- Создаём фрейм.
- Добавляем элементы дизайна и кнопки будущего слайдера.
Шаг 2
- Создаём ещё один фрейм, который будет служить карточкой слайдера.
- Добавляем линейный градиент от чёрного к прозрачному.
- Добавляем текст и выносим его за пределы фрейма.
Шаг 3
- Дублируем фрейм.
- Увеличиваем его ширину в 2 раза.
- Достаём текст.
Шаг 4
- Выделяем оба фрейма и создаём компонентную группу.
Связываем компоненты со следующими настройками:
- While hovering
- Smart animate
- Ease out — 300ms.
Шаг 5
- Копируем первый компонент и вставляем его в наш фрейм.
- Дублируем его несколько раз и добавляем фотографии.
- Для удобства воспользуйтесь плагином Unsplash.
Шаг 6
- Объединяем все наши карточки во фрейм (Сtrl+Alt+G).
- Добавляем Auto layout в меню справа. Расстояние между объектами ставим 20px.
Шаг 7
- Дублируем наш фрейм и сдвигаем фрейм с карточками на одну влево.
- Снова дублируем фрейм и сдвигаем карточки.
Шаг 8
Создаём анимацию от кнопки к фрейму:
- On click
- Smart animate
- Ease out — 300ms.
Готово!
Теперь ты знаешь как сделать интересный слайдер в Figma. Эту анимацию можно использовать практически для всех слайдеров, как на первом экране сайта, так и в других блоках.
Рекомендуем ознакомиться:
Анимация капелек в Figma
В этом уроке мы научимся создавать интересную анимацию капелек, использую режимы наложения в Figma.
Пожалуйста, поделись этим материалом!
Мы потратили много часов на его создание, а тебе нужно всего 10 секунд, чтобы поделиться им!
