Skip to main content

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

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 ❤ I wish more folks did this!


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.




Reply