An Introduction to Figma Variables, Conditional Logic, and Prototyping

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

КОМЕНТАРІ • 44

  • @samreynolds5694
    @samreynolds5694 Рік тому +1

    Super helpful video. I can see that Figma prototyping really has it's roots in coding. Initially it seems more cumbersome than say Axure, but the reusable nature of the variables could be powerful. Practice makes perfect. Thanks.👍

  • @fryonthemoon
    @fryonthemoon 11 місяців тому +1

    Clear explanation, thanks!

    • @UICollectiveDesign
      @UICollectiveDesign  11 місяців тому

      Glad it helped :) Please subscribe and share our channel :)

    • @fryonthemoon
      @fryonthemoon 10 місяців тому +1

      @@UICollectiveDesign already done. You got one more subscriber from my end 🙂

  • @tochidioka6019
    @tochidioka6019 Рік тому +1

    This was really well explained... thank you

  • @al-aminademola980
    @al-aminademola980 Рік тому +1

    Awesome tutorial. I think you can add multiple set variables to one condition to have a cleaner prototype.

    • @UICollectiveDesign
      @UICollectiveDesign  Рік тому +1

      Thank you! Agreed - We did in our advanced lesson. Be sure to check it out!

  • @mallenkb
    @mallenkb Рік тому +2

    I love this, great video. I learnt a lot

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

      Glad it helped! We have more training videos available at www.uicollective.co/

  • @GraveRave
    @GraveRave Рік тому +1

    This is very good!

  • @milanjoseph344
    @milanjoseph344 Рік тому +1

    This was an amazing one.. Thank you 🙌🏻

  • @exgeeinteractive
    @exgeeinteractive Рік тому +2

    The hover state actually happens inside the component, not on the page itself. You can basically create 10 hover effects in a single button hover just by using interactions, delays, and more nested components.

    • @UICollectiveDesign
      @UICollectiveDesign  Рік тому +1

      Yup - Just ignore that part of the video. It was mentioned at Config, and in their training videos, hence why I thought it was new. Thanks for the tip, though!

  • @edwche
    @edwche Рік тому +1

    Thank you for sharing it!

  • @Eric-sy3dm
    @Eric-sy3dm Рік тому +1

    Nice content. I learned a lot.

  • @jonathanbaker-bates4692
    @jonathanbaker-bates4692 Рік тому +1

    Interesting to compare Figma's approach to this to other tools like iRise, Protopie and Axure. So with Figma you have to create variables for all the things up font ("declaring" them if you like) then attach them to the things that you want to change. I suppose that makes sense for some things, but equally you can't just directly reference properties of objects (like strings, size or visibility) on the canvas from actions you assign (eg on click, change [textObject] to "hello" - no variables involved)

  • @jsonastar3677
    @jsonastar3677 8 днів тому +1

    I didn't know about variables at all until now...

  • @another.designer
    @another.designer 10 місяців тому +1

    Wait, what happened when you change room to rooms I didn't get it?

  • @AngelinaStraka
    @AngelinaStraka Рік тому +1

    Great tutorial but I dont get how to change back the disabled state of the button, when removing a room after hitting the max of 6ths rooms added (also the other way round how to change the disabled state back from the remove button after again adding a room)

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

      I have the same question. Thanks in advance for the answer.

  • @Underhills
    @Underhills Рік тому +1

    Thanks for sharing. The new features are over engineered and quirky at best - but I guess we all just have to accept that and hope the Adobe takeover will introduce some improved UX. Ironically Figma likes to portrait themselves as an UX tool 🤣

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

      Agreed!

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

      The Adobe taker looks dubious at this point. Also, never in my life have I said, "Since the takeover, such and such software has been much better." 😉 We shall see.@@UICollectiveDesign

  • @jaydee-222
    @jaydee-222 Рік тому +2

    the button hover thing isn't new - it has been that way for quite a while.

    • @UICollectiveDesign
      @UICollectiveDesign  Рік тому +1

      Thanks for the heads up! It was mentioned at Config, and in their training videos, hence why I thought it was new.

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

      yeah old hat

  • @DeepfriedBaby
    @DeepfriedBaby Рік тому +1

    Figma really opened up a hornets nest (or pandora's box?) with this update.

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

      It is surprising they did not include type variables from the beginning

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

    Its fun, but i think as a designer we are not meant to do all this work to explain our designs and how it works, maybe showing 2 clicks and the results so the dev can understand or maybe while presenting our design prototype thats would be helpfull.
    Because i feel like i have to switch from design to maths, good to understand but its not necessary to master.
    Thank you

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

      When working with more senior stakeholders, or even users, they will need a broader picture. Sure, those who are technical can have an idea, but it's sometimes difficult for those working outside the product to visualize the small details.

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

    what a waste of time with these vars .. designers dont need to do this. this is for devs.

    • @UICollectiveDesign
      @UICollectiveDesign  Рік тому +2

      I actually disagree. These are a direct result of Tokens which is a lifesaver for designers everywhere.

    • @rjabrm
      @rjabrm Рік тому +1

      ​@@UICollectiveDesign good luck with that.

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

      Either compete on the logic or the creative side. The half-breeds (aka Actor / Model) is blurring for sure.

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

      Totally disagree. Ignoring these kind of big updates is like pissing against the wind. Figma is the big brother here and they set the rules for the industry, and then industry set the rules for the designers. Bottom line is, soon or later, you will have to adopt.
      On the other hand, only juniors believe that they have nothing to do with the development part of any project. You design for devs to code and make it work in real life. If you are dribble designer, go ahead and ignore everything. You can even do your thing with Photoshop.
      Last but not least, even if we ignore the dev part and just look at this from a designers' perspective, still they are super useful and huge time savers. I believe you just didn't understand the way you can use them in any serious project.

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

      @@EnesKab who set the rule is the Designers! remember that