It is November of 2021 and it is quite concerning this hasn’t been fixed yet.
Ordinary Buttons do work at keeping text overrides. But in a segmented design environment eg. multi-options toggles aka “Segmented Controls” or “Toggles” ~ any text overrides still somehow reverts back to whatever the parent or atomic “base” structure was set.
The only seeming workaround to this as unintuitive it sounds - don’t use atomic base structure. That’s right - design your component, prototype / set interactives, style it via variants (dark mode toggles on/off, outline version on/off etc) as usual and use them as is. No complicated nested-upon-nested instancing. See my screenshot setup(s) as hypothetical examples.
The above workaround however pretty much defeats the entire purpose of keeping things diplomatic right at the atomic level through “base” or “structure” components. But for those who demands future proof management:
you would already have set up global colour styles, and typographic styles ~ a few set up for buttons at least anyway.
Also - you have Figma Tokens Plugin (though beware it has own share of problems). Set up and apply border radius or spacing tokens and apply those on your segmented controls, labels, forms, etc.
(Believe me) I have tried and am aware of the above .base method.
On complex nested upon nested variants, such as cards and heroes Text overrides still doesn’t retain changes at least in context of Dark mode toggles on/off in which they still stubbornly reverts back to whatever the “parent”, “master” or “base” component says.
I have spent days on this, frustrated.
If it were that easy as putting everything in their own “base” or “master” structure this thread would have been long solved. But the problem appears to be context specific. Sometimes text overrides does work, but in some cases doesn’t. Even if I adopt the above best practice in this case - putting everything diligently in their own master or “base” structures.
@Andrew16, the structure of your variants is different, so text overriding doesn’t work. In the “Dark mode = True” variant, you have additional nesting, which is not present in the “Dark mode = False” variant.
I made a quick example similar to yours in which text overriding works.
@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,
@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:
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.
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.
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.
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:
When we duplicate a button to create another style; we then have to re-link all the interactions to the newly created buttons.
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.