Welcome back to the second part of my series of blogs about design systems. In this blog, we will talk about "Base components".
What is this base component?
Base components are taken as the basis of other components. That is, instead of creating all the options we need one by one, we prepare them by making changes to one component. This, in turn, makes our work easier and smoother.
But how do we prepare this component so that we get other options by changing it? The answer to this question is in picture 1. As you can see from the picture, we collect all the elements we need in the base component (icons and text) and create options by hiding them using instances.
Base components are mainly used to prepare components with many options.
For example, buttons, inputs, cards, etc.
What is an instance? How was the icon and text in picture 1 hidden? 🤔
Let's explain this briefly with an example:
You can search for Boolean property for more information. 👀
Why should we use base components? 👾
The answer to this question is simple, reduce the workload, simplify things and manage everything from one center.
Figure 3 shows a version of the button component in Figure 1 made without the use of base components.
There is one downside, Phantom instances… 😮😮💨
Unwanted variants are also created when variants are instantiated. For example, we can show buttons consisting of 2 icons or spaces:
But how do we destroy Phantom instances? We can't. We cannot delete it because it was not created by us. We can inform the entire design team about it to prevent it from being used. This will prevent the use of Phantom instances.
Finally
The use of base components depends on the team you are in, the size of the team, the type of project, etc. may vary according to You may or may not use it in consultation with your team. If you are the only designer, why not? 😌
Have a nice day and see you in the next blogs 💜
All visuals are made by me and must be credited when used.
And if you've come this far, here's a gift from me to you ❤️🔥 in this music