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

Interactive Components Questions
83

Hey there community,

I’ve been experiencing the issue with incorrect override behavior. Had to troubleshoot for a while and here is what I found out.

I have a 2-layer Button component:

  • Nested Text Container (Button label)
  • The Button itself

Text container has variants (Text-only, Trailing, and Leading Icons)
Button component has Interactive states (Rest, Hover, Disabled, etc)

I didn’t create a full list of variants for the Button component with the corresponding base layer variants, just the bare minimum (Text-only container, check the screenshot)

It appears that the base layer won’t override as long as you don’t create variants with all the base variants (re-read please, I barely understood what I wrote for the first time lmao).
Recreating variants for all nested variants solves the overriding issues.

image
image1664×1044 80.2 KB

Hope this helps.

84

This is the best way to avoid this common problem:

  1. Build a raw component design with every single element you may possibly ever need.
  2. Name the raw component parent frame .raw-componentName. Leave this as reference for later.
  3. Duplicate .raw-componentName and rename it .base-componentName
  4. Make .base-componentName a new Figma component, e.g. ❖ .base-componentName
  5. Duplicate ❖ .base-componentName (This creates an instance named ◇ .base-componentName).
  6. Add Auto Layout to ◇ .base-componentName. Zero out padding and spacing.
  7. Make the new Auto Layout [ ][ ]frame a new ❖ component and name it ❖ base-componentName (no period this time). You will likely will want to set the nested ❖ .base-componentName to Fill Container.
  8. Add Variants and Properties to ❖ base-componentName for states and features by showing and hiding layers.
  9. IMPORTANT: If you are going to make them interactive components, create one variant set first, make the set interactive, then duplicate the and show/hide for the next variant. The duplicates will inherit the interactive settings so you don’t have to repeat that step.

The results is that ❖ .base-componentName (no period this time) is nested inside of ❖ base-componentName. If you need to make sweeping changes, change the ❖ .base-componentName and those changes will be applied to all Variants simultaneously.

Base components are heavily debated, and have their pros and cons.

CONS:

  • They can get very, very complex fast, so be ready for that.
  • There can be problems with nested components not resizing correctly. (See #6 above)
  • If you don’t get them right the first time (See #1 above) it can be a disaster to update an entire product or prototype and overrides can be lost.

PROS

  • it makes updating a breeze
  • Interactive states are a breeze

The FigFuture?

I am 99% sure all of the base components, and component nesting, and overrides will be vastly improved in the coming releases of Figma, so it may not be wise to go all-in on complex ❖ component builds if you don’t have too. For example, when Tokens arrive, you’re gonna wish you have used tokens… and now you’re gonna’ have to go back and redo or update a TON of variants.

2 Likes
85

This worked for me! Thanks so much :smile:

2 Likes
86

The phrase that solved it all was: “If you want to have things preserved in states other than the initial state, they have to exist in the initial state”

So you dont really need to do anything too complicated like defining a .base whatever component, the only thing that needs to happen is that all the components need to exist in all the states, so dont delete them! just hide them!

Thanks so much for this, i was struggling with this for months!

5 Likes
87

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.