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

Поділитися
Вставка
  • Опубліковано 16 січ 2025

КОМЕНТАРІ • 183

  • @udayrajsathe
    @udayrajsathe  4 роки тому +8

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

  • @arshitvaghasiya7317
    @arshitvaghasiya7317 3 роки тому +9

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +2

      Your comment made my day :) Thanks.

    • @jacquesroux7069
      @jacquesroux7069 2 роки тому

      @@udayrajsathe GREATEST TUTORIAL after 2 weeks or learning

  • @ajaym6795
    @ajaym6795 3 роки тому +8

    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
      @udayrajsathe  3 роки тому

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

  • @biru9816
    @biru9816 3 роки тому +2

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

  • @madebysinatra
    @madebysinatra 4 роки тому +5

    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
      @udayrajsathe  4 роки тому

      Wow, thank you! 😎
      Mission Accomplished 🤘

  • @JR-gh8lp
    @JR-gh8lp 4 роки тому +3

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

    • @udayrajsathe
      @udayrajsathe  4 роки тому

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

  • @katdale-b2d
    @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!!!

  • @ramazanguler6066
    @ramazanguler6066 2 роки тому +1

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

  • @rethikrock8544
    @rethikrock8544 3 роки тому +1

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

  • @negines5004
    @negines5004 2 роки тому

    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.

  • @JidePlush
    @JidePlush 3 роки тому

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

  • @davidmarchuk9553
    @davidmarchuk9553 3 роки тому +1

    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
      @udayrajsathe  3 роки тому

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

  • @kishorekumarseenivasan
    @kishorekumarseenivasan Рік тому

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

  • @emy9272
    @emy9272 2 роки тому

    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!

  • @ErumEhmad20
    @ErumEhmad20 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Thanks Erum 😊
      Happy to know that it helped.

  • @angienatalia8770
    @angienatalia8770 3 роки тому +3

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

  • @omerbulbul7275
    @omerbulbul7275 2 роки тому

    Sharing your practice file was very helpful. Thank you

  • @RealMehedi
    @RealMehedi 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

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

    • @RealMehedi
      @RealMehedi 3 роки тому

      @@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...

  • @MuhammadKamran01
    @MuhammadKamran01 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Glad to know that you found it helpful :)

  • @LilyBrand12345
    @LilyBrand12345 4 роки тому +2

    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
      @udayrajsathe  4 роки тому

      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✌

  • @Puleczech
    @Puleczech 3 роки тому

    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
      @udayrajsathe  3 роки тому +1

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

  • @ravikanthbuddiga5146
    @ravikanthbuddiga5146 3 роки тому

    Some of the best tutorials for Figma!

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

    • @ravikanthbuddiga5146
      @ravikanthbuddiga5146 3 роки тому +1

      @@udayrajsathe Sure will do

  • @imca-b-10rajwanijatishmano4

    Thank you so much! Amazing examples💯

  • @omkarghodke9472
    @omkarghodke9472 3 роки тому +1

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

  • @siddharthtrivedi3322
    @siddharthtrivedi3322 Рік тому

    Really good and professional video content :)

  • @hugocsl
    @hugocsl 4 роки тому +2

    Dude you rock! Thanks from Brazil!

  • @dikhyantkrishnadalai6422
    @dikhyantkrishnadalai6422 3 роки тому

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

  • @nhunqn2001
    @nhunqn2001 2 роки тому

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

  • @vincequach.55
    @vincequach.55 3 роки тому

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

  • @robertmnganya7533
    @robertmnganya7533 3 роки тому

    Stunning tutorial

  • @jaymcd8577
    @jaymcd8577 Рік тому

    This was great, thank you

  • @chandralekha1231
    @chandralekha1231 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

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

  • @michaelng1990
    @michaelng1990 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

  • @Bangalore-j7l
    @Bangalore-j7l 2 роки тому +1

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

  • @jaquelinedamazio2911
    @jaquelinedamazio2911 2 роки тому

    Help me a lot! Thanks!

  • @fikrikun736
    @fikrikun736 4 роки тому

    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
      @udayrajsathe  4 роки тому

      Can't express how grateful I am ❤️

  • @thenimadeorusmin6119
    @thenimadeorusmin6119 4 роки тому

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

  • @cesarghful
    @cesarghful 3 роки тому

    This is great, thanks for doing it man!

  • @فاطمهمشتاقی-ه9ه
    @فاطمهمشتاقی-ه9ه 3 роки тому

    u teach very nice👍👍👍
    excellent man 😌😌

  • @koyuki0720
    @koyuki0720 3 роки тому

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

  • @sonalijaiswal582
    @sonalijaiswal582 3 роки тому

    thank you so much for this content

  • @heyyaa9867
    @heyyaa9867 3 роки тому

    Super informative! Thank you for making this tutorial

  • @gauravw7
    @gauravw7 3 роки тому

    Realy useful video thank you, sir.

  • @naitikkathiriya
    @naitikkathiriya 3 роки тому +1

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      Delighted to know that you liked it 🥳

  • @The_Bobber_Men
    @The_Bobber_Men 4 роки тому

    Best tutorial👌

  • @extraordinary7660
    @extraordinary7660 4 роки тому

    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
      @udayrajsathe  4 роки тому

      Haha Sure 😄 Thanks for your support.

  • @monicada8650
    @monicada8650 3 роки тому

    thankyou so much! this video is very helpful

    • @udayrajsathe
      @udayrajsathe  3 роки тому

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

  • @klaycoco
    @klaycoco 3 роки тому

    thank you!

  • @valereast7492
    @valereast7492 Рік тому

    THE BEST!!

  • @amitgokhe
    @amitgokhe 4 роки тому

    its very knowledgeable tutorials, thanks

  • @mishanpatel9219
    @mishanpatel9219 2 роки тому

    Amazing video

  • @sadektuts9088
    @sadektuts9088 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

  • @mannn8337
    @mannn8337 3 роки тому

    Great video!

  • @unstoppable-me653
    @unstoppable-me653 4 роки тому

    Ooosssssuuummmm.... thanks 👌😊

  • @vishnukumarancv7191
    @vishnukumarancv7191 3 роки тому

    Much useful !!

  • @OzbegimMarketing
    @OzbegimMarketing 3 роки тому

    Thanks a lot brither!

  • @wwc2903
    @wwc2903 3 роки тому

    The Best One!

  • @shanimatityhu4938
    @shanimatityhu4938 4 роки тому

    soo great ! very good videos

  • @Hangout-HQ
    @Hangout-HQ 3 роки тому

    Thanks

  • @arunbchattar
    @arunbchattar 3 роки тому

    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.

  • @user-sd1ln9ro9z
    @user-sd1ln9ro9z 3 роки тому

    great class!

  • @creativedesignstudio-ankita
    @creativedesignstudio-ankita 3 роки тому

    amazing video

  • @AK-eg4ho
    @AK-eg4ho Рік тому

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

  • @kaitaviolin
    @kaitaviolin 3 роки тому

    I can't thank you enough.

  • @lautarosimoncini1230
    @lautarosimoncini1230 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

  • @minalmukarande
    @minalmukarande 2 роки тому

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

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      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.

  • @RaghadMahmoud-v8v
    @RaghadMahmoud-v8v 3 місяці тому

    انت رائع

  • @rahulshrm857
    @rahulshrm857 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      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 😊

    • @rahulshrm857
      @rahulshrm857 3 роки тому

      @@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
      @udayrajsathe  3 роки тому +1

      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 🤟🏽

    • @rahulshrm857
      @rahulshrm857 3 роки тому

      @@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
      @udayrajsathe  3 роки тому

      Of course 🤟🏽😎

  • @rinalia4366
    @rinalia4366 4 роки тому +1

    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
      @udayrajsathe  4 роки тому

      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
      @rinalia4366 4 роки тому

      @@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
      @udayrajsathe  4 роки тому +1

      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
      @rinalia4366 4 роки тому

      @@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

  • @daryllee2560
    @daryllee2560 2 роки тому

    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

  • @MeAdhir
    @MeAdhir 3 роки тому

    Congrats on 10k view...

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Thanks for your support, Adhir 🥳

  • @ajayji1009
    @ajayji1009 4 роки тому

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

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      Sure. Can you share a link to specific example?

    • @ajayji1009
      @ajayji1009 4 роки тому

      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 :)

  • @Innercircle-ent
    @Innercircle-ent 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

  • @HardiRiddhi
    @HardiRiddhi 4 роки тому

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

    • @udayrajsathe
      @udayrajsathe  4 роки тому +1

      Sure. Connect with me on Instagram. I'm more active there. Or share a sample file with me with edit access on udayrajsathe@gmail.com

  • @centrophorous4353
    @centrophorous4353 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

  • @unstoppable-me653
    @unstoppable-me653 3 роки тому

    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
      @udayrajsathe  3 роки тому

      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 udayrajsathe@gmail.com

    • @udayrajsathe
      @udayrajsathe  3 роки тому

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

  • @Akshayasare
    @Akshayasare 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      I need to see your file to tell the problem.
      Please share it to udayrajsathe@gmail.com if its not already solved.

  • @playpiano2264
    @playpiano2264 3 роки тому

    3k♥️🔥💯🎉

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

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

  • @codewithbagus
    @codewithbagus 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Its 'A New Orleans Crawfish Boil' track from UA-cam Audio Library

  • @RANI2408
    @RANI2408 Рік тому

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

  • @urmidas2704
    @urmidas2704 4 роки тому

    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
      @udayrajsathe  4 роки тому

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

    • @urmidas2704
      @urmidas2704 4 роки тому +1

      I have messaged my frames to you in instagram

  • @sahitanambiar
    @sahitanambiar 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

    • @sahitanambiar
      @sahitanambiar 3 роки тому

      Basically, I am not able to hold and drag

    • @udayrajsathe
      @udayrajsathe  3 роки тому +1

      can you share a file(view access) on udayrajsathe@gmail.com? I can have a look

    • @sahitanambiar
      @sahitanambiar 3 роки тому

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

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Awesome 👏🏼 😎

  • @mahnoortahir1389
    @mahnoortahir1389 4 роки тому

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

    • @udayrajsathe
      @udayrajsathe  4 роки тому

      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.

  • @trangpham7510
    @trangpham7510 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

  • @sejalyeola7532
    @sejalyeola7532 3 роки тому

    Heyyy i got some problems with figma can you help me

    • @udayrajsathe
      @udayrajsathe  3 роки тому

      Sure Sejal. Please connect with me on LinkedIn

  • @extraordinary7660
    @extraordinary7660 3 роки тому

    hope i can like again after rewatching hehhehe

  • @rashankr9277
    @rashankr9277 3 роки тому

    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
      @udayrajsathe  3 роки тому

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

  • @فاطمهمشتاقی-ه9ه
    @فاطمهمشتاقی-ه9ه 3 роки тому +1

    but please explain in to details.

  • @Brandingbymel
    @Brandingbymel 2 роки тому

    😭who knows how i can like this video 77 times

  • @dlanigerr
    @dlanigerr 3 роки тому

    Fail

  • @stylegoondasgoondas8961
    @stylegoondasgoondas8961 2 роки тому

    VERY CONFUSING NO DETAILING PROPERLY AT ALL

  • @techdude2121
    @techdude2121 2 роки тому

    Nonsense tutorial

    • @udayrajsathe
      @udayrajsathe  2 роки тому

      What do you think can be improved?