Bite-Size Design System #1

Getting started

Design system

If you have heard of the term Design System but weren’t quite sure what it means, this is for you.

In the past year, I dived deep into the rabbit hole of design systems, and I must say, although a bit overwhelming, they are cool and efficient and deserve more of the spotlight. So, with no particular strategy, I’m here at your service to share some of my excitement by making design systems more approachable with bite-size eye-level written pieces; from a general overview to nerdy deets, while trying to keep it light and short :)

🍪 Let’s get into it with essential 101s:

• What is a design system? A design system is a set of visual decisions and standards that function as the single source of truth. It groups all the elements that allow teams to design, realize and develop a product efficiently.
• What does a design system include? Usually, a system has three main libraries:

1. Foundations — Visual guidelines that include visual references and design principles for color, type, grid, shadow, radius, and spacing.
2. Components — UI components that are used or needed in a system: buttons, cards, chips, checkboxes, and text fields + their variants.
3. Patterns — An advanced system will also extend to layout and template design.

• How much time does it take to build a design system? Setting the foundations of a design system may vary from product to product. Creating a fully functioning system may take a few days and up to a couple of months depending on the product. A design system is a living thing and will continue to evolve and scale-like your product.
• Is it worth the investment? Yasss! A design system is undeniably the new queen of efficiency on the block. Get with it.

We good? Let’s dive a bit deeper :)

Useful links: Atomic Design by Brad Frost, Adobe Spectrum, Salesforce, Material Design, Memorisely, Nathan Curtis