Делаем интерактивный слайдер в 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. Эту анимацию можно использовать практически для всех слайдеров, как на первом экране сайта, так и в других блоках.