Всім привіт!
Привіт друзі! В цьому відео я покажу вам, як зробити ось такий соковитий анімований слайдер у Figma. Поїхали!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов’язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео.
Отже, у нас є чотири бутилки соків, робоча область та фрукти. Виділяємо всі соки і переносимо всередину робочої області, накладаємо бутилки одну на одну і вирівнюємо по центру. Так само вставляємо фрукти.
Тепер всі фрукти, крім ананасів, перетягуємо вверх, щоб їх не було видно, але водночас залишаємо всередині нашого фрейму. Аналогічно робимо із бутилками. Виділяємо робочу область і змінюємо її заливку.
Дублюємо наш фрейм, змінюємо кут нахилу бутилки на мінус 90 градусів і переносимо її вниз, так як я показую на екрані. Обов’язково в шарах вставляємо бутилку всередину фрейму і тепер витягуємо бутилку соку зі смаком лайму. Далі повертаємо ананаси на 90 градусів і переносимо вверх, вони також повинні бути всередині фрейму. Витягуємо на їх місце частинки лайму. Виділяємо фрейм і змінюємо йому колір на зелений.
Дублюємо ще раз робочу область і повторюємо всі ті самі дії тільки з помаранчевим соком. І ще раз дублюємо та вставляємо на передній план сік зі смаком кавуна.
Готово! Переходимо в Prototype, тягнемо стрілочку від жовтої бутилки до зеленого фрейму та налаштовуємо таку ж саму анімацію, як у мене на екрані. Далі протягуємо стрілочку від зеленої бутилки до помаранчевого фрейму, тепер від помаранчевої бутилки до червоного фрейму і остання стрілочка від червоної бутилки до жовтого фрейму. Таку саму анімацію налаштовуємо фруктам.
Тепер переходимо в режим презентації і дивимось. Як бачите, нам потрібно поправити червону бутилку та кавуни, тому що вони втікають просто вниз або вверх, а також не всі шари з фруктами знаходяться на задньому плані. Ну а після коригування кутів нахилу та порядку елементів ми отримали ось такий результат.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків по анімації у Figma, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!