Тёмный

Swapping Variants Using Variables | A Figma Tutorial 

UI Collective
Подписаться 13 тыс.
Просмотров 12 тыс.
50% 1

Опубликовано:

 

31 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 52   
@BhuvanaNarayanamurthy-rb3mi
@BhuvanaNarayanamurthy-rb3mi 21 день назад
Very clear explanation! Thank you! I landed on your tutorial after looking through a bunch of others.
@UICollectiveDesign
@UICollectiveDesign 21 день назад
Thanks!! Please subscribe and share where you can :)
@Shteuf
@Shteuf Год назад
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 Год назад
Appreciate the love! Lots more videos on the way :)
@suniljadhav1889
@suniljadhav1889 11 месяцев назад
Its true.......Nice series.....Thanx
@UICollectiveDesign
@UICollectiveDesign 11 месяцев назад
No problem! Happy you liked them. Please subscribe and share our channel!@@suniljadhav1889
@SoulaORyvall
@SoulaORyvall 10 месяцев назад
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 10 месяцев назад
Great idea! Appreciate the dialogue :)
@mirkocaccia9388
@mirkocaccia9388 9 месяцев назад
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 9 месяцев назад
Great call out!
@SoulaORyvall
@SoulaORyvall 10 месяцев назад
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 10 месяцев назад
Great call out!
@djashawe88923
@djashawe88923 Год назад
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 Год назад
Good call out! Variables could definitley be improved on
@Underhills
@Underhills Год назад
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 Год назад
Great call out! Lots of different ways to build components.
@chrisronan
@chrisronan 9 месяцев назад
You guys are really good! Appreciate the videos very much. Going to get in touch with you through your channels.
@UICollectiveDesign
@UICollectiveDesign 9 месяцев назад
Thanks!! Please subscribe and share our channel where you can :) & Sweet - Looking forward to the convo!
@uxdworld
@uxdworld Год назад
Great info, thanks 👏
@UICollectiveDesign
@UICollectiveDesign Год назад
Glad you liked it!
@benjamincranwell
@benjamincranwell Год назад
Brilliant video
@UICollectiveDesign
@UICollectiveDesign Год назад
Appreciate it!
@ytRap007
@ytRap007 11 месяцев назад
thanks this is very helpful.
@UICollectiveDesign
@UICollectiveDesign 11 месяцев назад
Glad it helped!
@whennn
@whennn Год назад
Nice !!!
@UICollectiveDesign
@UICollectiveDesign Год назад
Thanks!!
@AmirNoyman
@AmirNoyman 6 месяцев назад
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 6 месяцев назад
Can you elaborate on the scenario?
@IvanZburlyuk
@IvanZburlyuk Год назад
You're a genius!!!
@UICollectiveDesign
@UICollectiveDesign Год назад
haha thanks!
@MCbyGracjan
@MCbyGracjan 8 месяцев назад
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 7 месяцев назад
Sorry, can you elaborate on this one?
@guillaumegoulet1480
@guillaumegoulet1480 Год назад
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 Год назад
Join our slack channel and I can help you troubleshoot!
@ossimatasaho5977
@ossimatasaho5977 Год назад
Could you do dropwdown lists that swap variant based on selection of another dropdown list?
@UICollectiveDesign
@UICollectiveDesign Год назад
This should definitley be possible!
@ossimatasaho5977
@ossimatasaho5977 Год назад
@@UICollectiveDesign Any tips for it? Haven't figured it out.
@UICollectiveDesign
@UICollectiveDesign Год назад
Let me try to recreate it and get back to you
@ossimatasaho5977
@ossimatasaho5977 Год назад
thanks👌
@AjayJaiswal-p4e
@AjayJaiswal-p4e Год назад
@@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.
@sachinroy11
@sachinroy11 5 месяцев назад
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 5 месяцев назад
Can you elaborate more on the problem you're facing?
@MusabNaveed
@MusabNaveed Год назад
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 Год назад
Also an option!
@MyDigitalHub
@MyDigitalHub Год назад
Amazing
@UICollectiveDesign
@UICollectiveDesign Год назад
Glad you enjoyed!
@marcinukleja
@marcinukleja Год назад
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 Год назад
Don't necessarily need modes. It's a good variable exercise though.
@Rahul_Lata_
@Rahul_Lata_ Год назад
i think creating local variables is only for paid figma version ... how can learners do it :( sad
@UICollectiveDesign
@UICollectiveDesign Год назад
Variables should be free!
@jjung
@jjung Год назад
This is unnecessarily complex. There is no reason to use modes and boolean variables make more sense for this use case.
@UICollectiveDesign
@UICollectiveDesign Год назад
Thanks for the feedback!
Далее
skibidi army returns (skibidi toilet 77)
00:49
Просмотров 2,6 млн
Variants vs variables
15:11
Просмотров 36 тыс.
Figma for Edu: Advanced Protototyping Techniques
1:09:26
Master Design Tokens - From Basics to Advanced
44:30
Просмотров 28 тыс.