Skip to main content
Question

Variants not updated when i change master component

  • November 22, 2023
  • 3 replies
  • 1253 views

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

3 replies

AlicePackard

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!


  • Author
  • 1 reply
  • November 23, 2023

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.


Sanjin_Mujkic

I think I figured this. So, when you add a variant this way that you did, go the layers and find added variant. then in the layer panel, double-click to rename. you’ll see that all other variant has like Property 1=variant name, but the one added has only a name. so manually add Property 1=variant name, or whatever is your structure, but it needs to match all other variants. That will properly link them together.

Let me know if this help. I know I’m a bit late to the game, but 1 year later, I faced the same problem, and tried to search for solution to stumble upon this post. After someone suggesting the layer structure, I saw that my layer structure was correct, but when selecting added variant I found error in naming. After I changed this, it worked perfectly.

Cheers.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings