The complexity of UX design systems
How can we access UI components and instances thematically as designers?
--
The concept of the ‘design system’
Let’s first look at the meaning of each word:
de·sign /dəˈzīn/ = a plan or drawing produced to show the look and function a product before it is constructed.
sys·tem /ˈsistəm/ = a set of things working together as parts of a mechanism (ie, drawing/design) and its interconnecting network.
In UX, a design system is a micro- and macro eco-system of primary design elements, or parent components, and their variants and instances, and secondary accessible icon, illustration, and animation libraries.
Design systems are also referred to as UI kits, UI sheets, brand guidelines, or sticker sheets.
Interconnected themes, such as navigation components and their interactions, typography styles, overlays, image libraries, call-to-action items, and other shared practices are organized as a system and made accessible to team members and collaborators.
This can be illustrated as a micro-example with button states. We’ll set up a sample micro design system for a fictional app called the Blue Coffee app. Example 1 of the Blue Coffee app shows foundational design system of UI components for button states in light & dark mode.
Example 1: Buttons (Blue Coffee app)
In example 1, the button design variants show how the button states [basic—tap—inactive/light & dark mode] are rendered. They form a micro-part of the design system at large.
Example 2: Bottom nav (Blue Coffee app)
In example 2, we can see how a basic 3-element bottom nav is organized with each tap-interaction which is emphasized in a turquoise color. This bottom nav setup is…
