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 [sic]: 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 [sic]: 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