How to Build a Design System with a Small Team
Last night my small team and I headed out to do a little networking and learn about Design Systems. Being that is was the buzzword of 2017, we were eager to learn how we could create our own.
We had heard all the wonderful benefits of creating a design system: saving time, reducing debates, collaboration, adoption, and more. I was excited!
All the talks spoke about how to create a design system. However, these were big teams or they had dedicated resources, even a DesignOps team (2nd buzzword of 2017) to build and maintain the design system.
At the end of the evening we left a little discouraged. But we were not alone. During the Q&A session many were asking:
“How can I build a design system as a single designer?”
“I’m the only designer, what advice do you have for me?”
But my team and I decided we weren’t going to let this stop us. We are still going to create our own design system. Before I dive into that, here’s a bit of background.
What is a Design System?
“A design system offers a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.” — Nathan Curtis
Simply put, a design system is a collection of reusable components to tie whole products together.
Many people have written in-depth articles and books on design systems. Here are a few you may find useful:
Style Guide vs. Design System
You may be thinking, great but isn’t that just a style guide?
“A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.” — Nathan Curtis
Additionally, a design system is a bunch of different sized components (or molecules) that can be put together in endless ways to create a series of larger components. Brad Frost’s Atomic Design is the inspiration for component design.
Benefits of a Design System
“The challenge we face today is that tools don’t communicate to each other very well, details fall through the cracks, there is a huge gap between design and engineering and we need to do a lot of manual work to make sure we are always on top of everything.” — UX Bootcamp
As a small team working on B2B enterprise software, we were diving into creating a design system with limited time, budget and resources. I wanted to remind our team of the benefits.
Overall our team would be saving time because of:
- Reduced debate — No need to waste time revisiting design decisions for the same component
- Reusable components making scale possible
- Increased collaboration — improve working remotely and in different offices
I had a selfish reason for wanting to build a design system. I quickly realized, if successful, we could ‘automate’ many tasks allowing us to have time to do something I love, solving user problems! That is the core of UX.
Design System Structure
In order to create a design system, we need to break it down and understand its parts:
A bit of soul searching is involved as well. Some questions to ask when creating a design system:
- How does the system work today and in the future?
- What is our vision?
- What problems are we trying to solve?
- Who does this problem most impact?
- What impact do we want a design system to have on how we work?
How others are attempting to approach this:
How can our small team make a design system?
Where do you start when you don’t have enough resources, time or budget?
1. Don’t start from scratch
“If you wish to make apple pie from scratch, you must first invent the universe.” — Carl Sagan
Our team is reviewing existing design systems out in the wild so we can — as Austin Kleon says:
Many companies have made their design systems public and have even shared sketch files. I have shared a list below. This fact, and the many other sketch resources, makes it a no-brainer to use Sketch as our tool of choice.
Additionally, there are tools out there which can help you quickly create a baseline for your design system:
2. Know what you’re working with
We have decided that it is a must to complete a UI Audit of all our sites and properties. We may have to call in a few favors to get this done. But since it is just documenting what exists, enlisting help from others may not be that difficult. This will be time consuming, but in the end it will be worth it. We will be able to design holistically when creating new components.
This may be useful for learning how to conduct a UI audit:
3. Build as you go
A design system is a living document. Realizing that the work is never done, we’ve decided to jump in and build as we go. As we iteratively work on our projects, we will design with components in mind and will eventually have a design system. Fortunately, there are a few of us, which allows us to be collaborative and “steal” from each other.
Quick tip: Build symbols in Sketch. I know, it seems time-consuming, but once you see the power of symbols you will appreciate the old saying:
“You have to go slow in order to go fast.”
4. Know your limits
Start small.
Some design systems include code snippets. That is the ultimate goal, because it will increase adoption across the company and create a consistent user experience. However, my small team can’t do that. Not yet, that is.
We are planning to start with a sketch file of simple components. Once we are far enough, we will work with our frontend devs to create CSS. Allowing developers to use their ‘weapon of choice’ when it comes to code may allow the design system to live. And with code bases changing on what seems to be a daily basis, keeping our hands out of it may be best.
5. Stay organized
Sounds simple, but with projects piling up and looming deadlines, it feels easier to do things the ‘quick and dirty’ way. Staying organized does take time and is never done, but it keeps everyone sane and reduces the email or slack clutter of files flying back and forth. As we start working on new things using a UI kit that we are going to build with one of the tools listed above, we need to keep track. Otherwise, we will end up where we started — different styles everywhere!
Design document versioning is a dream for all designers. No one product has gotten it 100% right. We are going to give Abstract and Plant a try to see how it can help keep us on track. Working for an enterprise, the only online platform we can use for file storage is One Drive. Google drive and Dropbox are other options if you aren’t restricted.
These are the first steps my team and I are going to try when starting this journey. Fingers crossed we make some headway. I would love to hear from other small teams, even a ‘team of one,’ to learn how they are tackling this challenge.
Design System Directory
As promised, here are some design systems for inspiration or for “stealing like an artist:”
Pattern Libraries / Style Guides
If you found this useful, you know what to do now. Follow me to get more articles and tutorials on your feed.
