Swapping Variants Using Variables | A Figma Tutorial

Learn how to swap variants in an interactive prototype by using Figma variables. Apologies for the delay in releasing a video! Have been busy working on new courses.
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
0:00 An Introduction
0:46 Setting up the Variables
4:48 Adding Prototyping Functionality

Пікірлер: 50

  • @Shteuf
    @Shteuf10 ай бұрын

    Excellent, scrolling through a dozen videos: those with logic made it even more complex than the ones without. Your take is brilliant, well done! Following your channel now, you've got awesome design tips, and you're very clear. Kudos to you sir!

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Appreciate the love! Lots more videos on the way :)

  • @suniljadhav1889

    @suniljadhav1889

    7 ай бұрын

    Its true.......Nice series.....Thanx

  • @UICollectiveDesign

    @UICollectiveDesign

    7 ай бұрын

    No problem! Happy you liked them. Please subscribe and share our channel!@@suniljadhav1889

  • @SoulaORyvall
    @SoulaORyvall6 ай бұрын

    I would suggest setting the name of the variables to semantically match the options. So "Starting Active/Inactive" in this case would become "Notifications Yes/No". At 5:45 the action would read: "Set variable 'Notifications Yes' to inactive", which is much easier to maintain

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    Great idea! Appreciate the dialogue :)

  • @chrisronan
    @chrisronan5 ай бұрын

    You guys are really good! Appreciate the videos very much. Going to get in touch with you through your channels.

  • @UICollectiveDesign

    @UICollectiveDesign

    5 ай бұрын

    Thanks!! Please subscribe and share our channel where you can :) & Sweet - Looking forward to the convo!

  • @SoulaORyvall
    @SoulaORyvall6 ай бұрын

    Around 2:22, I believe the issue isn't that the component instance is inside a frame, but it's the fact that it's inside another instance (of another component) named Form

  • @UICollectiveDesign

    @UICollectiveDesign

    6 ай бұрын

    Great call out!

  • @uxdworld
    @uxdworld10 ай бұрын

    Great info, thanks 👏

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Glad you liked it!

  • @Underhills
    @Underhills10 ай бұрын

    When prototyping that way the radio label is excluded from the hit area, common UX practice is to include the radio label as trigger.

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Great call out! Lots of different ways to build components.

  • @user-ue6pp1vi7f
    @user-ue6pp1vi7f10 ай бұрын

    Brilliant video

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Appreciate it!

  • @djashawe88923
    @djashawe8892310 ай бұрын

    Thanks a lot for the tutorial. I tried to do a radio button exercise with 4 multiple choices and it was kind of hard. Although variables are created to reduce the number of variants, due to Figma's limited capabilities, I find that it's just easier to create all possible variants, assign a string variable that matches with one of the variants, use "set variable" to go from variant A to variant B upon clicking.

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Good call out! Variables could definitley be improved on

  • @ytrpaz
    @ytrpaz7 ай бұрын

    thanks this is very helpful.

  • @UICollectiveDesign

    @UICollectiveDesign

    7 ай бұрын

    Glad it helped!

  • @user-ne9mg7os3x
    @user-ne9mg7os3x10 ай бұрын

    You're a genius!!!

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    haha thanks!

  • @whennn
    @whennn10 ай бұрын

    Nice !!!

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Thanks!!

  • @mirkocaccia9388
    @mirkocaccia93885 ай бұрын

    Thanks for the video!! I think in this case you don't need the second mode variables (Mode 2), if you delete them it should still work.

  • @UICollectiveDesign

    @UICollectiveDesign

    5 ай бұрын

    Great call out!

  • @MCbyGracjan
    @MCbyGracjan4 ай бұрын

    I would like to do this based on the game inventory checkbox. There are five images, each has a state before clicking and after clicking . How do I create so that the selected image takes the post-click state, and the previously selected image turns into the pre-click state?

  • @UICollectiveDesign

    @UICollectiveDesign

    3 ай бұрын

    Sorry, can you elaborate on this one?

  • @AmirNoyman
    @AmirNoyman2 ай бұрын

    Is there any way to act on multiple options, such as a color picker? with swatchs? Choosing one color out of 12 options...

  • @UICollectiveDesign

    @UICollectiveDesign

    2 ай бұрын

    Can you elaborate on the scenario?

  • @guillaumegoulet1480
    @guillaumegoulet148010 ай бұрын

    The issue I'm facing is that when adding the component inside another component, the variable for the state gets removed. Any suggestions?

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Join our slack channel and I can help you troubleshoot!

  • @sachinroy11
    @sachinroy11Ай бұрын

    I have created two different variable for it ( i have make two radio button on click only one of them clickable for single time to change its stage )

  • @UICollectiveDesign

    @UICollectiveDesign

    Ай бұрын

    Can you elaborate more on the problem you're facing?

  • @MyDigitalHub
    @MyDigitalHub10 ай бұрын

    Amazing

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Glad you enjoyed!

  • @ossimatasaho5977
    @ossimatasaho59778 ай бұрын

    Could you do dropwdown lists that swap variant based on selection of another dropdown list?

  • @UICollectiveDesign

    @UICollectiveDesign

    8 ай бұрын

    This should definitley be possible!

  • @ossimatasaho5977

    @ossimatasaho5977

    8 ай бұрын

    @@UICollectiveDesign Any tips for it? Haven't figured it out.

  • @UICollectiveDesign

    @UICollectiveDesign

    8 ай бұрын

    Let me try to recreate it and get back to you

  • @ossimatasaho5977

    @ossimatasaho5977

    8 ай бұрын

    thanks👌

  • @user-kb5xq5bz3d

    @user-kb5xq5bz3d

    8 ай бұрын

    @@ossimatasaho5977 @UICollectiveDesign, if you looking for chnage in the value of the dropdown then it is easily possible by using string variable. Define string variable first and then assign it to the first value from the list of dropdown and then prototype using set variable and then change to select value. Hope this will help.

  • @MusabNaveed
    @MusabNaveed10 ай бұрын

    Cant we just make these two options one component (with two states - x highlighted, y highlighted) instead of linking 2 separate components through variables?

  • @UICollectiveDesign

    @UICollectiveDesign

    10 ай бұрын

    Also an option!

  • @marcinukleja
    @marcinukleja9 ай бұрын

    Do you really need modes to achieve that? Seems like you're just manipulating values of variables; there is always the same mode selected. Or did I miss something?

  • @UICollectiveDesign

    @UICollectiveDesign

    9 ай бұрын

    Don't necessarily need modes. It's a good variable exercise though.

  • @Rahul_Lata_
    @Rahul_Lata_8 ай бұрын

    i think creating local variables is only for paid figma version ... how can learners do it :( sad

  • @UICollectiveDesign

    @UICollectiveDesign

    8 ай бұрын

    Variables should be free!

  • @jjung
    @jjung9 ай бұрын

    This is unnecessarily complex. There is no reason to use modes and boolean variables make more sense for this use case.

  • @UICollectiveDesign

    @UICollectiveDesign

    8 ай бұрын

    Thanks for the feedback!