An illustration of system design components.
An illustration of system design components.

The complexity of UX design systems

How can we access UI components and instances thematically as designers?

Eva Schicker
6 min readJan 12

--

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)

Example 1: 3 button states in light and dark modes.
Example 1: 3 button states in light and dark modes.

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)

Example 2: A bottom navigation system with each icon in highlighted state, in light and dark modes.

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…

--

--

Eva Schicker

Hello. I write about UX, UI, AI, animation, tech, art & design through the eyes of a designer. UX lead Lelantos Press, NYC UX GA grad. Top writer 5x.