Variant binding for component's instances

New variables and advanced prototyping are truly amazing. However, I’m encountering some challenges while implementing them with components. Here’s the scenario:
I have a simple filter-like component that includes a trigger and a drop-down menu. The trigger has two states based on the selected value. Before the update, its prototyping looked like this:

Prototyping with variables allows implementation within a single frame by binding the component status to a variable and changing it based on the menu selection (and controlling the menu state with conditions🤩), which is genuinely incredible!

The problem arises when I try to convert this element into a component. Then, Figma notifies me that the variant binding has been removed from instances.
image

Naturally, there’s a workaround: controlling the component state using a component set as before, it saves some duplication still.

But I’m curious if I might be missing something. Is it indeed possible to accomplish this using only variables? Does anyone have any suggestions?

9 Likes

I’m having a similar issue. In my case I created a component first which has a nested instance, then tried to bind a variable to the nested instance. However the icon for variable binding didn’t show up. This would be a huge blocker to use variables in prototype.

3 Likes

Yup. Variable binding on variants is not supported on nested instances. Huge showstopper for us as well.

Also, the mental model Figma introduced is way more cumbersome than using Code Overrides like in Framer. In Framer, you can assign an override with some logic to any component, once or many times. It’s a super fast way to build selection controls, filter, lists etc.

12 Likes

This seems like a massive oversight. Anything with even the slightest degree of complexity will have nested variants. I’d really like to see this supported in the future.

9 Likes

If I remember correctly this was on a very short “In the future” list in one of Figma’s recent presentations.

6 Likes

I thought so too. Good to know.

This becomes super cumbersome when I’ve made a navigation toolbar or set of tabs and want to publish that entire group as a main component with the interactions provided (using the variable binding). NOPE! Can’t do it. :sob:

In this library I’m working on, I basically can’t include a bunch of main components with nested instances within them because of this. I don’t want to have to include a ton of variants like the old-fashioned way because it’s super cumbersome to maintain.

1 Like

@Alexey I’ve edited your post category to be “Suggestion” (feedback), so we can apply votes. If everyone here can do that, and start sharing this, we can leverage this post for the Figma team. Thanks!


Alexey - I’m trying to understand, how did using a component set again help save duplication work still? What are the interactions you have on the menu options? Can you expand on that?

2 Likes

I was also very disappointed to discover that assigning variables gets stripped out when nesting an instance inside a new component. For a moment I really though I was about to do something clever with this solution but hopefully Figma can release this update along with all things text variables.

3 Likes

First, a brief review of where we’ve been.

Before variants, the only way we could organize Figma components was using forward slashes or frames to group and nest them together. This was fine, but it wasn’t great. It forced us into very rigid folder systems.

1 Like

Would love to see this supported soon. I’m trying to build components with themes, and this is stopping me in my tracks.

2 Likes

Pretty pretty please can this be a feature, this changes and revolutionises the way we could do things! I cannot believe this is not here :smiling_face_with_tear: :sweat_smile:

2 Likes

This would be such an amazing game changer for our team - please please Figma, Figgies, my love - bind the variants back for component instances.

2 Likes

Very disappointed with not being able to nest Variables. I need to build a component that allows a user to go in and out of a folder tree. The component needs to have a chevron that opens the folders and a selected stated when a user decides to see the contents of a folder. You would think this would be a very easy thing to do with nested variables. but you can’t bind a variable that is nested. SO. back to the dragging connectors. So close, So far.

2 Likes

Agreed. I thought the point of variables was to improve prototyping? If we can’t nest variables, we’re still stuck multiplying frames to no end.

2 Likes

Possible workaround
I had the same problem and discovered a possible workaround. You can use “After delay” on a component with “Conditional” and “Change to”.
The trick is: to trigger “After delay” logic you need to briefly open and close some overlay. You can have a dummy overlay that you open and close after 1ms.

See screenshots below.

  1. Set the same after delay logic on each component variant
  2. On click change variable, anywhere you want, but immediately after changing variable, open a dummy overlay
  3. On the dummy overlay, add interaction to close it after 1 ms

I still need to test how stable this solution is, I’ll let you know if I find issues or bugs.

Update: There’s a bug when you use “Else”. It also changes the logic in the normal “If” and screws up all the if else in all components. You need to refresh the whole project after touching “else”.

I am having the same issue but in my case it’s around variables between a main screen and a nested overlay that opens on top of the main screen.

Hopefully this will come in one of the future upates.

Just faced the same issue. Hopefully Figma can solved this in the near future

I’m having the same issues with lost variables in a navigation prototype I’m building out with nested components and variants. It strips out the variable as soon as I create a variant!

I needs it

Either nested variables or variable scope at page level and outer frame level. Today variables scope is global to a file.

Another thing I find extremely time consuming and hence might be a show stopper is, there is no easy way to find which layers have variables bound to them. I have to hunt for it by selecting 100s of layers. At least showing some kind of indicator (icon) next to the layer name would help.