How to create a complex checkbox filter with variables in Figma!

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 พ.ย. 2024

ความคิดเห็น • 24

  • @maqibm
    @maqibm วันที่ผ่านมา

    For the next challenge, can you do a scenario where accessibility is a consideration in the design i.e. the user can select the filter items, but would need to click an 'Apply filters' button for those variables to take effect ;)

    • @AMDesignAndDev
      @AMDesignAndDev  23 ชั่วโมงที่ผ่านมา

      @@maqibm that’s very simple, give me something more complex so I can create a video on that.

  • @jessiekatz
    @jessiekatz ปีที่แล้ว +4

    Haha blame the commenter if it's too complicated 😂 This is great! Thanks for the demo. I fiddled around as well and came up with a more complicated version using conditionals based on a "FilterCount" variable. I didn't think to duplicate the results with a "ShowAll" variable - that helps a lot.

    • @AMDesignAndDev
      @AMDesignAndDev  ปีที่แล้ว

      Glad you found it useful!

    • @lealfj
      @lealfj 11 หลายเดือนก่อน

      @jessiekatz could you share your solution using that "FilterCount" variable?

  • @davidaffran7447
    @davidaffran7447 ปีที่แล้ว +1

    im looking at 6.03 onwards - I cannot see how you tie the checkboxes to the CTA's , when you click on/off on the variables they seem to hide/show the CTAs but how?

  • @Shubham_Toshniwal
    @Shubham_Toshniwal 9 หลายเดือนก่อน +2

    How is a checkbox Car connected to cards of car and the same thing for other two (bus and bike)?? Can you please make a video on that?

    • @kishorekumarseenivasan
      @kishorekumarseenivasan 3 หลายเดือนก่อน

      you can click on the individual cards and go to the layers panel -> click on the eye icon -> assign variables

  • @AMDesignAndDev
    @AMDesignAndDev  ปีที่แล้ว

    Here's the course I was talking about in the video:
    www.asaadmahmood.com/courses/figma-noob-to-pro
    Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
    Also, follow me on Twitter and LinkedIn:
    twitter.com/AsaadMahmood5
    www.linkedin.com/in/asaadmahmood/

  • @AlejandroLetxu
    @AlejandroLetxu 8 หลายเดือนก่อน +3

    Thanks for the video, it helped me a lot but...
    I need to step up, how can I do this but applying multiple filters of diferent categories?
    For example here you filter by Car, Bike... Vehicles. But imagine that you want to add another categories like for example "new or used" and regarding the price a few options like " 50-100, 100-250, 250-500 and +500" I would need to select multiple options in different categories, then apply and get the results that matches those filters. I would apreciate if you can explain it in a video :P

  • @djashawe88923
    @djashawe88923 ปีที่แล้ว +1

    Thanks a lot for this tutorial. I have a question. The reason why you have to do this way is due to Figma not allowing multiple "on click" interactions, right? I tried different methods too, but it's wasn't that easy due to that reason.

  • @amenesty999
    @amenesty999 ปีที่แล้ว

    The checkbox does not trigger when I add the conditional... it says (this interaction will not be triggered as interactions on instances are triggered before inherited internal interactions).

  • @khushneetkaur5929
    @khushneetkaur5929 6 หลายเดือนก่อน

    blame the questioner 😂😂 cracked me up!

  • @petithomme5249
    @petithomme5249 6 หลายเดือนก่อน

    Hello, I just can’t figure out how can the cards appear and disappear when you click on the checkboxes if you disconnected them from the variables (bike/car/bus) ?

    • @AMDesignAndDev
      @AMDesignAndDev  6 หลายเดือนก่อน

      I am not sure if I understand the question.

    • @petithomme5249
      @petithomme5249 6 หลายเดือนก่อน

      @@AMDesignAndDev i found the solution ! I didn’t understand in the tutorial that you had to keep the duplicated frame (one where each card is connected to the variables, and one where the frame is connected to all but each card is disconnected from each variable)
      It’s working perfect now ! Thank you ✨

    • @AMDesignAndDev
      @AMDesignAndDev  6 หลายเดือนก่อน

      @@petithomme5249 Awesome!

  • @attilabodi826
    @attilabodi826 6 หลายเดือนก่อน

    thank you

  • @itsgivingkyle
    @itsgivingkyle ปีที่แล้ว

    this is what i think: you are a prototype genius

  • @rjabrm
    @rjabrm ปีที่แล้ว

    how unpublish specific component in figma?

  • @arturmaklyarevsky6458
    @arturmaklyarevsky6458 ปีที่แล้ว +3

    There must be a simpler logical way to do this without making so many duplicate elements

    • @AMDesignAndDev
      @AMDesignAndDev  ปีที่แล้ว

      There is, but it’s not simple. As you would have to check if all are deselected before doing things in the deselected or active state.
      If everything if deselected in the active state, clicking on it keeps the clicked item true but makes the others false.
      And on active click, if all the other items are false, then deselecting it makes it true along with all of the other items.
      Duplicating helps us simplify the logic.

  • @Ademojola98
    @Ademojola98 ปีที่แล้ว

    😐😐😐🥲❤