I created this blog before I started studying UX/UI design (a year ago). In this ongoing process, I thought I could practice design while improving things on the blog. That’s when I decided to create a small design system.I mean small because the pattern library and the style guide are only parts of the design system, as I realized later.
Design systems help to streamline the product design process and make it more transparent and predictable. In this article, we will explore the concept of design systems and key steps to building new design systems.
"A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem." Nathan Curtis [1]
A design system is a collection of reusable components, guided by clear practices, that enables a product team to create a product faster. Think of a design system as a single source of truth for the product teams allowing them to design and develop products.
Many designers find themselves wondering about what they should include in their Design System. Every organization has different needs, and it’s impossible to provide a universal list of elements that every design system should use. However, there are some elements that many design systems share:
Components and patterns
Components are functional elements of design. Think of them as building blocks of your design system. Combined, the components form libraries designers refer to and use when creating products. Patterns are the protocols that provide a form of construction manual for designers to refer to when using components.
Style guides
Style guides are deliverables that focus on graphic styles (colors, fonts, illustrations) and their usage. Styles guides should be created in consideration of brand values (i.e., using brand colors for functional elements such as call-to-action buttons).
Design principles
Design principles are the guiding rules that help the teams to make meaningful design decisions. Design principles reflect the shared beliefs of the design team.
Establishing Design Principles
I created this blog before I started studying UX/UI design (a year ago). In this ongoing process, I thought I could practice design while improving things on the blog. That’s when I decided to create a small design system.
I mean small because the pattern library and the style guide are only parts of the design system, as I realized later.
Simple
Awareness about what is necessary. Provide just enough information to make things understandable.
Meaningful
Thoughtful consideration to people, animal, and the environment when creating content. Purpose and utility are more important than trends.
Flexible
Openness to learning different ways to do things and evolve over time.
Building the color palette and UI Elements
I checked the current state of the colors on the design, and it showed 20 colors variables.
Besides the extense variety of colors, the previous primary colors didn’t provide enough contrast, failing to pass either the AA or AAA Web Content Accessibility Guidelines (WCAG) recommendation.
Naming Convention
I found that there are different approaches to naming colors in a design system (e.g. abstract name, actual names, numbers). I choose the semantic approach (described by the meaning). It thought it could be easy to remember and if I need to change at some point, I'll keep its meaning. I set the colors as main colors, accent colors, a scale of neutral colors and feedback colors [3].
To find them easily on Figma I organized into groups by name then slash and the naming convention.
Typography
There were 3 types of fonts around the blog, plus the font of Medium.I decided to search for new fonts considering:• Brand adjectives• Readability• Flexibility (different weights)• Latin characters• Free for commercial use
For the headings and the brand, I choose Playfair.
For body text and subheadings I wanted a sans serif to pair with Playfair, so I choose Source Sans Pro. Different from the Playfair, this font is a highly-readable body text.
I choose a 4-based scale for sizing the fonts and defined spacing sizes.
To find them easily on Figma I organized into groups by name then slash and the naming convention.
I grouped a column for Mobile, Tablets, and Desktop following the Material Design, thinking I could use it in upcoming projects.
Shadow
There's one type of shadow for the button and four different shadows for the cards. I saved them as styles so I can reuse it on other objects.
Cards
The cards and buttons are elements grouped together and saved as components. To make them useful in different sizes I applied the constraints.
Publishing the library
In this free tier of Figma, I can publish the styles (color, typography, effects) and use in other files. But components (icons, buttons, cards, etc.) can only be shared in a paid plan.
To be able to use all these components in the landing page I created pages inside this Figma file.
Here is the final look of this small design system.
Quick Summary
By doing this project, I set some constraints and principles that can help me to save time and increase the consistency of the blog in upcoming projects. I could learn a bit more about components, nest components using Figma, and about design system while improving my blog. It was challenging when I saw the vast array of options that involve a project like a design system. There are many tiny decisions to make and I focused on what was good for this moment and I'll improve it over time.