Figma Support Forum

Moving main components & nested instances broke

TLDR: We had nested icon and typography component instances that broke when we moved base components from our Core library to our Base library. The icon and typography instances turned into autolayout frames.

My team originally had a Core library file where all of our typography, icon, and button components lived.

We began using base components to build out our other components to more easily update layouts for the downstream components that used instances of our base components.

For example, we had a baseAlert component that had vertical and horizontal layout variants (depending on if the buttons were next to our below the message content). Those baseAlerts were used to build out our actual alerts, which had additional properties for color, type, and layout. We also had a base component for icons, where the root frame dictated size, and an icon component instance was inside it that could be swapped for different icons.

We realized it would be more sustainable to have the base components in a Base library that our Core library consumed, so we followed the process in the Move published components article.

However, the typography and icon components inside our baseAlerts, baseButtons, etc. in the Base library are no longer instances of those main components in Core.

Our main typography component is still in Core, as are the individual icons that are nested inside our baseIcon component.

Because our main base components in the Base library now just have autolayout frames for the typography and icon instances, we now have to manually update all of them, which then will be a breaking change for our component instances that used the base components in Core, so all of those will have to be manually updated as well.

Help?

Hmm moving the base component you built other components in other libraries off of should retain the connection and not cause the component instances to break… I wonder, did you set the Base library to publish to the team or org where the other libraries containing the children components live? If not, this could be why the connection isn’t there.

Also this article might help: https://help.figma.com/hc/en-us/articles/4404848314647

Yeah, that’s what we referenced.

The alerts in our Core library that we used the baseAlert are still linked. But the typography components and the icon components instances within the baseAlert have broken; the main typography and icon components are within Core, even though our baseAlert uses them in Base.

So, is the issue that we only moved the main baseAlert from Core to Base, but not our main components for typography and icons which are still in Core? So the nested typography and icon instances in the baseAlert turned from instances to autolayout frames?

The example in the article says that the main components of the nested instances in the dialog example should be moved with the dialog, which seems to be the only disparity.

Hmm I can’t seem to replicate the issue you’re having. You shouldn’t have to move the typography and icon components to the Base library. When you move the baseAlert component, the nested typography and icon components should still be linked to the Base library and not break. Would you be able to share your files so I can better help understand why this is happening?

1 Like

We’ve since created a Styles library for our colors, typography, and icons that we’re then using in Base as part of our efforts to meaningfully segment out our Core library. so just a heads up.

I’ll speak with my colleague about giving you view access to the files and you can take a look at version histories for the Core library, the Base library, and our new Styles library to see if we can track down if we did something wrong or if there’s a bug.

We originally moved the base components from Core to Base when Base was created last week, so you should only need to look at the version history entries for September 8th and 9th.