Component groups

Context

As our component library grows, it’s important to maintain a clear and understandable structure to ensure components are easy to find and use. Properly grouping components under appropriate headings will improve organization, identification, and usability.

Problem

Without a clear grouping strategy, components may become difficult to locate, leading to inefficiencies and inconsistent usage. Misplaced or poorly categorised components can confuse and hinder the development and design process.

Proposed Solution

We propose a system of functional grouping: organising components based on their functionality.
Each component group will have a description that helps consumers of the component library understand the purpose of these components.

Using this method will allow:

creators to easily categorise and group their components accordingly

design consumers to identify components according to their required needs and use cases

code consumers to identify components at a root level that match what is in a design

Key Considerations

Consistency: Ensure that all components are grouped logically and consistently across the Component Library Package and Figma Component Library.

Usability: The grouping should make it easy for designers and engineers to find the components they need quickly and understand where to look for similar elements. It should also allow them to know where to place new components.

Scalability: The structure should be flexible enough to accommodate new components as the library grows.

Flexibility: As the component library grows and changes, we may need to make decisions about creating new or rename groups as well as moving components between groups.