Advanced Prototyping in Figma: Realistic App Design | Smart animate, Variant interaction

Тәжірибелік нұсқаулар және стиль

🚨 Duplicate the exercise file to follow along - www.figma.com/community/file/...
➸ Sign up for a free Figma account - tinyurl.com/TDSunshineFreeFigma
➸ Sign up for a Professional Figma plan - tinyurl.com/ProfessionalFigma
☼ In this video you'll learn how to create realistic prototypes using Figma's powerful tools, including transitions, overlays, and animations. We'll cover the basics of Figma prototyping and then move on to more advanced techniques, such as adding hover effects, creating a navigation menu, and using smart animate.
💛 Thanks for watching, Tair 💛
🍿 WHAT TO WATCH NEXT :
1. Figma Compontets - • Figma Components | Mas...
2. Figma Auto Layout - • Figma Auto Layout | Ma...
3. Prototyping updates 2023 - • Figma's NEW Prototypin...
👋🏼 IF YOU ARE NEW HERE :
Hey, it's Tair! 😃
Thanks for tuning in and watching my video! If you enjoyed it and learned something new, don't forget to hit that subscribe button and the like button as well 👍🏼.
I'd love to hear your ideas and suggestions for my next video, so feel free to drop a comment below. Your support means a lot and it helps me keep the channel going and growing!
👾 MY GEAR :
Blue Yeti Microphone amzn.to/3qACorF
Tripod ring light amzn.to/43G7flv
Neon sign amzn.to/3NcwxAs
Fairy lights amzn.to/443l518
🌼 CHAPTERS :
00:00 Intro
00:18 Variant Interaction #1 - Form
04:06 Variant Interaction #2 - Navigation Hover State
06:44 Important Tip
08:40 Smart Animate #1 - Progress Bar
13:44 Smart Animate #2 - User Action Feedback
16:52 Stateful Prototyping
19:55 Summary
🤗 Disclosure: This video and description may contain affiliate links, meaning I'll receive a small commission if you click on one of the product links. I'm also an Amazon Associates affiliate and will earn a commission on qualifying purchases. This is at no additional cost to you.
#figmatutorial #figmadesign #figma_tutorial #figmatutorial #figmatips #figma #prototype #prototyping #smartanimate

Пікірлер: 24

  • @atxmaps
    @atxmaps3 ай бұрын

    I'm glad I found this channel when I'm learning Figma and I understand you do design and this is a side gig. But you are an excellent broadcaster. You're delivery is so easy to follow. You should be doing tutorial videos on other stuff I need to learn. I'll send you a list. 🤣

  • @TDSunshine

    @TDSunshine

    3 ай бұрын

    haha thanks! ☀️🙏🏻💛

  • @RinkeshBist
    @RinkeshBist2 ай бұрын

    Thank you Tair! This was insightful for an intermediate prototyper like myself. Especially the last one (section part!) Looking forward to more such amazing content. ✨

  • @TDSunshine

    @TDSunshine

    2 ай бұрын

    thanks! I'm glad it helped! ☀️🙏🏻

  • @asda.dantas
    @asda.dantas3 ай бұрын

    Straight from Brazil, to tell you that you are wonderful, I am learning a lot and very quickly. Thank you very much!

  • @TDSunshine

    @TDSunshine

    3 ай бұрын

    Aww thanks! 💛🙏🏼☀️

  • @Nin1ta
    @Nin1ta4 ай бұрын

    I love all your videos! They are so informative and everything but far from the waste of our time! Thank you for this! I learned lots of things from you and feel really grateful! ✨💘 Please make a video about mobile top/nav bars 💘

  • @TDSunshine

    @TDSunshine

    4 ай бұрын

    thanks! great idea, adding to my list ! ☀️🙏🏻💛

  • @user-hp7xi9xw8y
    @user-hp7xi9xw8y7 ай бұрын

    Good way to teach the logic, but the basic thing in UI is that radio buttons are always mutually exclusive, meaning they can only be chosen to select one option, according to familiarity concepts, & also, the that is how the development components will support the final product as well. I see a lot of amateur UI designers not being really familiar with the development languages just enough at least to know how the final product will be built. It is important in UX to understand the technical scopes inside which you should operate. To accommodate multiple choices, one should be using checkboxes as opposed to radio buttons.

  • @TDSunshine

    @TDSunshine

    7 ай бұрын

    Great points ☀️🙏🏼

  • @areeshaafridi2697

    @areeshaafridi2697

    2 ай бұрын

    Now how de we learn to design in accordance to a developer ? Say I am learning UI/UX myself at home, I cannot afford academies or bootcamps. How would I know the technical scopes inside which to operate ?

  • @areeshaafridi2697
    @areeshaafridi26972 ай бұрын

    I am currently going through all your videos to learn Figma like a baby, that's simply how you teach (forever thankful) Learned so much from you

  • @TDSunshine

    @TDSunshine

    2 ай бұрын

    aww thank you! and good luck on your new career journey! ☀️🙏🏻

  • @vibewithmk1730
    @vibewithmk1730 Жыл бұрын

    Thank you TD sunshine, got yourself a new follower. Love from Nigeria.

  • @TDSunshine

    @TDSunshine

    Жыл бұрын

    Thanks MK! Welcome to the channel ☀️☀️

  • @germanchoy
    @germanchoy Жыл бұрын

    Great video, want to see more similar video with trick apply

  • @thearaav6670
    @thearaav6670 Жыл бұрын

    I Comeback to see your old. It is practicable and clear and slowly explaining. Anyway love all your tutorial.

  • @TDSunshine

    @TDSunshine

    Жыл бұрын

    ☀️🙏🏼

  • @easyprogramminglessons2943
    @easyprogramminglessons294311 ай бұрын

    I watched your video. Thanks

  • @TDSunshine

    @TDSunshine

    11 ай бұрын

    🙏🏻☀️

  • @easyprogramminglessons2943
    @easyprogramminglessons294311 ай бұрын

    Figma is an interesting topic. More than web developing Im interested in web designing. You need JavaScript knowledge to develop even a simple website but designing doesn't require codes.

  • @td7367
    @td73678 ай бұрын

    Hi @TD Sunshine :) I try to create the red underline under the text at 04:49 , but when I try to set the line to ''fill container'' , the option doesn't appear anymore. Any suggestions to overcome that? I know I can just select the underline option from the text panel, but then I wouldn't be able to choose different colours for text and underline..

  • @TDSunshine

    @TDSunshine

    8 ай бұрын

    Hey! Make sure to put the label text and the line in an auto layout together, you should have the "fill container" option once you have done that 🤗 If you are in an auto layout and it's still not showing, then double-check that you do not have "absolute position" selected for the line (It's the little button after the X and the Y). Hope that helps! ☀️

  • @td7367

    @td7367

    8 ай бұрын

    It did help. Thank you!@@TDSunshine

Келесі