Using Figma Variables to Swap Variants Between Modes
HTML-код
- Опубликовано: 8 сен 2024
- Learn how to swap variants between modes using Figma variables
Build a community profile + join the community: www.uicollecti...
Resource library: resources.uico...
Request a design system audit: www.uicollecti...
I'm working with a changing button, so this is perfect. Thanks!!
Glad it helped!
If for example you want to resize a button component between desktop and mobile the variable for some reason resets the button attributes to default.
A lot of bugs still with Figma variables unfortunately
What i wish to see is, how do u make it that if u resize the main frame to a mobile size, then the component will change its variable to mobile , like when smaller than 376 then change to mobile varialbe and if bigger than change to PC size and such.
like
nice
So you can't apply the variable to the main component. You have to apply it to the instance. That took me a solid couple of hours to figure out...
Do I have to reapply it every time I place an instance of the same main component to a frame?
Yup unless you are copying from an instance that already has a variable applied@@stamatiostentsos4957
Thanks for this. You just saved me a solid couple of hours.
@@nb7437 Glad it helped!!! Please share and subscribe :)
@@UICollectiveDesign Do we know if after the Config 2024, we can now apply this directly on the main component? I tried, but did not succeeded yet. Thank you very much
This is so helpful, Thank you so much!
You're welcomee!!
Why can’t we apply it to the main component? Only an instance of the component?
Yeah, that makes no sense
Silly Figma thing
I have been enjoying your videos recently and the process you follow to create components. Thank you!
Request: Can you please deep dive into input fields? Everyone has this one liner input fields. They don't cover where the field can have multiple lines, or just the text box will stop expanding after 3 lines. It's such a complex component to make and I'm struggling.
These are available on our website as part of our all-access pass :)
@@UICollectiveDesign Thanks. Will check.
This is so helpful. thanks for sharing
Glad you liked it!
Mate, this video is gold! Thanks a lot 🤟
Glad you liked it!
It is very usefull, thank you
Happy to help :) Please subscribe and share our channel :)
@@UICollectiveDesign Sure!
Can you make avideo that applies changing the state of a button to selected state when clicking?
This can be done just within your variants :)
when selecting the desktop frame, I dont see the local variable icon. is this a paid feature in figma?
Do you have any elements inside the frame? You also need to have variables created
Great video, but downvote for unskippable long ads
Only was able to monetize recently. Let me fix this now, still have no idea what I do / do not have control over. Let me investigate
Should be fixed now. Sorry about that!
Wow. Quick and great response. Switched downvote into upvote for such a great service.
@@rb8365 haha, I appreciate he heads-up on the ads!
Thanks.
You're welcome!
Cool! But I've faced one issue - I cannot apply this to nested components. Is there any solution?
Nope! Unfortunately Figma has not evolved to this level yet
@@UICollectiveDesign thanks
@@arturpavlenko Happy to help :) Please subscribe and share our channel where you can :)
How do you add a mode to a frame ? the option doesn't seem to appear on my side, on the frame, there is no ''variable'' button next to the layer section
Is something added to the frame that has a variable applied?
This is something i am currently working on but i would like to know if there any way that this is automatic. I mean, is there a way that UX designers do not need to assign the variable on the instance property of every component they add.
I say that because i am building a design system for a huge team of designers and i know for a fact they will not have the patience to do that and i understand why: assigning the variable to the property or simply swaping the variant manually requires as much effort.
No bulk way to do this I don't think :( At least not that I've found! If you find one please let me know :)
@@UICollectiveDesign it should be something doable as a plugin
@@baguetteDuGame Great plugin idea!
@@UICollectiveDesign yea well i am not a plugin dev^^
why your videos is not in the high quality
This is a much older video from when I first started. All new videos are in improved format
It seems you can't apply the string directly into the component's property, linking every future instance to the modes. Your method only affects the instances you create and individually link to the string, is this correct?
Yes, unfortunately, this is the case.
Is it possible to implement switching from a light theme to a dark theme and vice versa through the variable mode using a component variant?
Let me write an example. There is a toggle on the frame that switches the frame mode from light to dark, but it changes the mode of the current frame, not the transition to another frame. Is this possible?
Nope - You could have both prototypes in light and dark mode, but just have the switch as the gateway between the two
As it would be in a legacy prototype
I wanted to replicate this for myself, and unfortunately I noticed a small problem (on the Firgma side) - I can't create a string variable in the component library and then use it that way in other files. It only works on local components and variables.
You have to detach components. See our most recent video for an example
Thi does not work if you component set has several interactions, Jesus!!
Another bug!!
@@UICollectiveDesign is it, really?
Can you do create a more realistic example with component of 3+ properties? ;)
Can you elaborate?
I think he means , what happens when u have 3-4 variants , how do you link this to the variables@@UICollectiveDesign
I also have been struggling with that
great
Glad you like it!
very less original loudness of the video
was an older video. Sorry about that!
waist of time all that vars