Привіт друзі! В цьому відео я покажу вам, як створити ось такі анімовані карточки у Figma. Поїхали!
Якщо ви потрапили на цей канал вперше і цікавитесь всім, що пов’язано з Adobe Illustrator і Figma, підпишіться на канал і натисніть на дзвіночок, щоб не пропустити нові відео.
Отже, у нас є маленький сет іконок. До речі, як робити сет-компонентів, я розповідала у відео, що зараз з’явиться у вас підказка. Також у нас є текст та необхідні кольори. Спочатку створюємо карточку, переходимо в Assets, вставляємо іконку, копіюємо заголовок, змінюємо йому налаштування та розміщуємо під іконкою. Далі копіюємо опис і також змінюємо йому налаштування.
Виділяємо всі три елементи, створюємо автолейаут, вирівнюємо по центру, інтервали робимо 8, а педінги 64. Основна карточка є. Тепер попрацюємо над її станом під час наведення мишкою. Продублюємо карточку, зменшимо педінги до 32, заокруглимо кути, зробимо білу заливку, додамо ефект тіні та повернемо її на 5 градусів і трішечки збільшимо.
Далі створюємо фрейм таким самим розміром, як карточка зліва, і переміщуємо другу карточку всередину фрейму, вирівнюємо по центру. Виділяємо обидві карточки, підрівнюємо та створюємо сет компонентів.
Тепер налаштуємо анімацію. Тягнемо стрілочку від однієї карточки до іншої, тут вибираємо “While hovering”, “Smart Animate”, “Quick” і 400 мілісекунд. Далі створюємо новий фрейм, вставляємо сюди три карточки, виділяємо їх та додаємо автолейаут, налаштовуємо інтервали і вирівнюємо по центру.
Швиденько змінимо в двох карточках іконки та текст. Виділяємо наш фрейм, змінюємо колір фону і тепер включаємо режим презентації, щоб побачити, що у нас вийшло.
На цьому все. Сподіваюсь, що вам сподобалось. Якщо ви хочете ще більше уроків по анімації у Figma, напишіть про це в коментарях, а також ставте лайки цьому відео та підписуйтесь на канал. З вами була Адолька, до зустрічі!