3D flashcard prototype in Figma
HTML-код
- Опубликовано: 24 сен 2024
- Figma is free to use. Sign up here: bit.ly/3msp0OV
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: / figmadesign
Instagram: / figma
LinkedIn: / figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #shorts
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
It'll be simple once you understand the principle behind 'smart animate' and 'combining as variants'. This combo is literal magic. Just keep practicing 💪
@@irmalair4730you are right
Smart animation turns any web or app in magic
Please keep more of those coming! It's a good exercise!
This was so helpful and now my cards are flipping! Thank you 🌞
You are welcome!
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!
You'll not belive i spend 5-6 hrs. To implement and understand this without any tutorial and even with help of some tutorial you'll still spend lot time that's why genuine I'll say that follow this short not full video tutorials you'll get too much confuse.
Thanks a lot bro you just saved my life.
Cool.... Simple logic but couldn't think of it 😅
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?
When flipping a card, we're rotating it horizontally by 180 degree. So in the example, we flip the rectangular frame horizontally. However, Figma will flip the frame AND everything inside the frame at the time, which makes the text unreadable and it's not something we want. To hack this, we need to flip the text layer back from 180 degree to 0 degree. I hope this makes sense!
@@Figma Thank you for taking the time to clarify 👍
Please post more shorts
Unable to get this sadly :/
I have been looking for this information for a month, thank you very much!😍😍😍
Great!!!
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.
Hi Henrik, perhaps you can add a new variant in the component set that has flipped card and text?
I don't understand why this can't be done with just 2 frames, one for "unflipped" (variant 1), another one for "flipped" (variant 2). Could you please explain why we need 4?
Hi, we're using 2 variants in the tutorial, first variant is "unflipped" and the second variant is "flipped". We have 2 rectangular frames ("front" and "back") inside each variant. This will give us the card flipping animation in the prototype.
+1 so true! Thank you, @Figma, for answering and explaining.
However, surely there's gotta be a faster way.....? Hopefully Figma improves this.
Cute, but can we have real 3D support? Even the sort of transforms available in CSS would be huge.
Thanks!
I have done everything , only the last thing. How to place an insrance in frame? Its not coming for me
Pleasee help
Doesn't work, goes way to fast and doesn't fully show what goes on. plus the fact you can't scroll back. Really frustrating...
Excellent
Thanks! Was wondering how it was made in a widget.
Hello!, how can i put this on squarespace?, there's any option to convert figma to html/css?
Is there a way to see the actual anchor points and animations? Like you’d find in after affects? Having to blind guess at how the variations should be constructed and having to sometimes move things out of frame is annoying. Also why did you flip that text only to flip is back around again? What was the point?
Hi Elle, currently we can't see the actual anchor points of the objects in Figma, but they're default to top left of the object.
When flipping a card, we're rotating it horizontally by 180 degree. So in the example, we flip the rectangular frame horizontally. However, Figma will flip the frame AND everything inside the frame at the time, which makes the text unreadable and it's not something we want. To hack this, we need to flip the text layer back from 180 degree to 0 degree.
How to do it with transparent of glass cards? because it already shows the back card in front, like its overlapping.
Hello, perhaps you can set the back card pass through to 0%?
@@Figma yeah I did that, and it worked. Thank you!
i don’t get it after we connect the card then we take it to the phone, where the flipped one gone??
Tried each step exactly, still can't get it correct, all i get is fade
same , were you able to figure out?
It is not working.
Hi Shrey, make sure you have flipped the card horizontally and name your layers correctly.
This is Dev people most hated app and making a bunch of designers think they’re good 😂
how do you make your flashcard sides as frames, when i click on the frames option it shows me device sizes, please help me.
If you want to turn existing layers into a frame, you can: select the existing layer --> right-click --> select "Frame selection" from the menu
Also when I select one copy of the flash card to create it into a component, should the back and front frames of that card be selected?
Hi, both back and front frames are selected to turn them into one component. Feel free to use the Figma community file to check the finished prototype: www.figma.com/community/file/1237476413473240603/fun-with-microinteractions
Why if I create some animation in the design file which I'm working on just to check some cool effects, won't work. But when I create a new design file and creat a similar animation it works perfectly. Is it essential to create separate file to try something new, or it is some kind of error?
I like this video and try to apply it in my own design. But the weird things is no matter how i follow the video exactly the same step, it doesn't work in my design. I mean there is some animation effect, but it isn't the 3D flashcard. Can't figure out the reason for now.
After try many many times, I make it. Have to make background color different, and have to "shift+H" the first back card even though it looks no different without text at that moment, and have to make sure the correct layer order.
Hi Yue, glad you figure it out! Even though it looks no different without text, you still need to flip the card horizontally because it will change the anchor point of the card. You will notice a change in the X position in the right side panel once you hit Shift + H.
@@Figma Appreciate your reply. It totally makes sense now. Please continue to make more shorts like this which is so useful for understanding how all things work together.
We will! Thank you so much for your support! 😊
How do you display those frame names?
why you duplicated cards?
Why do mine just change from front to back without flip animation?
same issue((
i got it and it works. Make sure you name all layers as in the video and combine them properly
You can do the same thing in 2 frames only.
Too complicated
Figma? More like ligma
True!
It’s not smooth either
check this method it is smoother: ruclips.net/video/N2dRvmVifXs/видео.html
Doesnt work for me
0:01
So much easier with CSS.
Show me your code please, in Tailwind preferably:)
@@gabrielbrocklesby I think my comment got deleted or something (it contained URLs). You could just google "CSS flip card" I guess.
😍
😮😮😮😮💨
Not working
Waste of time 😭😭