Member-only story
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…
