Overview
MC3 serves a diverse clientele, each with distinct brand color palettes. To seamlessly integrate these colors into our new UI system, a method leveraging Figma’s color variable capabilities has been devised. This enables designers to promptly update the system’s “primitives,” thereby priming it for implementation in new applications.
The systematic organization of all assets within the library ensures ease of comprehension for designers utilizing the system and facilitates the tracking of deeply nested elements.
Furthermore, essential human interaction details, such as “target areas” for mobile UX applications, are strategically embedded within the library assets. This provides explicit guidance to developers in constructing the CSS Box Model.
Crafting a user experience into a design system.
Because a UX or UI designer, graphic designer, and art director are the main users of the system, it is important to recognize that ease of use, clarity, and organization of the library assets should be the guiding principles of my approach when building and publishing.
Component Documentation: Within each component in the Figma file are details that outline usage and specific guidelines. These are embedded into the library component and shown to the designer when adding any instance to the board.
Interactions/Patterns: Detailed and consistent micro-interactions are built into each component for design patterns and uses.
From Styles to —> Variables to —> System component.
Typography Variables: Each font used in the system is tagged with the variable corresponding to the main style guide. From the master specimen, we create the system variables and map them to the fonts, which eventually serve as the “token” or the source of truth for the dev team.
Embedding “Tap Target”, Human Interface Guidelines.
Assets that are used on mobile devices have a sizable press dimension of at least 44px and in most cases 48px. These are critical HIG (human interface guidelines) requirements that must be built into the component starting at the atomic level.
Atomically designed components.
Atomic-level design is considered whenever possible when building components. It is an intelligent way to construct assets in an extensive library, especially for situations that use nested elements like an icon that, at some point, may need to be updated or edited. If an atomically placed element like an icon is updated at its root level, the update can be cascaded across the system. This allows scaling in a design system that must adapt to the growth demand as it evolves. Taking the “Input Text Field” as an example, here, the “cancel” icon is placed into a deeply nested layer of the “active” component state.
