Figma PROTOTYPE with VARIABLES | Config 2023 update | Design tokens tutorial | Variable prototyping

Поделиться
HTML-код
  • Опубликовано: 15 ноя 2024

Комментарии • 73

  • @AnnaDoesDesign
    @AnnaDoesDesign Год назад

    Wow I was able to make something I spent an hour trying to figure out because of how clear your video was. Thank you.

    • @TDSunshine
      @TDSunshine  Год назад

      Aww yay! Great to hear!☀️☀️

  • @kamilwaszewski
    @kamilwaszewski Год назад +1

    Super clear and nice that you share this figma file to follow along :)

  • @Rozmaring_Rozi
    @Rozmaring_Rozi Год назад

    Thank you for your help. I like your enthusiasm too !! 🙂

  • @Rafael-dj-c
    @Rafael-dj-c Год назад

    Prototyping got deep, going to have to play around with this.

  • @kopongyu
    @kopongyu Год назад

    Super clear! Thanks for sharing the exercise file too :)

    • @TDSunshine
      @TDSunshine  Год назад

      Glad it was helpful! 🙏🏼☀️

  • @javeediqbal947
    @javeediqbal947 Год назад +1

    Thanks for telling about the conditional statement in the prototype section its awosome.

  • @simranshaikh1665
    @simranshaikh1665 Месяц назад

    Subscribed your channel and liked all videos worth it❤

    • @TDSunshine
      @TDSunshine  Месяц назад

      Thanks! ☀️🙏🏻💛

  • @Jadee2727
    @Jadee2727 Год назад +1

    Your explanation is so clear and fun to follow 😭😭 Thank you so much, please make more!!

    • @TDSunshine
      @TDSunshine  Год назад

      Thank you! Will do! ☀️💛

    • @altsider
      @altsider Год назад +2

      I would comment exactly the same haha so fun to see her seeing the results... same feelings when I get things right too 😂

    • @TDSunshine
      @TDSunshine  Год назад +1

      @@altsider There is nothing like getting something to work correctly! Especially with all the fancy conditionals now! feels like a logic puzzle 🧩☀

    • @altsider
      @altsider Год назад

      @@TDSunshine I agree with you. I got so excited when they release these new features but only now I have the chance to apply on a professional project 🚀

  • @marcuscustodio9338
    @marcuscustodio9338 Год назад

    Awsome tutorial, Thanks!

  • @EswarYogalingam
    @EswarYogalingam Год назад

    Enjoying!!!! great job!

  • @verenacb
    @verenacb Год назад

    Great job with your video! Learned all updates so fast and clearly. Thanks! Subscribed!

  • @learnlearner5524
    @learnlearner5524 Год назад

    you're great youtuber & entertaining! please keep it up!

  • @thearaav6670
    @thearaav6670 Год назад

    Love your tutorial, the explaination is clear, and easy for the basic practice.

    • @TDSunshine
      @TDSunshine  Год назад

      Happy to hear that! ☀️💛

  • @Charliebishop83
    @Charliebishop83 8 месяцев назад

    I really love your channel cuz it's super Figma-updated. I was testing what you were teaching on this video, but mixing the previous one and this one. I tried for hours (4h) to make the stock stop on zero, but did not work. I'm not sure if the reason is because I'm using multiple stock amounts (in different cards). Pls, lmk if I can send you an email or Ig message with the Figma link. Thank you!

    • @TDSunshine
      @TDSunshine  8 месяцев назад +1

      Hey Carlos! this will be a case of where you put the conditional. So try and pretend you are sort of stepping through your "prototype code" and check which action happens first. For example, if action 1 is to reduce the price and action 2 is IF (count>0) {count = count -1}. Then the count won't get below 0 but nothing is stopping the price from dipping below. Especially when working with multiple products at the same time you want to really work through the order in which your actions are executed.
      I hope that helps! ☀

    • @Charliebishop83
      @Charliebishop83 8 месяцев назад

      @@TDSunshine I made it!!! I didn't notice you nested the variable in the conditional. I must have been drained not to have watched that. Thank you so much for your time! 🙏🏻

  • @designeravinash
    @designeravinash Год назад +1

    Love from India ❤️
    Informative video

  • @julianTrichardson
    @julianTrichardson Год назад +1

    Im going to miss the good ol' ten thousand screen spiderweb prototype set up. 😅

    • @TDSunshine
      @TDSunshine  Год назад +1

      Haha I know right? 🤪 did you notice you can expand and collapse the actions on the little prototyping pop up too?? Saving even more space 🙌🏽

    • @julianTrichardson
      @julianTrichardson Год назад +1

      @@TDSunshine They've really outdone themselves with this update.

  • @MrVenkatganta
    @MrVenkatganta Год назад

    Really awesome. Thanks for the detailed video

  • @KarimMaassen
    @KarimMaassen Год назад

    Really nice explanation and already showcasing the big potential of this new feature. I'm sure some masterminds wil create entire games out of this.

  • @vuanhyoutube
    @vuanhyoutube Год назад

    amazing thank you so muchhhh

  • @ramazanguler6066
    @ramazanguler6066 Год назад

    best lesson and very funny , thank you

  • @Pibepan10
    @Pibepan10 Год назад

    super good explanation thanks u a lot

  • @designeranthony
    @designeranthony Год назад

    Your tutorial is so fun to follow along with. I'm still a bit confused, how do I use variables for something like input fields for example? Would love if you do a video like that..love

    • @TDSunshine
      @TDSunshine  Год назад +1

      Thanks! I have this short where I show how to mimic a working keyboard for an input field using variables- Create a working keyboard prototype in Figma using variables #figmadesign #figmatutorial #figma
      ruclips.net/user/shortsve4UvSGadaA?feature=share
      BUT I also have a video coming soon about how to use variables in prototyping to mimic filling out a whole form in a dynamic way 🤗☀️

    • @designeranthony
      @designeranthony Год назад

      This is kinda what I was looking for, thank you so much!@@TDSunshine I can't wait for the new video!

  • @michaelrussell7356
    @michaelrussell7356 Год назад

    Great video, very interested to try these new features out. Do you know if variables can be used for fonts and not just colours? I guess styles is the only way to do it at the moment

    • @TDSunshine
      @TDSunshine  Год назад

      Figma announced that Typography, images and other types of variables will be available in the next launch! So coming soon I guess! 🤞🏼☀️

  • @NamaraAllan
    @NamaraAllan Год назад

    Thank you for this clear tutorial.
    Is there a way to have characters behave in a similar way? Like A, B, C.... or C, B, A as in the case of music notes changing?

    • @TDSunshine
      @TDSunshine  Год назад

      Hey NamaraAllan! do you mean changing text by clicking on something?

    • @NamaraAllan
      @NamaraAllan Год назад

      @@TDSunshine Yes I mean Changing A to B by clicking something else like a "transpose" button

    • @TDSunshine
      @TDSunshine  Год назад

      @@NamaraAllan yes you could do that! you would need to set it up though, and because its not a mathematical operation it would be pretty manual. For example, create a component set where each variant is just the next letter up in a chromatic scale. (e.g c, c#, d, d#...) then if you call the different variants 1-12 and have a number variable choose which variant is the selected one then you can change that number variable after an interaction and therefore select a different note in that scale.

    • @NamaraAllan
      @NamaraAllan Год назад

      @@TDSunshineso manual but it is actually brilliant... thanx, I have tried it with the help of the video you shared yesterday(🙏🏽your personality is great, shines thru yo vidz)
      And if we introduced a capo for guitar, the math becomes complex...if u know how a capo works.(if capo is +1, the key goes back -1, regardless of the transpose number..)🤯🤯 am lost trying out this...

  • @kermitec
    @kermitec Год назад

    Think of a veriable as a container. It holds a value... can be a number or text. And Conditions are If/Then/Else ways of stringing together actions.

  • @areeshaafridi2697
    @areeshaafridi2697 5 месяцев назад +1

    So at 7:40 where the purple object is attached to the Boolean by clicking on the eye, I am not getting that option, clicking the eye hides it only. Might have been an update ? If you know how to connect that to the Boolean variable created, kindly let me know.

    • @TDSunshine
      @TDSunshine  5 месяцев назад

      Make sure you are right clicking and not normal clicking! I hope that helps ☀️🙏🏼

    • @areeshaafridi2697
      @areeshaafridi2697 5 месяцев назад

      @@TDSunshine Oh yes ! Thankyou.

  • @RekhaGottumukkala-b1d
    @RekhaGottumukkala-b1d Год назад +1

    While to add variables in prototyping, It was asking for payment? Is there any free version for Figma Variables? because of no mentioned payment method for Figma variables.
    Please anyone can answer for this.

    • @TDSunshine
      @TDSunshine  Год назад

      Variable prototyping isn’t available on the free Figma plan 😞 sorry …

  • @markjuderosel9164
    @markjuderosel9164 Год назад

    Please cover more about config figma updates. Your videos are amazing by the way! Subscribed for more.

  • @Mariana-zs4cr
    @Mariana-zs4cr Год назад

    Amazing explanation🤩🤩🤩 , the sad thing is Free Figma doesn't allow to add variables to prototype :(

    • @TDSunshine
      @TDSunshine  Год назад

      thanks! yeah, Figma's professional plan got a whole lot more useful with the addition of variables! You can try Figma's Professional Plan here if you want - bit.ly/FigmaProfessionalPlan

  • @lilou8711
    @lilou8711 Год назад

    I watched it twice 😂 merci

  • @alexander_stark
    @alexander_stark Год назад

    Now I do prototype my website. I have qiuiz ... Just tryed zip screens from 12 to 1 with varibels... I can't ... Figma now can't chage inputs ... or I -noob 😢

    • @TDSunshine
      @TDSunshine  Год назад

      Variables are still in beta so there are still some bugs now and again. Hopefully you found a way around this ☀️🤗

  • @rjabrm
    @rjabrm Год назад

    not working