Design System
In my leadership capacity, I spearheaded the creation of design systems for two different companies. Initially, these companies possessed basic style guides and components, but they lacked a formalized system. Here are the key steps I took in these projects:
Leveraging Figma's variable capabilities, I optimized the design system's versatility. This involved standardizing elements such as primitive and semantic colors, radius, effects, and spacing.
I developed complex and customizable components to streamline the design process. For instance, a single button could be effortlessly adapted into 85 variations, eliminating the need for designers to search through numerous components.
To ensure consistency in layout across various elements like pages and cards, I implemented content slots.
Documentation was a crucial aspect of the process. I not only provided guidelines on the correct usage of components but also offered comprehensive documentation on utilizing variables and component capabilities. This was particularly beneficial for designers who were newer to Figma.
Collaborating closely with developers, we began transforming the design system into fully developed components hosted on Storybook. We are actively exploring advanced features such as Code Connect to enhance the integration between design and development further.
Below is an excerpt from a workshop I designed to kickstart the establishment of a design system within teams.
The Neilsen Norman Group lists the following benefits of establishing a design system.
Design (and development) work can be created and replicated quickly and at scale.
It alleviates strain on design resources to focus on larger, more complex problems.
It creates a unified language within and between cross-functional teams.
It creates visual consistency across products, channels, and (potentially siloed) departments.
It can serve as an educational tool and reference for junior-level designers and content contributors.
As part of my role, I designed a workshop aimed at equipping teams with a comprehensive understanding of the importance and purpose behind creating a design system. Moreover, this workshop serves as an initial step in evaluating the team's existing system and establishing a roadmap for its advancement. It comprises informative sessions, interactive discussions, and practical exercises to facilitate learning and engagement.
Some of the topics we cover are:
Design Principals
Perceptual Patterns
Functional Patterns
Code and your design system
Shared Language
Getting Buy-in
I’m not sharing the presentation here. You will want to steal it. Let’s talk.