I created a simple design system to demonstrate my skills and knowledge.
Objective:
Showcase what I learned from taking a design systems bootcamp by creating a design system from the ground up.
My Role:
UI Design/Architect
Tools Used
Figma
Design System Bootcamp
I recently wrapped up an 8 week design systems bootcamp through Memorisely. This project aims to showcase some of what I learned.
Why Build a Design System?
Consistency Across Product Teams
Establishing a design system allows every team member to draw from a unified source, ensuring consistency across projects and teams.
Scalability
With a design system in place you can easily add new components and patterns and any changes made at the foundational level can permeate throughout the system.
Speed to Prototype
Teams can easily build new screens from a library of approved components. In many cases, teams can skip wireframing entirely.
Shared Language between Design and Dev
Design systems are built upon a shared language between developers and designers, creating a more seamless hand off.
Establishing the Foundations
I began creating the system by defining the foundations. These are the building blockd that will be used to create the components.
Primitive Color Variables
The first thing I needed to do was establish my primitive color variables. This step takes the raw color values and begins to give them meaning.
Color Categories
I determined that the minimum number of color categories needed for the interface would be neutrals, accent, and three feedback colors: success, warning, and error.
Tints and Shades
I then created a range of tints and shades for each color category to be used across the system, organizing them from light to dark using a 100-800 naming convention.
Giving myself a large range of tones and shades to work from ensured that I would be able to create hierarchy across different surfaces and content.
Aliasing Global Colors
Once the primitive colors were in place I was able start aliasing them into global color tokens to be used within my interface. This step involved taking the basic color variables and assigning them to more specific meanings.
This gives the naming a common language, ensuring everyone is on the same page for easier collaboration.
Color Token Naming Convention
All my colors are classified as either background, content, or border. Content is for text and iconography, background is for anything with a surface (e.g., pages, buttons, cards), and border is for anything that needs a line weight. This naming convention covers all necessary colors with just three categories.
I also incorporated dark mode variants for each token, for a seamless toggling between light and dark modes.
Checking Color Contrast
While establishing these colors, I also created contrast grids to check the accessibility between surfaces and content elements.
Establishing the Text Styles
Next, I established the type styles. I classifying them as either Title or Body. Title is for introducing pages and sections, and Body is for paragraphs, component text, and labels.
All my line heights used 4px increments, this was to maintain a 4px rule in components.
Starting an Icon Library
I created an icon library to use within the components. Instead of designing one from scratch, I pulled from an existing library. I included three different sizes to be used throughout the system.
I turned each icon into an individual component for easy instance swapping in Figma.
Creating The Primitive Dimension Variables
The purpose of dimension variables is for speed and consistency. I standardized my dimension values to multiples of 4px, creating a consistent 4px grid throughout the interface.
I also added a 2px and 6px for more granularity.
Aliasing The Dimension Variables
Next, I aliased my primitive dimensions for padding and margins, using a simple small-to-large naming convention to create a common language that everyone can understand.
Padding
Margins
Border Radius
Creating the Components
With the foundations in place I could now begin creating components pulling from these tokens.
Button Types
The first components I created were the buttons. I designed three types for the interface: rectangular, circular, and pill.
Button States
Each button is also given state variants. These states communicate the status of the button.
Other Variants
The buttons also contain other variants like leading icon/trail icons, button size, etc.
Above is a grid of all different variants for the circular button component. This was made using a plugin called Propstar.
Button Anatomy
By expanding the button anatomy you can see all the different tokens involved.
Layout and Spacing
The spacing also uses dimension tokens.
Creating Other components
Following this same process, here are some other components I created.
Creating Molecule Components
Once I had created my components, I could start creating molecule components. Molecules are groups of components that function together as a unit.
Login Form
Modal List
Ready to build
The tokens and components are now available to build new flows for the entire team and any change made at the foundational level will permeate throughout the entire system.
Darkmode
The system can easily switch between color modes since multiple color variable modes have been put in place.
