Как сделать интересный слайдер в 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) в наш фрейм с дизайном.

Готово!

Интересный слайдер для твоих будущих проектов готов. Такой слайдер отлично заменит давно приевшиеся, однообразные карусели на главных экранах. Также его можно использовать для других блоков на ваших сайтах.