Hi,

Situation: I have created an animated component set (text within a colored frame) where the only thing that should change is the color.

What works: I can create an instance of this, re-size it smaller, prototype preview, and everything behaves as expected.

What doesn't work: If I take the above instance, create a new component out of it, and create an instance of that, it seems that the sizing beyond the first variant of the original component set isn't respected.

What I've tried: I’ve done a fair amount of research into this already and others have recommended applying autolayout and “hug” to the parent and child elements.

How this worked out: I was able to get the colored frame from re-sizing, but for the life of me I can't get the text to stop re-sizing.

Here's a screenshot of the component set (size_test-component_set), an instance of the component set nested in a new component (size_test-component), and an instance of that (size_test-instance). My post continues below this image:

I performed 4 tests, changing attributes of the size in various ways but I couldn't ever stop the text from resizing.

• Test #1: Component set fixed > parent (variant) fill > child fill > text fill
• Test #2: Component set hug > parent (variant) fixed > child fixed > text fill
• Test #3: Component set hug > parent (variant) fixed > child fixed > text fixed
• Test #4: Component set hug > parent (variant) hug > child hug > text hug

You can find additional details about my test and animated .gifs of the results, below.

Additional information: This unexpected behavior happens whether the trigger is a delay or a click or if the animation is Smart animate or instant.

Seems that when you resize an instance of a component set and put it into another component, then Figma stops respecting the re-size after the animation proceeds to the next variant in the animation.

Any help with this would be appreciated! 

APPENDIX

Additional Test Information

Test #1

Summary: Component set fixed > parent (variant) fill > child fill > text fill

• size_test-component_set: width 684px (hug -> fixed), height 278px (hug-> fixed)
• parent-01 & parent-02: width (fixed -> fill), height (fixed -> fill)
• child-01 & child-02: width 240px (fill), height 246 (hug -> fill)
• text lsic]: width 240px (hug -> fill), height 246px (hug - >fill)

Result: Text size still animates

Test #2

Summary: Component set hug > parent (variant) fixed > child fixed > text fill

• size_test-component_set: width 684px (hug), height 278px (hug)
• parent-01 & parent-02: width 240px (fixed), height 246px (fixed)
• child-01 & child-02: width 240px (fill -> fixed), height 246px (hug -> fixed)
• text sic]: width 240px (hug -> fill), height 246px (hug - >fill)

Result: Text size still animates

Test #3

Summary: Component set hug > parent (variant) fixed > child fixed > text fixed

• size_test-component_set: width 684px (hug), height 278px (hug)
• parent-01 & parent-02: width 240px (fixed), height 246px (fixed)
• child-01 & child-02: width 240px (fill -> fixed), height 246px (hug -> fixed)
• text isic]: width 240px (hug -> fixed), height 246px (hug - >fixed)

Result: Text size still animates

Test #4

Summary: Component set hug > parent (variant) hug > child hug > text hug

• size_test-component_set: width 358 (hug), height 80px (hug)
• parent-01 & parent-02: width 77px (hug), height 48px (hug)
• child-01 & child-02: width 77px (fill -> hug), height 48px (hug)
• text /sic]: width 77px (hug), height 48px (hug)

Result: Text size still animates