I’m not sure with which version this started to happen, but swapping nested symbols results in incorrect behaviour.
I have two symbols that contain other symbols. One with four symbols and one with three symbols. In between the symbols I have transparent symbols that I use to adjust the spacing. If I swap a symbol with four icons to a symbol with three icons, I get incorrect behaviour. An icon with an unrelated layer (symbol) name is assigned to a layer (symbol) that does not have the same name.
Hi Paulius. I’ve tried building a quick demo file based on what I can see in your video, but everything works as expected for me. Could you please send in a Sketch file with these Symbols so that we can take a closer look at what’s going on? productsupport@sketch.com Thanks.
Hi Paulius. You’ll be pleased to hear that there is a very simple fix for this issue, in terms of how you have structured your Symbols’ layers.
The reason this happening is because the Symbol with four icons only has one spacer in it, on the right side. But the Symbol with three icons has three spacers.
So if you remove the two spacers from the Symbol with three icons, so that it matches the Symbol with four icons, then when you swap them out with each other, you will get the result that you want.
Or better yet, just remove the spacers completely, as they are not needed. Sketch already considers gaps and spaces in Smart Layout, so you don’t need to add these in manually.
That is the solution to your problem, but now to get to the more complicated cause of this, and why the original behaviour you experienced is happening. It is related to both the differing number of spacers you have in your Source Symbols, and also where/how you have applied your overrides.
In the Component with four icons, you are not showing this Component as it originally appears. Instead, you have a dummy Component with dummy icons within it, that you can override. That is what is crucial here: You are not showing this Component as it originally appears. And in this dummy Component, you have overridden four individual icon Symbols within it, individually, changing them from their default to something else.
So then, when you swap out the main top-level Component, although you are swapping the Component, the application will attempt to keep the overrides that you had already previous applied. (It is intentional and commonplace that you would want to swap Components but keep overrides.)
So because you had deliberately applied four nested-symbol overrides before, when you make this swap, you will still have four nested-symbol overrides applied afterwards. The application will look for differences in the two Components, and will apply these overrides in places where the nested Symbols have changed.
Note that the reason this does not happen if you remove the spacers as noted above, is because then you end up with the same number of Spacer Symbols in both Components – either one or none. So when you apply your overrides, what remains the same between the two Components will not be affected. That means the 1x Spacer will remain as 1x Spacer, for example, because there were no overrides applied here. And what differs between the two Overrides will be affected. Four icons changes to three icons.
I realise this might sound confusing, so please let me know if you would like any further explanation here.
Hi Brett,
Thanks for the detailed explanation and suggested solutions. It’s not confusing, I understand where I made a mistake. I added 3 extra missing spaces to my symbol with 4 icons and now when I swap it works fine.
You’ll be pleased to hear that there is a very simple fix for this issue, in terms of how you have structured your Symbols’ layers.