Анимируем переключение карточек в Figma

Шаг 1

• Создаём фрейм с цветом 032FC9.
• Создаём Mesh градиент на фоне.
• При помощи плагина Blobs генерируем произвольные фигуры, заливаем их цветом и добавляем Layer blur.

Шаг 2

• Вне фрейма создаём карточки будущего слайдера. Группируем карточки по отдельности (Ctrl + G).
• Переносим карточки во фрейм.
• Добавляем заголовок и кнопки слайдера.

Шаг 3

• Размещаем карточки друг за другом.
• Уменьшаем вторую карточку, непрозрачность карточки ставим 5%, поворачиваем карточку на 2°.
• Уменьшаем третью карточку, непрозрачность карточки ставим 30%, поворачиваем на -2°.

Шаг 4

• Дублируем фрейм.
• Для удобства выравнивания можно вынести направляющие вне фрейма по верхним границам карточек.
• Увеличиваем 2-ю карточку, по размерам 1-й, и сдвигаем её ровно под 1-ю карточку, непрозрачность меняем на 100%, угол наклона 0°.

Шаг 5

• У 3-й карточки меняем непрозрачность на 50%, меняем угол наклона на 2°, увеличиваем и ставим на бывшее место 2-й карточки.
• Увеличиваем 1-ю карточку, и меняем непрозрачность на 0%.

Шаг 6

• Дублируем фрейм.
• Увеличиваем 3-ю карточку по размерам второй, и сдвигаем её ровно под 2-ю карточку, непрозрачность ставим 100%, угол наклона 0°.
• Увеличиваем 2-ю карточку, и меняем непрозрачность на 0%.

Шаг 7

Создаём анимацию (от кнопок к фреймам):

• On click
• Smart animate
• Slow — 600ms.

Готово!

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