3D flashcard prototype in Figma
125,608
Published 2022-08-04
Today we’re making a 3D flashcard prototype in Figma.
Start by making each side of a flash card. We need two frames: one for the front, and one for the back. Flip the back frame horizontally. This gives us the flipping animation in the prototype. Now, click into the text layer and flip the text back so we can read it. Duplicate the star icon and change its color.
Now, let’s make the flipped version of the card. Duplicate and re-order the frames. Rename them since their positions have now switched.
Align each card vertically. Make sure the “front” layer is on top of the “back” layer. Create two components and rename them to “unflipped” and “flipped”.
Select both and combine as variants.
Now switch to prototype mode and connect them with smart animate.
Place an instance in a frame, and click present.
Now you can flip flap all day!!
____________________________________________________
Find us on ⬇️
Twitter: twitter.com/figmadesign
Instagram: www.instagram.com/figma
LinkedIn: www.linkedin.com/company/figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #shorts
All Comments (21)
-
Use this community file to follow along: bit.ly/3NQj2sf
-
Looks complicated, but I love how Figma keeps working on these complicated scenarios. They are definitely the future
-
Please keep more of those coming! It's a good exercise!
-
This was so helpful and now my cards are flipping! Thank you 🌞
-
I have been looking for this information for a month, thank you very much!😍😍😍
-
i love figma & learned how to flip. thanks and keep it up
-
El mejor tutorial de todos!! He estado muchas horas tratando de hacerlo funcionar y gracias a este video lo logre. Thanks you very much!
-
Thanks a lot bro you just saved my life.
-
Please post more shorts
-
Thanks!
-
Cool.... Simple logic but couldn't think of it 😅
-
Great!!!
-
Excellent
-
Unable to get this sadly :/
-
Thanks! Was wondering how it was made in a widget.
-
Cute, but can we have real 3D support? Even the sort of transforms available in CSS would be huge.
-
This is Dev people most hated app and making a bunch of designers think they’re good 😂
-
I'm actually prototyping a card game in Figma so this was perfect... I thought. But I can't get it to work because my cards are already components and the text can't be flipped in a component apparently. So all I get is a fading animation, no flipping.
-
I am baffled by this. It seems so overly complicated for such a simple animation. In the setup why horizontally flip the frame but then horizontally flip the text back again? Can you explain the steps please?
-
