Figma variables - Personalised journey | Variable onboarding flow | Variables for personalization

Sdílet
Vložit
  • čas přidán 5. 08. 2024
  • 🚨Follow along with this Figma file - www.figma.com/community/file/...
    ☆ Try Figma's Professional Plan - bit.ly/TDProFigma
    ☆ Try Figma For Free - psxid.figma.com/xnd9l
    💛 Thanks for watching, Tair 💛
    🍿 WHAT TO WATCH NEXT :
    1. Auto Layout | Config Update - • Figma AUTO LAYOUT UPDA...
    2. Variable Modes | Config Updates - • Figma VARIABLE MODES |...
    3. Prototyping updates 2023 - Sticky Scrolling - • 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:19 Preference buttons
    02:40 Creating Variables
    03:28 Connect Variable to Variant
    04:15 Personalise the journey
    06:02 Preference Editing
    07:28 Up next...
    🤗 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 #figmaupdate #config #config2023 #figma2023 #designtokens #tokens #variables
  • Jak na to + styl

Komentáře • 36

  • @amnaniaz7182
    @amnaniaz7182 Před 2 měsíci

    Clean,clear and precise. couldn't learn more from anywhere else. keep posting more please. Thank you!

  • @baazigar5
    @baazigar5 Před 7 měsíci

    Great tutorial! Thank you Sunshine 🌻

    • @TDSunshine
      @TDSunshine  Před 7 měsíci

      Glad it was helpful! ☀️💛

  • @AntanasGeguzinskas
    @AntanasGeguzinskas Před 7 měsíci +1

    Amazing :)🎉

  • @platinoir
    @platinoir Před 7 měsíci +1

    Amazing Stuff as always, quite educational and simple to follow
    crazy how variables feature changed the way UI/UX design is done
    these kind of interactions were a more of a fantasy like a couple of years ago

    • @TDSunshine
      @TDSunshine  Před 7 měsíci +1

      Thanks! Yeah I feel like variables allow designers to put a developer hat on and really play around with complex logic! So fun 🤩☀️

  • @JamesTenniswood
    @JamesTenniswood Před 3 měsíci

    So powerful, thanks for sharing

    • @TDSunshine
      @TDSunshine  Před 3 měsíci

      You're welcome! ☀️💛🙏🏻

  • @iamsohan90
    @iamsohan90 Před 5 měsíci

    Wonderful lesson for all types of beginner's.
    Thanks a lot❤

  • @designyar
    @designyar Před 7 měsíci

    That was amazing method, thank you ❤

    • @TDSunshine
      @TDSunshine  Před 7 měsíci

      Glad it was helpful! ☀️💛🙏🏼

  • @sendd1555
    @sendd1555 Před 7 měsíci +1

    Thank you!

  • @williamvargas4179
    @williamvargas4179 Před 3 měsíci

    Amazing teaching style and thanks for the figma file for practice, really appreciate it👏

    • @TDSunshine
      @TDSunshine  Před 3 měsíci

      Aww thanks! You’re welcome 🙏🏼💛☀️

  • @hajnihercz
    @hajnihercz Před 7 měsíci

    This is such a useful video, thanks a lot! You explained everything in a very straightforward way :)

    • @TDSunshine
      @TDSunshine  Před 7 měsíci

      You're very welcome! glad it was helpful! ☀️💛🙏🏻

  • @atharnadeem6947
    @atharnadeem6947 Před 7 měsíci

    I wish I would have found your channel earlier. Thanks, I learned a lot from you.

    • @TDSunshine
      @TDSunshine  Před 7 měsíci

      Happy to help! ☀️🙏🏻

  • @alexander_stark
    @alexander_stark Před 7 měsíci

    mmm.... nice:)

  • @inka7961
    @inka7961 Před 2 měsíci +1

    How can developers see primitive variables in the Dev mode while they scan the element? For example, instead of seeing var(--border-primary-light), they would also see the primitive variable it references, such as var(--color-primary-50)?

    • @TDSunshine
      @TDSunshine  Před 2 měsíci

      Great question! Just had a look and I can't see it I think they can only see the variable itself right now. But I might be missing something! worth checking on Figma community posts! ☀️🙏🏻

  • @pauljessee8611
    @pauljessee8611 Před 6 měsíci

    Thanks for the video! Super helpful. Is there a way to have the button disabled until they select an option? That way they don't end up at an empty screen? This is similar to my other question that I asked on another video of yours.

    • @TDSunshine
      @TDSunshine  Před 6 měsíci

      You’ve inspired my next video with all these variable question! Doing a whole video about different ways of connecting variables and variants 🙏🏼☀️

  • @KuldeepSingh047
    @KuldeepSingh047 Před 4 měsíci

    Love the video! Super helpful stuff. But one thing, can we make the 'Next' button only show up after we select at least 3 preference buttons?

    • @TDSunshine
      @TDSunshine  Před 4 měsíci

      Thanks! yeah sure! You can do it for sure yo just need to figure out the right combination of variables to help you achieve it. I hope that helps! 🙏🏻☀️💛

  • @levonarmenian
    @levonarmenian Před 7 měsíci

    Love this ! What happens when the user clicks on search on the empty Sunshine Recipes page ?

    • @TDSunshine
      @TDSunshine  Před 7 měsíci

      Great question! I guess if I were to develop this flow further I would have some sort of "no results found" message if there are no recipes. ☀️

  • @sophiemulders
    @sophiemulders Před 4 měsíci

    Which order should i watch, i come from XD , old school 😂 and variables , components i know what they are but still confuse me… i am switching to figma :) 😅

    • @TDSunshine
      @TDSunshine  Před 4 měsíci +1

      be prepared to have your mind blown! haha once you go Figma you can't go back though so beware 🤪 I have this Figma "crash course" that can be a god place to start - *Figma beginner crash course 2024* - czcams.com/video/OtOXEKKScg4/video.html
      If you want to start with variables though I have a whole playlist about them! - czcams.com/play/PLx-zZQ15gdAqkqvLTj9SlEmjcYrWDj_pI.html ☀️🙏🏻

  • @ahmedyarkhan7006
    @ahmedyarkhan7006 Před 2 měsíci

    Can you do how search functionality work and removing words in keyboard

    • @TDSunshine
      @TDSunshine  Před měsícem

      oo nice idea! Thanks! ☀️🙏🏻