Design Systems

Administrator and Contributor.

Approach

During my experience at Huge, I have learned frameworks to help clients and brands create systems that uphold promises of consistency and standardization in digital products. What you are about to see is an example of a hypothetical mental health care app, where I want to illustrate my workflows in terms of design systems.

Governance

Creating a flow or a scheme can help teams set expectations and understand the roles and processes of the design system. For example, how to request a new component and who serves as an admin.

Governance and methods to lead the system

This scheme is one of many ways to lead a Design System. In this case, we defined clear roles and responsibilities for everyone involved, establishing a shared understanding of each person’s role within the system and a consistent process for submitting design system contributions.

Prioritization approach

Throughout this journey, using Atomic Design to prioritize the development of foundations and components has helped us establish a smoother, more efficient workflow.

Foundations and tokens

Establishing a variable system based on tokens is an approach that helps teams set modes at a high level in a simplified way. This approach is used in the foundations of the system that contains colors, typography, shapes, corners and spacing.

Responsiveness

Based on a min and max framework, variables can also be used to create scalability in breakpoints, setting the rules for sizing options.

Flexible components

This technique helps teams add elements unique to their vertical without detaching the component. Additionally, these flexible components can be built using slots to provide more flexibility.