Creating variants using component instances in the new version of Figma

This has been resolved.

Creating new variant is possible by clicking “Add variant” button from the top toolbar. In earlier versions there was alternative flow to this. I wasn’t aware of this button until now 🙂

For anyone else disliking mystery icons, “Add variant” is also hiding in the context menu under “Main component”.

This “Add Variant” option is really bad to find, lost a lot of time to see where this simple action could now be done! In my opinion, it’s a bad UX decision with this new update

Another issue that I have found is that Figma now tries to categorise all Properties into three categories ~ “Boolean”, “Instance Swap”, and “Text”.

Maybe this is yet another steep learning curve for me to distinguish each of them. But even as simple as Boolean false/true option ~ is still a mystery to me as it keeps giving me a side error message “not used within component”.

So far the only one that replicates the closest earlier version of Figma is “Text”. You set a property name. And set a value anything you wish. Done. That’s it. move on. Ironically this allows you to still set boolean false/true without that error “not used within component”.

I have no idea or why they convolute things unnecessarily.

Hi Andrew!
I just had a phone call with a friend on just this topic. The “Boolean” feature is not the same as boolean when you name things “on/off”. The new boolean feature is only connected to the opacity of items within your variant.

To create an “old school” boolean you need to add a new property variant from the right-hand side menu and name it on or off as usual.

Explanation of this “new” boolean

So you can mark what components should be opacity 0 when this feature is activated. And you add it to layers by doing the following: Mark the layer you want to add the ability to be 0% opacity. On the right-hand side, you have a title called “Layer” and next to the layer you have an icon that’s a line and a square. Click on this and it should say the boolean property name, click on it to add it. And now you have an on/off switch for opacity on your variant.

I hate the new variants, but good luck 😃

Dear Thomas,

I am grateful of you to respond back to me; no less even you proclaimed that you had to have a phone call right on this very issue. That ~ is quite telling how this matter should be pressed onwards.

Unfortunately, I am very tired and spent throughout these few week/s on troubleshooting endlessly (and quite unnecessarily I’d say) ~ some things become magically fixed / behaves well on their own depsite I’ve raised white flags. At the same time, other things don’t.

~RE: Boolean clarification~
Thank you for clarifying this with me. To me, my complaint still remains (note: not aimed at you) that this new boolean feature is very unintuitive. Boolean as on/off / true or false enabled or disabled ~ should still accommodate any change of parameters as on or off. This should technically apply to any setting. to any attribute. to any adjustment. no exceptions.

…in other words, this new boolean feature to only exclusively work with opacity changes…is to me = extremely backwards in thinking. I have no idea how this ever pass their consensus amongst real focus group testing, on real projects.

I still stand by my own prior workaround. eg. working with the “text” approach. or just simply ignore Figma’s new system and had to just remember to add the variant manually by the manual button on the toolbar.

One step forward (supposedly). Yet one step backwards for the entire community. The classical mantra “if it aint broke don’t fix it” ~ should still remain golden.

Let’s just call it a day. For now, before another troubleshooting begins.

I totally agree with you, Andrew. I have had mail dialogue with Figma support and am as frustrated as you are. The new Figma and how they have moved and hidden things are beyond my understanding. Loved how simple variants were (Have used it since beta) but they really messed it up this time 😕 I hate the new variants options as much as you, it’s so weird that a tool that is mostly used for UX design is having so bad UX. Buttons that look the same but have different functions etc. Really a step backwards 😦

Lets keep each other afloat for now and hope for some hot fixes.

That it not entirely true. Boolean true/false doesn’t change opacity, but it toggles visibility. The difference is that objects with 0% opacity still take up the same space as objects with 100% opacity (or any percentage of opacity), while visibility doesn’t.

With a plain component you might not notice any difference, but with a component using autolayout things will shift if an object that is toggled off comes before other objects.

Oh cool! The first time I tested I must have tested on a component without auto layout! Now it makes more sense with the boolean. Still a weird name, but I guess they want to expand on this in the future ^^