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.
Naturally, there’s a workaround: controlling the component state using a component set as before, it saves some duplication still.
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.
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.
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.
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.
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.
@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?
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.
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.
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.
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.
Set the same after delay logic on each component variant
On click change variable, anywhere you want, but immediately after changing variable, open a dummy overlay
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”.
