Variants not updated when i change master component

Ask the community
1

Hello,

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

2

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!

3

Hello Alice

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.

1 Like