The Power of the BASE Component
Components are the building blocks used to create user interfaces. Development frameworks like React and design tools such as Figma use components to help keep consistency throughout the product and improve efficiency by reducing duplicative work. In this article I go over what components are in more detail, when to use them, how to make them scalable to easily update using a component as base, and the do’s and don’ts of using that BASE component for more efficiency.
What is a component?
Imagine you’re designing an app, starting on the sign-up page. On that page, you create inputs for names, emails, password, password confirmation, and a submit button. When you move onto the login page or account settings page, you wouldn’t want to recreate the inputs multiple times. What if you wanted to update the visual style of your app and have your buttons use rounded corners instead of square? You’d have to find every use case of the buttons and manually change them. These are some of the problems components solve.
A component is an interface element that is reused multiple times. The master component houses the main properties and passes the properties down to each instance that uses that component.
Within this master component, you can add properties that allow you to customize elements. In Figma, these are called variants. An example of some variant types may be:
type: primary, secondary, or tertiary
size: small or large
icon: leading, trailing, or both
active: true or false
Your components may get complex and have many different variant types. This could be a problem if you need to update a common property in all of them (like changing the border-radius to have round edges). You would have to go into each variant and make that update. It’d take forever and you could miss something that could break your variant structure. One way of preventing this is by using a BASE component…
What is a BASE component?
The BASE component is a component that is used as a nested component when multiple components share the same properties. Let’s say you want to update the spacing inside your button. If you used a BASE component to create your variants, you can update the border radius in the BASE component and it would push the change to all the components using that component.
This will also allow for overrides to pass between variations. For example, if I override the label text to say “Enter Name“ and change the state from the placeholder to the active the text will remain the same.
BASE component vs individual variants
There may be times that doesn’t make sense to have a BASE component for your components. If there aren’t any shared elements within your component or the number of base components is equal to the number of variants, you don’t need a BASE component. Sometimes you can get away with just modifying the component within the variant, but other times it’s better to just build a complex variant with everything in it and hide certain sections. This is a lot more realistic to how development work…
How BASE components Help Development
When developers build products they have to build out the entirety of the design and then add logic add functionality. For example, if a developer was to build an accordion, they would build the part that expands too then add logic to hide it by default and show it when the user clicks on the arrow. By having BASE components, the developer doesn’t need to evaluate all the logic in all of the screens to figure out the logic for an individual component. The developer can build out the BASE component and then add logic based on the flows…
In Conclusion…
If you’re going to use the same UI element more than once, create a component. If that component has different elements, use variants. If it has shared properties within those elements, create a BASE component and use customized versions of that instance to build out your variations.
I also want to thank Jonathan, Clint, and Rob for going through the discussions with me… Smartest guys I know and have spent hours talking about this stuff with me…