Create card flip animation in Figma

In this tutorial, I will show you how to create a flip animation using Figma native tools. We will create a on mouse click flip animation for the UI card.

#figma #figmatutorial #figmatips #uidesign #userinterfacedesign

[ChefPorkypie]

after losing my mind for few days, you pointed me into the right direction in 5 minutes. thanks. I'll make sure to subscribe as I am certain there is much more to learn from you

[theemplaylist]

Thank you Nick! You're truly amazing!!!

[fnonaka]

I didn't understand why u duplicated the front+back in 0:48... it was necessary?

[shubhamsclub]

Thankyou so much for this tutorial. I liked your teaching style. :)

[AyandaSontlaba]

Thank you very much. This tutorial was very helpful to my current project✌

[uvu]

If u guys did this and it didnt flip, make sure u flip the frame after copy it. Hope this help!

[nilakman]

Thank you Nick ! realy good explanation :)

[nguyentam]

please help me to answer why my flip card is not flip but only change like "transparency animation back and front"

[sinekasinu]

thank you so much i saw so many videos but i didint get flip when proto typing it works 🥰🥰🤩🤩

[BigAppleRedd]

it looks so easy my god... thanks :')

[erikortega]

Hi thanks for the tutorial, i have a problem, at the end when i try to present at the last step, i create my frame and i look for my asset, i drag the file to the blank frame but it just disappear, I dont see it, and therefor the animation is blank, any advise? thanks in advance.

[statusTwoHundred]

How we can export this flipping animation to Lottie?

[schooeel]

Hey Nick

How am I now able to change the text/answer on the back of a new instance?
I have the issue whenever I change the question/text in front, the text in the back is also automatically changed :(

[MrTheraseus]

Hi this is great! how can i make it so different cards have different properties for the flipped card? i can do changes to instances front but when clicked it just goest to the original (for example if I want to change the background color of the backside in one of the instances. Thanks!

[prilitakamalia]

Hi! thank you for creating this video, i have been trying this and it works. But it didnt flip. just change the part but the animation of flip didnt work. What do you think?

[smileabdul]

Hey Nick, I did the same but the effect is not a FLIP, idk why it just changes to the other card without flipping it. I am sure I have not missed anything, any help?

[elmerpeng]

I'm trying this, but my cards don't flip, they simply turn into each other...

[spicylimer]

Hi Nick, thanks for the tutorial. I made a similar animation like that and I'd like to export it somehow. Do you have any recommendations on the best way to export this animation? I was thought about gif but I'm struggling so far with the export. Thanks.