I am new to Prototyping and Animating in Figma, and this Tutorial was just awesome! It is easy to follow along and at the end I have created a sleek looking animation. You just earned yourself a new Subscriber and a Like :)
To be honest with you, this is the best figma content I have seen in my career. The explanation is smooth and excellent, and your level is very international.
Sorry for the delayed response I was away due to personal emergency. You have to alt+drag to make an instance of a component. Or just copy and paste … don’t drag the original component itself.
May I ask how could you actually export this animation from Figma to a software like Framer which actually lets you publish the website with the animation?
damnn, that was cool, you got a sub :D , i just want 1 thing that , can you like tell me from where should i practice UI designing like watching this type of tutorials really help me but I'm confused that where am i heading towards? all i know is that i can play with frames and shapes to create something new :)
The best thing is to do when learning is to copy design and try to add some unique things in those designs. So for example try to design Twitter but when designing think about how you can make the design more user friendly and try to create that design. Its a learning technique. It will take a few projects and then we will start getting ideas about unique design concepts. And one more suggestion is to do see alot of examples of UI designs on Dribbble website. It will embed ideas in your mind subconsciously.
Make sure you are bringing a copy of the variant to the the frame… for that Hold Command Key on Mac or Control Key on windows while you drag the variant to the frame. I think you are bringing the original variant to the frame. You have to bring in the copy.
I am new to Prototyping and Animating in Figma, and this Tutorial was just awesome! It is easy to follow along and at the end I have created a sleek looking animation. You just earned yourself a new Subscriber and a Like :)
To be honest with you, this is the best figma content I have seen in my career. The explanation is smooth and excellent, and your level is very international.
Thank you so much for your appreciation. You made my day.
Amazing! You have earned a new subscription👋🏻
Oh wow, thank you so much ❤️
great
f i drag my varient to frame, its leaving the component and shows only 3 varients inside the component.
what should i do?
Sorry for the delayed response I was away due to personal emergency.
You have to alt+drag to make an instance of a component. Or just copy and paste … don’t drag the original component itself.
May I ask how could you actually export this animation from Figma to a software like Framer which actually lets you publish the website with the animation?
You will have to create this as a component in Framer. For this I will create another video.
damnn, that was cool, you got a sub :D , i just want 1 thing that , can you like tell me from where should i practice UI designing like watching this type of tutorials really help me but I'm confused that where am i heading towards? all i know is that i can play with frames and shapes to create something new :)
The best thing is to do when learning is to copy design and try to add some unique things in those designs. So for example try to design Twitter but when designing think about how you can make the design more user friendly and try to create that design. Its a learning technique. It will take a few projects and then we will start getting ideas about unique design concepts. And one more suggestion is to do see alot of examples of UI designs on Dribbble website. It will embed ideas in your mind subconsciously.
@@AverageDesignDude ohk ok got it , thanks a lot dude :)
Hey can you make this same button and make it change the background color also like dark mode in our phone?
Absolutely. In the next video, I will demonstrate how to change background color of page on button click.
If i drag my varient to frame, its leaving the component and shows only 3 varients inside the component.
what should i do?
Make sure you are bringing a copy of the variant to the the frame… for that Hold Command Key on Mac or Control Key on windows while you drag the variant to the frame. I think you are bringing the original variant to the frame. You have to bring in the copy.
@@AverageDesignDude Thanks it helped.
How can we put this in website in form of code
This video only for Figma design but its quite easy to implement in code through basic html and css.
Transitions will be made through css animations.
The animation is not working
I am pretty sure it works. Can you please watch the video once again and try to follow each step