@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:
Hover:
So as you can see it behaves like it would on an actual production web product.
Here’s the exact same thing in Figma:
Hover:
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.
@tank666 @jonoyoung - 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:
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:
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:
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.
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.
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
I override the text in one of the interactive variant components with custom text
Changing a variant property doesn’t break anything (my nested base is good)
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
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!
I may be the odd one out here.
After so many times I thought I’ve settled this issue last year once and for all in by utilsing proper .base / structure layering trees.
I still cannot fathom nor understood why Figma still at times simply refuse to keep text overrides. I decided to overhaul my form inputs.
Even if I made a direct instance of an instance. You would think this would keep text overrides. But no. I kept everything down to microcosmic rule and atomic principle advocated. But still it doesn’t retain text overrides.
Once again, a serious question of inconsistency. No matter how much I followed .base / structure / nested instances one after another and keeping all text layers, text name, layer name etc all the same ~ It still does not retain text overrides even if I make an instance as a new component and use that elsewhere.
Maybe I’m just full of bad luck.
The problem and solution is always the same, however it is usually a huge ask to have someone in this forum QA another person’s work due to how overly complex variant set layers get.
100% of the time, the solution has been to make sure that every layer name in every instance / variant is the same. If a variant has a different layer structure, or if a variant has a layer that is renamed, the text overrides will break.
The base component must have all of the layers, for every state and every variation. Simple hide the unnecessary layers at first, then turn them on as needed for each variant.
Check every single layer, expand every layer, in every instance, and make sure the layer structure and names are identical. This is a requirement.
BlockquoteCheck every single layer, expand every layer, in every instance, and make sure the layer structure and names are identical. This is a requirement.> Blockquote
I hereby request an open assesment on my Drop Down section of my design system below ~ for anyone, to assess whether or not how I laid out my Drop Down components - from their .base/structures to usage case scenario is in any way abnormal or simply not “industry-standard” or not atomic-principle standard. I have checked every layer name to ensure they’re the same. I have inspected all titles, headers and text bearing exactly the same name as they were according to my .base / structure.
What you see is three artboards.
TLDR; When the drop down overall setup component is used in the .base form builder - It still somehow does not retain text changes in its variant open/closed states. Even if it appears to work ok during the Testing Ground / artboard #2.
Amongst other problems - Figma still struggles, lags and crash even in the most simplest of form prototyping (no smart animates, linear on/off, etc).
I appreciate your guidance.
Sincerely,
Andrew.
Make this easier to solve by:
Please share again when 1 and 2 are done.
