Figma Support Forum

Text Override doesn't work on nested variants with interactive components

@tank666 - just want to say thank you very much for this much appreciated. It appears I have to be extra careful when it comes to setting up the nested components.

I was stuck in a prior workflow before having to create two (2) separate components (light and dark) and then merge them via “Combine as variants” feature. So that ~ it seems, Is the “wrong” way of approaching this…

Once again thank you for your help once again,
Andy.

We are exploring the use of a spreadsheet to organize our Variant Properties, which also closely mirrors are Style structure, which also closely mirror our Event structure for analytics.

A colleague recently shared this checklist from Notion:

This is a way to keep things consistent from one component/theme to another.

Using a Google Sheet + Google Sheet Sync is a way to make this easy to access in your Figma files.

That did indeed fix the text problems! Thank you so much @tank666

Another issue I’m having is how these things are displayed when their size isn’t identical, even if auto-layout is turned off.

Here’s how it works in Adobe XD for an info icon with a hover tooltip:
image

Hover:
image
So as you can see it behaves like it would on an actual production web product.

Here’s the exact same thing in Figma:
image

Hover:
image

  1. Auto-layout layer order screws up any drop-down or hover designing you’re doing by forcing the layer order so that top items are “below” items below them.
  2. The item doesn’t retain it’s original position, instead the entire thing shifts.

That’s not how things work in real life products. This is just Figma being weird and restrictive on both accounts.

The only way to get around 1. is to disable Auto-layout, which is really damn stupid. 2. has no fixes afaik

So that the object doesn’t shift, it must be the same size, that is, the size of the variant with the showing tooltip must be equal to the variant with the hidden tooltip.

@Omar_Chelbat this part of Figma Interactive Component video addresses your tool tip question:

@tank666 @Jono2 - You guys seem to have figured this bad boy out. Well done! Now I’m running into the same problems, but in a different setup.

I’ve been trying to create an atomic based design system where we only have to make a couple of tweaks in one spot to change the entire system. I’ve been at it for quite some time now, but can’t seem to figure it out.

I took the following steps:

  1. I’ve setup the _Button (size+style) component with responsive variants so that I only have to adjust the font-size, spacing, icon size & border-radius in one spot.
  2. Then using an instance of the above component I created the component _Button states. This components holds all the different interaction states with prototype links.
  3. And then finally I setup a component with all the different variants with icons left, right none, desktop, mobile, primary, etc. in the visible component Buttons.
  4. Ran an experiment, but just like you guys text and colour overrides are all over the place…

The reason I’m setting it up like this because if you look at my file. The page “Lots of linking to be done” has two downsides:

  1. When we duplicate a button to create another style; we then have to re-link all the interactions to the newly created buttons.
  2. When we want to change a style we then have to - meticulously - change it over all 3 responsive sizes.

Hopefully one of you two could help me out. Thanks in advance!

Hi @YSluimer, it’s very difficult to guess where and what went wrong, whether it is related to the settings of the components/variants or even some kind of Figma bug. If you can share a video and a link to a example file, that will help us find the reason.

You can also take a look at my Figma Community file, which also uses a “.base” component for buttons.

Experiencing the same issue! i didn’t have the problem before but it suddenly occurred.

Had to use a different account because I couldn’t reply anymore?

Anyway @tank666 thanks for sharing that file. And in my file under page “Lots of linking to be done” you can actually see I am using this setup.

Though for what I’m trying to achieve we’re actually going one layer deeper, really going into an object oriented structure.

Because I’m a new user I had to remove the first part of the URL:
community/file/1042161506074913286/Nested-button-test

Thanks for the link! I’ve experimented with your file and here’s what I can guess. The overrides were breaking because Figma doesn’t know how to define the state.

In your example, it read like this: “Any button with/without icon should be large and in the Default/Hover/etc state, and any size, and with some style”.

And it should be something like this: “Any button with/without icon and any size should be in Default/Hover/etc state with some style”.

I hope you understand what I mean.

You can see an example in the screenshot and the link to the file:

1 Like

Hi, I’m having the same issue as the original author. Is it a bug still?

It was never a bug. The problem is that it is very easy to get it wrong.

In every post here, the layer names are the problem.

EVERY COMPONENT LAYER MUST HAVE THE SAME EXACT LAYER STRUCTURE AND LAYER NAMES. Simple hide or show layers for each variant and property.

It can get messy fast. It’s usually faster to start over.

2 Likes

This is a solution, I have come up with the same answer. The one note to add, the name of the hidden components SHOULD be the same.

2 Likes

Hi Everyone,

I stumbled across this topic because I’m having a similar issue but NOT IN THE EDITOR.
I only have this issue with the Prototype demo/page -

What happens is this

  1. I override the text in one of the interactive variant components with custom text

  2. Changing a variant property doesn’t break anything (my nested base is good)

  3. In the Prototype page it resets to the default even though the text is different in the editor.

So basically my problem is that Text override is working with nested variants and interactive components but not working in the prototype demo

1 Like

I think I had the same problem, but I managed to find a solution. I had a button group component consisting of 11 variants in which each of the 10 buttons were active (and one with no active buttons). The button I used was a component itself. My problem was, that when I renamed the button labels on my button group instance, sometimes (but not always?!) the labels would change to the labels in my button group component instead of the ones in the instance, when I clicked around in the prototype window - even though it seemed to work, when I cycled through the different variants in the editor. Very weird and quite buggy since I would at least expect to see the same behaviour each time, but sometimes it worked to just restart the prototype, and sometimes it seemed to me, that it would work if I clicked through the different instances slowly before clicking around like crazy, almost like Figma needed time to load all my different instance variants or something like that.

I found out, that I had accidentally changed the labels on the buttons in the button group component instead of just keeping the labels in the original button component. When I reset the text on the buttons in the button group component, everything worked. Hooray! But I still think something is buggy, since it would sometimes work with my original setup and sometimes not - it does not make sense to me, that it does not behave consistently.

This worked for me - Thanks!