Brilliant my friend! I hope that you can make more and more tutorials like this! You are a Pro and your examples are great look and simulates a real situations! Thanks for your work
Superb!!! Thats awesome pro stuff bro!! Tips are very helpful to save efforts and avoid errors... Even dint get those in paid classroom sessions.. Looking for more from you..
Subscribed sir! This is really helpful. I've spent days scrolling past youtube to find this exact tutorial. Everyone that I saw making micro interactions were basically duplicating screens and my logical brain went like, you can't possibly duplicate 5 screens for one button interaction. How complicated would it then make to even change anything on the parent frame. All 5 frames would have to be changed! I knew there was a simpler way and clearly variants are the answer. I just had one question, since you already work in the industry, where do you guys save these variant groups and components? Is it in the same page on the same file or a different file for just variants and components altogether?
We usually create separate page for all the local components / variants. We also use Design System library for common components which we use across multiple files.
Hey Udayraj, thank you so much for this awesome video. Can't wait to explore more of your content. This is the best video I have found about interactive components so far.
dear respectable mentor, i am a big fan of your teaching strategies which is very effective to learn for beginners. have you become a figma expert by reading any books or u tube videos or google blogs
Can you help me please? When I make card hover interaction do I need to make it for every card? Because while hovering in another card it shows the main component's content
No you don't have to make it on every card. You can select another card, modify its content and select original state again. Then hovering state should work just fine. Let me know if you still have problem with hovering. I'll be happy to assist
Sir can u help me out: In the slider the volume symbol gradually increases as we drag the slider but if we make some changes in the icon like if we add another arc to the icon then animation don't goes proper, does that have different technique or anything else.
Yes. I'll try it out. Subed to your channel.Great content. Can you do a video on creating complex scroll animations. For example,this site: simplychocolate.dk
Hi, when I draw the Slider Interaction on a new file by myself, I cannot find the "change to-----> Volume level" on the setup menu. On the download material, the volume level has automatically existed. How to set it up on a totally new file? Anyone? Thank you.
Is it possible for someone to create two different interactive components that communicate with each other. For instance an add button or multiple add buttons that when clicked add to a shopping cart(icon) that indicates how much is added to it?
@@udayrajsathe you already lost me. 😂🤣 I am just starting with all this, including ProtoPie, can you give an example how it could be done in ProtoPie? Thanks 😊
For the counter component when I try it the numbers keep moving lower to the bottom. So 0 starts in the middle, then 1 gets lower 2 a little bit lower then 3 is a the bottom of the component I've tried see why this is happening but can't find a reason Anyone else have this problem?
Hi buddy, Great tutorial. I downloaded the beta desktop version for mac. But still the "change to" is not showing in the prototype menus. Can you tell why
We still need to Sign Up as Beta Tester using the form link mentioned in the description. You can use it once you’re approved. I wrongly mentioned in tutorial that you can use it on Beta App right away 😞 I didn’t realise that I was already approved.
Muy bueno tu video, felicitaciones !! tengo una pregunta yo intento hacer el ejercicio de tu video pero al momento de darle interacción no me aparece "Change To", me podrias indicar como es ? Gracias
Gracias Laura. La función "Cambiar a" es visible para los probadores "beta aprobados". ¿Te has apuntado a eso? El enlace está en la descripción. Espero que esto ayude. - Traducido con Google
Solo necesitas llenar el formulario. Recibirá un correo de bienvenida a la actualización de 'Figma Interactive Components' en un día. - Traducido con Google
I have installed beta version and i can't find the "change to" interaction. Thanks for the video. I was so happy to know about this feature and wanted to try on my own but....
@@udayrajsathe oh😀😀, I thought i will be able to use beta version right away. I have signed up and waiting for their respone. Thank you for letting me know. Please share your Fonts source with us sometimes it hard to find it online.
After delay is available only when Outer Frame is selected. Please check whether you have selected Frame or the rectangle inside. Let me know if this works
@@udayrajsathe The problem I faced, was that I wanted to use Interactive Components to make an image slider with the delay effect but I forgot that this is in beta and not in normal version of the program XD
@@udayrajsathe So actually, interactive components let you add "After delay" to even smaller component without it needeing to be a "main" frame? if yeah then this feature is crazy great and will change so much
Yupp it does. In final demo you can see tons of moving components in a single ‘Main Frame’. Just to remember, interactive components work only on Variants 😎
I wasn’t expecting this comment here. Anyways, I always update HRs about the feedback on candidate and its their responsibility follow up with them. If you haven't got any reply, please ping me on LinkedIn and I'll check the status.
Delays might happen as many of us going through some or the other problems on personal front. Kindly reach out the HR directly. I’m here to share my knowledge and genuinely help others. I would appreciate if you can keep this chat separate from my company’s hiring process 🙏🏽
Its available in free version too. But it's still in beta. You need be approved beta tester to use that and it only shows up in component variants. Link to sign up for beta is in description.
Link to Practice File -
www.figma.com/community/file/948292820072016890/Interactive-Components-w%2F-UA-cam-Tutorial
I've been looking for a simple explanation on how to create an interactive counter. Thank you so much for this video
You're very welcome!
This is by far the most simple and well-explained tutorial I've found.
Thanks Ronald 😊
Brilliant my friend! I hope that you can make more and more tutorials like this! You are a Pro and your examples are great look and simulates a real situations! Thanks for your work
Thanks 🤩
Superb!!!
Thats awesome pro stuff bro!!
Tips are very helpful to save efforts and avoid errors... Even dint get those in paid classroom sessions..
Looking for more from you..
Subscribed sir! This is really helpful. I've spent days scrolling past youtube to find this exact tutorial. Everyone that I saw making micro interactions were basically duplicating screens and my logical brain went like, you can't possibly duplicate 5 screens for one button interaction. How complicated would it then make to even change anything on the parent frame. All 5 frames would have to be changed!
I knew there was a simpler way and clearly variants are the answer.
I just had one question, since you already work in the industry, where do you guys save these variant groups and components? Is it in the same page on the same file or a different file for just variants and components altogether?
We usually create separate page for all the local components / variants. We also use Design System library for common components which we use across multiple files.
Discovered your channel so late, but glad that I'm here. Prototyping is my weak bit, will surely learn from you!
I'm glad that you did 😃
Feel free to reach out if you need any help.
Fantastic tutorial Udayraj. I loved the loading interactions. Just what I was looking for.
Glad to know it helped 🤘😎
Hey Udayraj,
thank you so much for this awesome video. Can't wait to explore more of your content. This is the best video I have found about interactive components so far.
Delighted to know this 😊 Can’t wait to hear your feedbacks on other videos. Hope you’ll find those useful too 🤞🏽
Your tutorial worth thousand dollars... I tried some paid tutorials... None of them taught like this... All showed some basic shits... Thanks a lot
Thanks a lot :)
dear respectable mentor, i am a big fan of your teaching strategies which is very effective to learn for beginners. have you become a figma expert by reading any books or u tube videos or google blogs
I learned by trying things on Figma :) and mostly learning from Figma's own channel.
Great tutorial man.
I appreciate you for making this
These are such great examples, thank you!
Excited to see what you come up with. Feel free to tag me if you share something on social media 😎
Amazing tutorial, Thank you so much
Thanks Ramazan 😀
Need more tutorials from you sir...
You're a great teacher dude. Love your work :)
Thank you so much, Jack 😀
Can you help me please? When I make card hover interaction do I need to make it for every card? Because while hovering in another card it shows the main component's content
No you don't have to make it on every card. You can select another card, modify its content and select original state again. Then hovering state should work just fine.
Let me know if you still have problem with hovering. I'll be happy to assist
Great video! Thanks so much!
Thanks Chelsea 😀
So much helpful.Want more on how to create drsign systems with interactive components
Noted. Design system is in my mid since many days. I'll start preparing content for the same.
The Best of the Best
Hey Thanks :)
Wow this is the best tutorial i have seen on interactive components thank you
Thanks Saurav 😊
Just one word - mindblown! I can't thank you enough for these awesome tutorials!
Thanks Sooraj 🥳
Sir can u help me out:
In the slider the volume symbol gradually increases as we drag the slider but if we make some changes in the icon like if we add another arc to the icon then animation don't goes proper, does that have different technique or anything else.
You need to have exact same layers in 2 states, then only it works well.
May be you can share your file and I can have a look.
REALLY LOVEEEE ITTTTTTTTTTTTTTT. THANKYOU
Thank you so much :)
Absolutely awesome!
Pretty well explained.
Can't wait for these features to release.
Thanks 😊
It might take 1-2 months for official release. I think you should sign up for Beta and start using it 😇
Yes. I'll try it out.
Subed to your channel.Great content.
Can you do a video on creating complex scroll animations.
For example,this site:
simplychocolate.dk
woow gooooooood Best Best Goooooooood~~~ Tutorial !!!!!! OMG
Amazing tutorial .Tank U so much ♥
It's a great video!!
Glad to know that 😇
Hi, when I draw the Slider Interaction on a new file by myself, I cannot find the "change to-----> Volume level" on the setup menu. On the download material, the volume level has automatically existed. How to set it up on a totally new file? Anyone? Thank you.
Didn’t understand completely 🤔
Can you connect with me on LinkedIn? I would love to help. It’s better for quick chat.
Very nice video. Good job. But the change to option is not visible in mine. May I know why?
May be because of these reasons-
1. You’re not approved beta tester yet ( you need to sign up)
2. It only works inside Variants
@@udayrajsathe Got it. I was trying hard to find out why it was not showing.
Keep it up sir!
Thank you, I will 😃
Even in Figma classic or beta version, I can not see the NAVIGATE TO option in prototype mode..what I am doing wrong??
Do you mean Change To? If yes, you need to be approved beta tester for interactive components.
Superb Bro loved it
Excellent tutorial. Thanks for sharing 👏👌
Thanks Roy ✌😎
thx for sharing 😃👍
Is it possible for someone to create two different interactive components that communicate with each other. For instance an add button or multiple add buttons that when clicked add to a shopping cart(icon) that indicates how much is added to it?
Sadly that's currently not possible in Figma. But you can try Protopie where you can add conditional logic to your prototype.
@@udayrajsathe you already lost me. 😂🤣 I am just starting with all this, including ProtoPie, can you give an example how it could be done in ProtoPie? Thanks 😊
This is really awesome :) !!!!!!!!!
Thanks Amol :D
For the counter component when I try it the numbers keep moving lower to the bottom.
So 0 starts in the middle, then 1 gets lower 2 a little bit lower then 3 is a the bottom of the component
I've tried see why this is happening but can't find a reason
Anyone else have this problem?
Thanks a lot, this video is very helpfull
Glad to know that you found it useful 🤟🏽
Great tutorial, Udayraj, congrats!
Thank you so much 😊
Keep watching ☺️
Amazing tutorial 😱😱😱 Thank you so much!
Thanks 😊 Glad to know that you liked it 🤟🏽
All I’ve ever wanted
Glad to know that 😎
This is "awemazing"
🔥🔥🔥
Hi buddy, Great tutorial. I downloaded the beta desktop version for mac. But still the "change to" is not showing in the prototype menus. Can you tell why
We still need to Sign Up as Beta Tester using the form link mentioned in the description. You can use it once you’re approved.
I wrongly mentioned in tutorial that you can use it on Beta App right away 😞 I didn’t realise that I was already approved.
@@udayrajsathe how to get the approval?
Just fill up the Beta Tester form(link in the description). Figma team typically approves within a day.
Muy bueno tu video, felicitaciones !!
tengo una pregunta yo intento hacer el ejercicio de tu video pero al momento de darle interacción no me aparece "Change To", me podrias indicar como es ? Gracias
Gracias Laura.
La función "Cambiar a" es visible para los probadores "beta aprobados". ¿Te has apuntado a eso?
El enlace está en la descripción. Espero que esto ayude.
- Traducido con Google
@@udayrajsathe hola !!
te refieres al formulario ?? si lo llene pero no paso nada, o me hizo falta algo ??
Solo necesitas llenar el formulario. Recibirá un correo de bienvenida a la actualización de 'Figma Interactive Components' en un día.
- Traducido con Google
All super bro!
Thank you 🤘😎
I have installed beta version and i can't find the "change to" interaction.
Thanks for the video. I was so happy to know about this feature and wanted to try on my own but....
Have you signed up to become a Beta Tester? I got approval within 6 hrs.
I was told that Beta Desktop App gives access to this feature.
@@udayrajsathe oh😀😀, I thought i will be able to use beta version right away.
I have signed up and waiting for their respone.
Thank you for letting me know.
Please share your Fonts source with us sometimes it hard to find it online.
Good video
Glad you enjoyed 😀
Pls do video on parallax effect and scroll responsive
I already have a video on the Parallax effect - ua-cam.com/video/iVhAe3TokIM/v-deo.html
Hope it's helpful 😇
Thankyou dada🙏
Always welcome 😄
Amazing Designer
Thanks 😊
Wow really amazing!!
Thanks 😊
You are the King 👑 , thx for share man!
Thanks ☺️🙈
Excellent!
Thanks 🤩
I have the changeto action...but when i play the prototype, the interaction is not working
Is this resolved yet? I'm checking for the reasons
Great
Thanks Rahil 🙏🏽
now the change to options not visible for me
its showing me
Scroll to
any reasons for that?
Have you signed up for beta access and got approval ?
So has this been released yet? It seems like it's still in beta...
Yupp. Its still in beta 😊 but you can try it by signing up
@@udayrajsathe Already did, thanks man! Keep it up!
SUPER BRO!
🤘😎 thanks bro
sir can u help me out
I cudnt find the intractive component "change to" option
You need to be Approved beta tester & components must be Variants to use this feature. Have you signed up already?
@@udayrajsathe thank you sir, I got it, thanks for your videos. yes I signed up already but I got the notification a day after.
So cool!
Thanks Sarvesh 🤘😀
I have been waiting for hours but figma has not sent me the email to activate the beta version yet 😢
They typically approve within a day. Have you received it now?
@@udayrajsathe No, still not. I have tried it several times, but it’s still no reaction yet. :’(
@@udayrajsathe btw. I really love your tutorials video. Hope that you will release more in the future.
welcome back bro
Thanks Bro. 🤘😎
Can you go for grid system in the next video
Sure Harsh. I’ll update you as soon as I work on that video 🤟
I have downloaded it but I do not have the 'change' one. Why is that? 😢
Sorry for late reply. Its not accessible to everyone. Did you try it already?
Why I can’t find function “Change to” when I do prototyping !?
Have you signed up for Beta and got approved already ?
@@udayrajsathe yeah I’m already signed thanks
Why I can't see change to option in prototype
Have you signed up for Interactive Components Beta Testing? Link is in the description. You can only use it once you’re approved beta tester.
for image slider, why i cannot use after delay ? the after delay is blocked
Just replied to your mail. Let me know it that helps
@@udayrajsathe Hi I have same problem with after delay. When I want to click after delay, IT does not allow me to click;;;;;;
After delay is available only when Outer Frame is selected. Please check whether you have selected Frame or the rectangle inside.
Let me know if this works
I can't get to work the tooltip animation. I spent like two hours already. Can u explaing it more deeply?
Would love to help. Please connect with me on Insta or LinkedIn and we can discuss
@@udayrajsathe Hello, thank you for your response. I sent u a message on Insta.
I FUCKING FINALLY FOUND IT!!!
Don't get it. I don't see those interaction options in prototype mode at all. I've done EXACTLY the same as shown in this video.
Have you signed up for Beta Testing? You can try these features only when you get approval mail from Figma.
Bessst
Thanks Ramazan 😎
😍😍😍😍
🤩
the Image slider isn't working for me and it's sad I've wasted 2hours on this already
What’s the problem you’re facing? I might be able to help.
@@udayrajsathe The problem I faced, was that I wanted to use Interactive Components to make an image slider with the delay effect but I forgot that this is in beta and not in normal version of the program XD
Happened with me too 😅
@@udayrajsathe So actually, interactive components let you add "After delay" to even smaller component without it needeing to be a "main" frame?
if yeah then this feature is crazy great and will change so much
Yupp it does. In final demo you can see tons of moving components in a single ‘Main Frame’. Just to remember, interactive components work only on Variants 😎
Atleast have a basic courtesy to update on the hiring process to the candidates, being active on UA-cam only won't come in handy😎
I wasn’t expecting this comment here. Anyways, I always update HRs about the feedback on candidate and its their responsibility follow up with them. If you haven't got any reply, please ping me on LinkedIn and I'll check the status.
@@udayrajsathe well then your companies Hr should be proactive in replying to candidates 🙄 until they have been asked for.
@@udayrajsathe I think this is the better place to be update on the process instead on emails😎
Delays might happen as many of us going through some or the other problems on personal front. Kindly reach out the HR directly. I’m here to share my knowledge and genuinely help others. I would appreciate if you can keep this chat separate from my company’s hiring process 🙏🏽
this video is not clear in its view ,we are not seeing well image next time try to correct it
Sure. I'll improve
I did not find "change to" at 2:00. Is it because this is not a beta version? Is it because I'm using the free version??
Its available in free version too. But it's still in beta. You need be approved beta tester to use that and it only shows up in component variants.
Link to sign up for beta is in description.
Thank you so much bro.. it's nice and helpful
That was very fast :D Glad to know that you liked it. 🤗
In my figma file combine variants not showing..how?
Combine variants shows up when you select multiple components.