@@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
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.
Love this! Thanks for sharing. Really simple too. However...I have this need to have a left sidebar that collapses. So I could easily create a component that has the two variants, expanded and collapsed. But can I easily just make a button that swaps the variant on-click? For whatever reason I am having a mental block on that right now. Any demo of this?
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?
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
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.
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?
Beside the fact not being able to asign variables to main components / variants I would like to be able to assign multiple variables as I want to cover more than just 2 viewports but not every viewport has its own variant.
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.
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
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
...yo!! 2 straight days trying to figure this out...thank you!!
I got you!!
Why can’t we apply it to the main component? Only an instance of the component?
Yeah, that makes no sense
Silly Figma thing
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
This!
Love this! Thanks for sharing. Really simple too.
However...I have this need to have a left sidebar that collapses.
So I could easily create a component that has the two variants, expanded and collapsed.
But can I easily just make a button that swaps the variant on-click?
For whatever reason I am having a mental block on that right now. Any demo of this?
Great question, I'll look into making a video on building a sidebar, but to answer your question, yes
Thank you, it was exactly what I was looking for
Glad to help! Please share our channel :)
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.
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^^
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
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
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 :)
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
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 :)
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
Beside the fact not being able to asign variables to main components / variants I would like to be able to assign multiple variables as I want to cover more than just 2 viewports but not every viewport has its own variant.
Please vote for "relating-component-variants-to-variable-modes" in the figma forum.
Agree! This is something I wish Figma would have released by now
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
I'm working with a changing button, so this is perfect. Thanks!!
Glad it helped!
Thank you, it has been very useful
Glad to help!!
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!
Mate, this video is gold! Thanks a lot 🤟
Glad you liked it!
This is so helpful, Thank you so much!
You're welcomee!!
Thi does not work if you component set has several interactions, Jesus!!
Another bug!!
@@UICollectiveDesign is it, really?
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!
It is very usefull, thank you
Happy to help :) Please subscribe and share our channel :)
@@UICollectiveDesign Sure!
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
Thanks.
You're welcome!
very less original loudness of the video
was an older video. Sorry about that!
great
Glad you like it!
waist of time all that vars