This my simple workflow
- I create a frame with autolayout and a text
- I set it as a component
- I duplicate the component
- I select both components and apply “Combine as variants”
- I add “x” at the end of my text : the x appears on my two components
- Now I create a new Variant from my component. This new variant is in the same set as the others
- Now I remove the x from my first component
- x is removed from my first and second component BUT not on the last one
Link to the video
I must miss something but I don’t understand …
Thank you for your help
Hi Julien! I think I see where things went wrong.
At 0:46 you “re-wrapped” an instance of ❖ Frame 74 as a main component and then combined the two as a variant set. If you expand all the layers in the layers panel you should see this structure.
At 1:01 when you added a third variant to the set, ⬥ Variant 3, my guess is it was based on the first variant, ⬥ Fame 74. Unlike ⬥ Frame 75, ⬥ Variant 3 does not contain a nested instance of ⬥ Frame 74. This would explain why its text layer does not mirror updates you make to ⬥ Frame 74.
I would advise you against having variants that contain instances of a neighboring variant. Working this way may seem efficient, but it almost always leads to problems down the road. This was a trap I personally fell into with base components and after being burned by memory usage issues and unreliable components I actively avoid that method in my work today.
For this specific example, I’d suggest binding all of the text layers together using a component property! This should achieve what it sounds like you’re trying to do: edit that text layer across all instances. Here’s a video tutorial from Figma showing how to create a text component property.
Thanks for creating a video in addition to writing out your steps, that made it incredibly easy to help identify the issue and help <3 I wish more folks did this!
Thank you very much for your kind and complete answer. It’s very well explained and I understand your point.
The video shows a simple example but what I try to achieve is more complicated.
I have a component with 3 variants. If I want to add a frame to all components for example, I must update each variant one at a time. If the modification is more complex or if I have 20 variants, it could be tedious.
In the attached video, what i’d like to achieve.