Prototype in Figma Tutorial - All Triggers & Transitions - 📎 With Practice File

[@udayrajsathe]

Practice Figma file Download Link www.figma.com/community/file/880438643197199866

[@arshitvaghasiya7317]

I am feeling guilty that I'm watching this quality tutorial for free! Really appreciate your efforts man 🙏

[@udayrajsathe]

Your comment made my day :) Thanks.

[@jacquesroux7069]

@@udayrajsathe GREATEST TUTORIAL after 2 weeks or learning

[@ajaym6795]

Much respect and appreciation for you. This is the best video I've seen on Prototyping in Figma. You showed us the basics then moved on to practical examples. Glad that my friend recommended this channel to me.

[@udayrajsathe]

Delighted to know this 🤗 Please share with your connections too. It’ll really help me a lot.

[@katdale-b2d]

Thank you so much!!!!! I was trying to figure out how to do the Tap & Hold interaction for two days now !!! You're a lifesaver!!!

[@kishorekumarseenivasan]

thanks a lot for making us understand the basics of prototyping uday, kudos to you 👏

[@biru9816]

Best video I've found on prototyping for a beginner. Simple, easy to understand and powerful techniques explained simply

[@udayrajsathe]

Thanks Biru :) Please share it within your network. That will help me a lot.

[@madebysinatra]

This is absolutely the best and broad Figma prototype tutorial I have watched, and believe me when I say, "I've seen A LOT" . Thank you champ👍

[@udayrajsathe]

Wow, thank you! 😎 Mission Accomplished 🤘

[@emy9272]

i can't believe how long it took just to find a video that shows how to get a keyboard to appear in figma. thank you!

[@JidePlush]

Has to be the best video I've seen on prototyping

[@udayrajsathe]

Wow! Great to hear that 😃

[@ramazanguler6066]

There is not better tutorial than this for prototype. Thank you so much

[@RealMehedi]

You should have million subscriber... Never seen such underrated channel.... Keep up the good work please

[@udayrajsathe]

Your appreciation means a lot to me 😃🤩 I just started about a year ago. Hoping to grow faster in this year ☺️

[@RealMehedi]

@@udayrajsathe can you make any full course in udemy or skillshare...? Like a project based detailed course.... You will be benefited and so do we...

[@JR-gh8lp]

probably the best & most complete video of transitions I have found. Thank you!

[@udayrajsathe]

I'm so glad to know that! Starting Animations & Micro Interactions series. Stay tuned :-)

[@MuhammadKamran01]

Very helpful! I'm finding this type of video since a week. Thank You!

[@udayrajsathe]

Glad to know that you found it helpful :)

[@omerbulbul7275]

Sharing your practice file was very helpful. Thank you

[@udayrajsathe]

You're very welcome!

[@rethikrock8544]

this is "THE BEST FIGMA" tutorial available!!! thanks for your efforts sir!

[@udayrajsathe]

Thanks 🙈

[@negines5004]

This tutorial was really amazing. I just started working with Figma and I always had problems in prototyping. My questions are almost solved. I really thank you.

[@LilyBrand12345]

Thank you! There are lots of tutorials online on prototyping but they are all over the place and doesn't give a full picture, so it's really confusing as a beginner. On top of that, there doesn't seem to be any official in-depth tutorial on prototyping so we're left to figure things out on our own. Also, I realised Figma keeps having lots of updates (which is a good thing!), and recently they implemented a new prototyping update that allows for multiple interaction layers, but with no explanation I didn't know where to start. + Subscribed

[@udayrajsathe]

Thank you so much for your kind words 😊 My goal is to create tutorials for Practical uses rather than just basics. This motivation is all I need✌

[@angienatalia8770]

This videos is just amazing, I found everything I needed to make my prototypes! Thank you

[@udayrajsathe]

Thanks Angie 😄

[@ErumEhmad20]

I had to pause and write a thank you note :) you are very talented for figuring this all out

[@udayrajsathe]

Thanks Erum 😊 Happy to know that it helped.

[@davidmarchuk9553]

This was SO USEFUL! I just landed a job that needs Figma, and found a lot on how the tools work, but nothing nearly as good as this around Prototyping. Thank you so much Udayraj, your video was straightforward and the explanations super clear!

[@udayrajsathe]

Wow. Congratulations David. Thrilled to know it it helped you 😍😎

[@omkarghodke9472]

Exactly what I needed to see. Thanks a lot, brother! Would love to create more complex interactions.

[@udayrajsathe]

Thanks bro. Don’t forget to try interactive components for complex interactions 🤟🏽😎

[@imca-b-10rajwanijatishmano4]

Thank you so much! Amazing examples💯

[@siddharthtrivedi3322]

Really good and professional video content :)

[@Puleczech]

Okay man, I thought this would be basic and almost closed the video. But you have shown some pretty amazing things and turned the video in one of the best resources on prototyping I've seen so far! Thanks!

[@udayrajsathe]

Glad it was helpful! Feel free to share with your network. It would really help me reach wider audience :)

[@ravikanthbuddiga5146]

Some of the best tutorials for Figma!

[@udayrajsathe]

I’m so grateful. Please share my channel with your friends. It’ll help me a lot 🙏🏽

[@ravikanthbuddiga5146]

@@udayrajsathe Sure will do

[@dikhyantkrishnadalai6422]

Thank you Udayraj. This is exactly what I was looking for.

[@udayrajsathe]

Glad that it helped 😎

[@vincequach.55]

Thank you so much, Udayrai! I really appreciate your instruction.

[@udayrajsathe]

It's my pleasure🙏

[@michaelng1990]

Actually its so dope, thanks a lot for this tutorial. I have thought i gotta learn AE to showcase my work, but now i stick with figma, so much easier than before!

[@udayrajsathe]

Awesome 🤟🏽😎 AE is definitely a good tool to learn. But we can achieve so much in Figma. Good enough for most cases.

[@hugocsl]

Dude you rock! Thanks from Brazil!

[@udayrajsathe]

Thanks Hugo 😃

[@chandralekha1231]

Amazing video. One of the best, simple and direct. Keep it up. Please post more.

[@udayrajsathe]

Thanks Chandralekha. I’ll keep posting videos. Stay tuned 🤞🏼

[@fikrikun736]

Your channel like hidden gem sir, thankyou so much for the course. It's really helped me a lot for junior designer like me.

[@udayrajsathe]

Can't express how grateful I am ❤️

[@nhunqn2001]

Thank you so much!!!! You are amazing sir!

[@naitikkathiriya]

really so magical rather than making coding instead,,,,.. thnx bro for convey us very professionally and good manner!! ✨✔

[@udayrajsathe]

Delighted to know that you liked it 🥳

[@jaymcd8577]

This was great, thank you

[@sadektuts9088]

Thanks, My Brother, This Tutorial is the Most Advanced Tutorial for Beginners or intermediate Level Designer to learn Figma Prototype. I suggest this tutorial for those who want to learn about prototyping. Many Many Thanks For Share us to This informative Tutorial with.

[@udayrajsathe]

Hey thanks😎 Keep supporting my channel. Share it on social media if possible. This will help me improve my reach.

[@mishanpatel9219]

Amazing video

[@extraordinary7660]

Thanks for the video. I love the way you explained it. Keep make video as good as this video. Maybe all triggers and transitions part 2 and many more hehehe

[@udayrajsathe]

Haha Sure 😄 Thanks for your support.

[@valereast7492]

THE BEST!!

[@AK-eg4ho]

in search of gold, i got diamond one.... thanks bro for this all type.. in one shot...🙌🤲❤

[@robertmnganya7533]

Stunning tutorial

[@udayrajsathe]

Thanks so much Robert 😊

[@koyuki0720]

It's really helped me a lot, really easy to understand. Thank you, sir!

[@udayrajsathe]

Glad to know this 😊 Thank you.

[@arunbchattar]

Since last 2 days I try to make two prototypes in one button but failed... then I saw this video and my problem is solved... It's really very helpful and in-depth tutorials... Big thums up from my side.

[@udayrajsathe]

Thanks Arun 😃

[@thenimadeorusmin6119]

Awesome tutorial dude!!! keep it going!! and thanks a lot!!!

[@udayrajsathe]

Thanks Ben 😀

[@cesarghful]

This is great, thanks for doing it man!

[@udayrajsathe]

Thanks Cesar 😎

[@mannn8337]

Great video!

[@udayrajsathe]

Thanks 😊

[@Bangalore-j7l]

hai sir can make a in detailed video of the coursel drag that was explained in 11:06..

[@udayrajsathe]

Noted

[@heyyaa9867]

Super informative! Thank you for making this tutorial

[@udayrajsathe]

Thanks. Keep watching 😄

[@jaquelinedamazio2911]

Help me a lot! Thanks!

[@gauravw7]

Realy useful video thank you, sir.

[@udayrajsathe]

Thanks Gaurav

[@vishnukumarancv7191]

Much useful !!

[@udayrajsathe]

Glad to hear that!

[@sonalijaiswal582]

thank you so much for this content

[@udayrajsathe]

Thank you :)

[@فاطمهمشتاقی-ه9ه]

u teach very nice👍👍👍 excellent man 😌😌

[@udayrajsathe]

Thanks :)

[@wwc2903]

The Best One!

[@udayrajsathe]

Thanks :D

[@user-sd1ln9ro9z]

great class!

[@udayrajsathe]

Thank you 😃

[@amitgokhe]

its very knowledgeable tutorials, thanks

[@udayrajsathe]

Thank you so much Amit 😃

[@monicada8650]

thankyou so much! this video is very helpful

[@udayrajsathe]

Thanks Monica 😄 Stay tuned for Interactive components tutorial which is coming on Sunday ☺️

[@shanimatityhu4938]

soo great ! very good videos

[@udayrajsathe]

Thanks a lot 😄

[@OzbegimMarketing]

Thanks a lot brither!

[@udayrajsathe]

🤘

[@creativedesignstudio-ankita]

amazing video

[@udayrajsathe]

Hey, thanks Ankita 😃

[@The_Bobber_Men]

Best tutorial👌

[@udayrajsathe]

Glad it helped 😄

[@HardiRiddhi]

Heyy, I am not able to do overlay at 7:42. Can you please help me?

[@udayrajsathe]

Sure. Connect with me on Instagram. I'm more active there. Or share a sample file with me with edit access on [e-mail]

[@MeAdhir]

Congrats on 10k view...

[@udayrajsathe]

Thanks for your support, Adhir 🥳

[@minalmukarande]

Can make two interactions in one frame for eg. Onclick Overlay and onclick navigation to other frame

[@udayrajsathe]

We can add 2 interactions on one frame. howevery we should avoid 2 conflicting ones together such as Overlay and navigate to other frame. Okay to add Drag and on click together.

[@unstoppable-me653]

Ooosssssuuummmm.... thanks 👌😊

[@udayrajsathe]

✌😀

[@DugguKiMastiKiPathsala]

Hi udayraj I learn lots about figma from your videos, plz make more videos on advanced prototype also

[@udayrajsathe]

Thanks Rahul. I want to create more videos on prototyping but struggling to find free time right now. You can connect with me on LinkedIn in case you’re stuck anywhere. I’ll be happy to assist you 😊

[@DugguKiMastiKiPathsala]

@@udayrajsathe hi udayraj thank for your response, I need your help for component prototype topic, I don't know why component prototype doesn't work in my projects plz give suggestions I tried 100 times but it's doesn't work and I have been already watched your component prototype video then after it's doesn't work what should I do???

[@udayrajsathe]

Have you signed up as beta tester and got approved? If yes, then you should be able to use Interactive Components. Please ping me on LinkedIn. I’ll be happy to assist you further 🤟🏽

[@DugguKiMastiKiPathsala]

@@udayrajsathe my beta tester approval is still pending maybe this the reason which component prototype doesn't work, thank you so much for your quick response udayraj I will be hope you will solve other problems in future also in taking time out from your busy time and definitely I will ping you on LinkedIn 🙂🙏🙏🙏

[@udayrajsathe]

Of course 🤟🏽😎

[@klaycoco]

thank you!

[@udayrajsathe]

😃

[@RANI2408]

hi. couldn't understand the horizontal and vertical scrolling @15.00. new to figma, were you having components/ elements additional to the screen ?

[@trangpham7510]

Hi, I tried redo the drag effect, but in addition to dragging left and right, my screen can also drag up and down. Objects are not fixed on a horizontal row like your product. What is the error please? Thanks very much

[@udayrajsathe]

Sorry for late reply. Is your problem resolved already? If not, please connect with me on Linkedin or Insta. I would love to help.

[@Akshayasare]

My overlay is not showing the elements of the actual frame in the prototype. How do I fix this error.

[@udayrajsathe]

I need to see your file to tell the problem. Please share it to [e-mail] if its not already solved.

[@lautarosimoncini1230]

What font is that 0:56? I fall in love

[@udayrajsathe]

Its *'Futura Bold'* . Its my favourite font too. High Five 👋

[@centrophorous4353]

How can we make a drag gesture for back in artboards/frame as whole?

[@udayrajsathe]

You can try this > Select outermost frame and use Drag trigger.

[@rinalia4366]

Your tutorials are great, I'm beginner on figma. How we make snap scroll with indicators? I tried by duplicate the frame and used push transition. Unfortunately, my frame had 4 carousell when I scroll the first carousell the other carousell are scrolling too.

[@udayrajsathe]

Thanks Rina for kind words 😀 About Snap Scroll, can you share a link to your Figma file or its duplicate? I'll be able to give better recommendation.

[@rinalia4366]

@@udayrajsathe Here is the link of my Figma, www.figma.com/file/0S6BNhny81kCFyK6KcTdEK/Snap-Scroll?node-id=0%3A1 I added question there. Thanks for your help

[@udayrajsathe]

Hi Rina, I have added a solution to your file. I hope that helps. Let me know if you have any questions. Btw, your design reminded me of my Memorable Bali vacation 😀(Just before the pandemic)

[@rinalia4366]

@@udayrajsathe Hi, Bali is a wonderful place to vacation. I already read the solution that u gave me, but I still want to know how to make a snap scroll for every carousel in my project. It is possible in Figma? I already tried to use drag triggers for every carousel but the problem is if I swipe the first carousel, the other carousel is getting swipe too. Can you tell me how to do it with many drag trigger? Is it possible?😁 Thank you

[@Innercircle-ent]

Hello @udayraj sathe , pls do you have a one on one tutorial class for design..I want to be more intentional in my design..and I am willing to pay to learn directly from you

[@udayrajsathe]

I have a newborn at home. So not doing 1:1 classes right now. We can stay connected on Insta :)

[@sahitanambiar]

Hi Udayraj, I tried the drag and Swipe one, but the animation didn't turn out as you have shown. I am unable to understand what I am doing wrong. What could be the possible challenges? Awaiting your suggestion

[@udayrajsathe]

Please connect with me on LinkedIn or Insta. Would be happy to assist you 😊

[@sahitanambiar]

Basically, I am not able to hold and drag

[@udayrajsathe]

can you share a file(view access) on [e-mail]? I can have a look

[@sahitanambiar]

@@udayrajsathe Hey, I managed to solve it on my own. Layers were not proper. Thank you for asking. 🙂

[@udayrajsathe]

Awesome 👏🏼 😎

[@codewithbagus]

could u tell me the tittle of backsound in this video pls

[@udayrajsathe]

Its 'A New Orleans Crawfish Boil' track from KZbin Audio Library

[@unstoppable-me653]

Hello Udayraj, I liked your tutorial very much. It would be great if you can answer to my query. When I made prototype for swiping or dragging cards by using your method from this video, the transition was not very smooth. Other elements were also moving without giving any effect to them e.g. top left menu icon on mobile screen slide in from below while swiping cards. I have faced this issue many times, if you know the solution please let me know.

[@udayrajsathe]

Hi Pramodini, That might happen because of layer positioning. Can you share your file or Duplicate and share with me with Edit access? My id is [e-mail]

[@udayrajsathe]

Did you check the edited version? Let me know if it helped.

[@urmidas2704]

I have been trying to prototype multiple selection list and some changes happen when you select the list. Can you tell me how to do that?

[@udayrajsathe]

Sure I would like to help. Can you tell me exact scenario you're trying to create?

[@urmidas2704]

I have messaged my frames to you in instagram

[@rashankr9277]

Can u please provide a social media id of yours.. I want to attach a jpg.. When i am prrsenting in prototype mode.. View is like a scattered one.. It also comes in your provided practice file

[@udayrajsathe]

It's a known bug. I hope Figma fixes that soon 🤞🏽

[@kaitaviolin]

I can't thank you enough.

[@udayrajsathe]

Thank you so much 😊

[@ajayji1009]

Hi Uday, can you please make a tutorial on Tabs like we use overlay on mouse over? Thanks

[@udayrajsathe]

Sure. Can you share a link to specific example?

[@ajayji1009]

There is no specific example. I have seen in your tutorial the mouse over effect in menu. So, I tried same way for tabs(with 2 tabs only). Done that successfully but the selected tab color is the issue. You make any at your end for tab so that we can select any tab and the content appear accordingly :)

[@daryllee2560]

Hey Udayraj......Nice work here to follow. May I ask a quick question of you about Smart Animate - Q: Are Devs able to follow and replicate the smart Animate animations (as I don't think Figma Codes this stuff yet for them?).....thanks: Daryl

[@Hangout-HQ]

Thanks

[@udayrajsathe]

You're welcome!

[@mahnoortahir1389]

added two triggers to the same card is not working. Moving forward but not backward

[@udayrajsathe]

May be 2nd Trigger (backward movement) is not set to Drag Trigger. Please check and let me know. You can connect with me on Instagram to discuss more, if needed.

[@sejalyeola7532]

Heyyy i got some problems with figma can you help me

[@udayrajsathe]

Sure Sejal. Please connect with me on LinkedIn

[@playpiano2264]

3k♥️🔥💯🎉

[@udayrajsathe]

OMG really 🤩 I just saw that 🎂🎂🎂 Thanks for all the support 🤠

[@RaghadMahmoud-v8v]

انت رائع

[@extraordinary7660]

hope i can like again after rewatching hehhehe

[@udayrajsathe]

😇😆

[@فاطمهمشتاقی-ه9ه]

but please explain in to details.

[@udayrajsathe]

Noted

[@Brandingbymel]

😭who knows how i can like this video 77 times

[@dlanigerr]

Fail

[@udayrajsathe]

Fail?

[@stylegoondasgoondas8961]

VERY CONFUSING NO DETAILING PROPERLY AT ALL

[@udayrajsathe]

I'll try to improve it next time

[@techdude2121]

Nonsense tutorial

[@udayrajsathe]

What do you think can be improved?