In the example of this tab navigation component, you can easily switch states to display only text, icons, or both icons and text. You can find these states by selecting any component and then navigating to the Component section in the Properties Inspector.
In addition to states, we can also swap any components that are nested inside a main component regardless of their size or naming structure. Once you have any nested component selected, you can drag any component in your assets on top of the selected component to easily swap it out.
Combining these two features together gives us greater control over our components and enables us to keep our assets organized better by storing these different versions inside of states rather than having to create multiple component versions to reflect each state we want to use.
When you want to make global changes to components in the Library, it’s important that you’re making these changes to the main component and not any instances as any changes applied to an instance will not show up on any other instances. To understand whether you’re working with a main component or an instance, you can select any component in the canvas and discover either a green filled diamond or a hollow diamond on the top-left of that element.