UXwithSophia
UXwithSophia
  • 29
  • 16 707
Easy Card Flip Animation in Figma | Step-by-Step Tutorial
In this tutorial, I’ll teach you how to create a smooth card flip animation in Figma.
Whether you're designing an app or a website, this step-by-step guide will help you add a fun and interactive element to your project.
By the end, you'll have a clean, professional-looking card flip effect that’s easy to customize and perfect for your UI designs.
Great for both beginners and experienced designers looking to improve their animations.
Social Media 🌍
LinkedIn: www.linkedin.com/in/sophianwajuo
Переглядів: 106

Відео

Easy Card Animation | UI Design Tutorial2:59Easy Card Animation | UI Design Tutorial
Easy Card Animation | UI Design Tutorial
Переглядів 74День тому
In this tutorial, I’ll show you how to create sliding card animations for app home screens, like the advert cards in food delivery apps. We’ll animate three different cards step-by-step to help you add simple, smooth animations to your app design. Perfect for designers looking to add dynamic elements to their UI projects! Don’t forget to like and subscribe.
Horizontal vs. Vertical Scroll Tutorial | Using Instagram Profile Screen4:54Horizontal vs. Vertical Scroll Tutorial | Using Instagram Profile Screen
Horizontal vs. Vertical Scroll Tutorial | Using Instagram Profile Screen
Переглядів 6514 днів тому
In this tutorial, I’ll show you how to easily create horizontal and vertical scrolling interactions in Figma using Instagram’s profile screen as an example. We’ll break it down with Instagram Highlights for horizontal scroll and the grid pictures for vertical scroll. 🌍 Connect with me on👇 Twitter: sophia_nw_ LinkedIn: www.linkedin.com/in/SophiaNwajuo Email: sophianwajuo@gmail.com
Instagram Story Interaction | Progress Bar Animations in Figma12:29Instagram Story Interaction | Progress Bar Animations in Figma
Instagram Story Interaction | Progress Bar Animations in Figma
Переглядів 110Місяць тому
In this tutorial, I'll show you how to easily create a smooth progress bar animation for Instagram Stories using Figma. Whether you're working on social media designs or interactive prototypes, this step-by-step guide will help you add simple but eye-catching animations.
Create a Dynamic Top Bar Effect for Mobile Screens7:58Create a Dynamic Top Bar Effect for Mobile Screens
Create a Dynamic Top Bar Effect for Mobile Screens
Переглядів 83Місяць тому
Welcome to another Figma tutorial! In this tutorial, I’ll show you how to create a dynamic top bar effect on a mobile screen. You'll learn how to change the top bar when the mouse enters and return it to its original state when the mouse leaves. This simple interaction adds a sleek, modern touch to any mobile design. Follow along and let’s get started. LinkedIn: www.linkedin.com/in/SophiaNwajuo...
Simple Mobile Animations | Fintech App6:42Simple Mobile Animations | Fintech App
Simple Mobile Animations | Fintech App
Переглядів 742 місяці тому
Simple Mobile Animations | Fintech App
Easy Steps to Prototype Interactive FAQs of a Website5:31Easy Steps to Prototype Interactive FAQs of a Website
Easy Steps to Prototype Interactive FAQs of a Website
Переглядів 582 місяці тому
Easy Steps to Prototype Interactive FAQs of a Website
Smooth Tab Bar Animation | Travel App9:31Smooth Tab Bar Animation | Travel App
Smooth Tab Bar Animation | Travel App
Переглядів 402 місяці тому
Smooth Tab Bar Animation | Travel App
Interactive Search Bar & Button | Keyboard Input Animation15:15Interactive Search Bar & Button | Keyboard Input Animation
Interactive Search Bar & Button | Keyboard Input Animation
Переглядів 1022 місяці тому
Interactive Search Bar & Button | Keyboard Input Animation
Drop Down Menu Interaction for a Fintech App | Figma Tutorial16:56Drop Down Menu Interaction for a Fintech App | Figma Tutorial
Drop Down Menu Interaction for a Fintech App | Figma Tutorial
Переглядів 693 місяці тому
Drop Down Menu Interaction for a Fintech App | Figma Tutorial
Quick and Simple Animations in Figma for Any Website Section10:03Quick and Simple Animations in Figma for Any Website Section
Quick and Simple Animations in Figma for Any Website Section
Переглядів 2923 місяці тому
Quick and Simple Animations in Figma for Any Website Section
Anchor Links in Figma || Prototyping Two Sections on the Same Page5:49Anchor Links in Figma || Prototyping Two Sections on the Same Page
Anchor Links in Figma || Prototyping Two Sections on the Same Page
Переглядів 1963 місяці тому
Anchor Links in Figma || Prototyping Two Sections on the Same Page
How to create interactive input fields using components and variants9:04How to create interactive input fields using components and variants
How to create interactive input fields using components and variants
Переглядів 1083 місяці тому
How to create interactive input fields using components and variants
Cursor Animation and Advanced Interactive Search Bar in Figma12:42Cursor Animation and Advanced Interactive Search Bar in Figma
Cursor Animation and Advanced Interactive Search Bar in Figma
Переглядів 29410 місяців тому
Cursor Animation and Advanced Interactive Search Bar in Figma
How to Create a Mobile Responsive Version of a Website in Minutes4:31How to Create a Mobile Responsive Version of a Website in Minutes
How to Create a Mobile Responsive Version of a Website in Minutes
Переглядів 18311 місяців тому
How to Create a Mobile Responsive Version of a Website in Minutes
How to Create Chat Interactions with Prototype on Figma8:40How to Create Chat Interactions with Prototype on Figma
How to Create Chat Interactions with Prototype on Figma
Переглядів 14 тис.Рік тому
How to Create Chat Interactions with Prototype on Figma

КОМЕНТАРІ