Skip to main content
Solved

Unexpected behaviour: Variables not updating in nested variants.

  • August 6, 2026
  • 3 replies
  • 27 views
Bauke_Schildt

I have a button (Component A) that uses variables in a nested component (Component B).

Padding and Min-height in the nested component are variables, because we have more than one brand and they use different paddings and button heights
 

The button has 36 variants; 3 Types (Primary, Secondary, Tertiary), 4 States (default/hover/pressed/disabled) e 3 surfaces (default/inverse/brand).

Issue: When I change the Variant of the Nested Component, it completely ignores the variables used in the variant:
 


This only happens when it’s a nested component. Otherwise it works as expected.

I really don’t want to add variants for every size (XXL, XL, LG, MD, XS & XXS) , because that would be 216 variants to keep track of, instead of 36.

Best answer by Jaycee Lewis

Hi, ​@Bauke_Schildt 👋 Thank you very much for your help so far. I opened a support ticket for you. The ID is 2064043 and the subject line is Variable-bound padding and min-height retain the previous variant's values when switching the variant of a nested instance. Please keep an eye on your email inbox (and your spam folder too) for the ticket and any replies from our team. Best! — Jaycee 

3 replies

Jaycee Lewis
Figmate

Hey ​@Bauke_Schildt 👋 Thanks for the post and for including your details. I have a few questions to help narrow things down:

  • Could you try building a brand-new parent component in the same file, nest a fresh instance of the button inside it, and cycle through the Size property there? If a fresh parent behaves correctly while your existing one doesn't, that’s a useful clue
  • On a nested instance showing the wrong padding, does right-click > Reset all changes bring it back to the values you'd expect for that size?
  • Are padding and min-height in each size variant bound to separate variables (one per size), or to the same variable resolving through different modes? If it's the latter, can you check if a mode has been set explicitly on the instance or on a parent frame?

Thank you! – Jaycee

Bauke_Schildt
  • Bauke_Schildt
  • Author
  • Active Member
  • August 10, 2026
  • Could you try building a brand-new parent component in the same file, nest a fresh instance of the button inside it, and cycle through the Size property there? If a fresh parent behaves correctly while your existing one doesn't, that’s a useful clue

Did that first, to try and figure out why it wasn’t working. The unexpected behavior only starts when I  assign variables to the padding and height values. If they are normal values, they update as expected.

  • On a nested instance showing the wrong padding, does right-click > Reset all changes bring it back to the values you'd expect for that size?

If I change the nested instance from XL to LG and then reset the nested instance it goes back to the original size (XL), so that doesn’t work...

  • Are padding and min-height in each size variant bound to separate variables (one per size), or to the same variable resolving through different modes? If it's the latter, can you check if a mode has been set explicitly on the instance or on a parent frame?

They’re bound to different variables.
Simplified: button/padding/xl, button/padding/lg, button/padding/md; set to 32, 24, 16, respectively. 
And min-height is set to button/size/xl, button/size/lg, button/size/md; set to 56, 48, 40, respectively.

Jaycee Lewis
Figmate
  • Jaycee Lewis
  • Figmate
  • Answer
  • August 10, 2026

Hi, ​@Bauke_Schildt 👋 Thank you very much for your help so far. I opened a support ticket for you. The ID is 2064043 and the subject line is Variable-bound padding and min-height retain the previous variant's values when switching the variant of a nested instance. Please keep an eye on your email inbox (and your spam folder too) for the ticket and any replies from our team. Best! — Jaycee 

    Terms & ConditionsAccessibility statement