Why I used a third party UI kit to build a design system
In my previous job I was leading the design system team. It was back in 2018 when we started designing our first components, based on Brad Frost’s Atomic Design methodology. It took us a good couple of months to figure out how to design the components and at least six months to get the first components into production. Everything we did was custom. These were different times and of course design systems weren’t a commodity.
Regardless. It was a tedious job. With my new job, however, I knew this wasn’t the best strategy. This article is about how I ended up designing zero components myself by downloading a third party UI kit from the Figma community.
The use case
For my new job, I am working at a programmatic advertisement company, and we are building a self service platform to manage job ads (campaigns). We are a scale-up and more than anything — go to market is the highest priority.
We were given the assignment to build a Saas platform from scratch. In other words: no legacy design and code.
This brings me to the following disclaimer. This article is for designers that..
- start designing a design system from scratch
- want to move from an old to a new design system
- want to have inspiration on how to setup components in a structured way.
Choosing a UI kit
In my first month we conducted several user interviews to get an understanding of the user needs. This gave me a good opportunity to figure out how I wanted to set-up the design system. Since I already knew I didn’t want to build a custom design system, I started looking for an existing UI kit in Figma. How did I know that I didn’t want to build custom? There simply was no time for that.
Untitled UI
I did some comparison and ultimately installed the Untitled UI kit. This library was rich (a bit too rich 🤓) with components and had excellent documentation. It provided all the components I needed for our platform.
Next to that, our front-end developers wanted to start using Tailwind UI. This is a front-end UI kit that provides a huge set of components in various technologies (the developers went for ReactJS).
It was almost by accident, but the libraries matched super well. A lot of the components are setup in the same way and we knew this was going to help us in the hand-off from design to development.
Lessons in using the UI Kit
Long story short: I bought the UI kit and started working with it. Now almost a year later I have some lessons learned that I want to share with you. Some are super practical, some are a bit more abstract.
1. Let go of the idea that you are the hero designer
You don’t have to be that designer to impress the others with your skill level to create components. I know that there are design systems that are so advanced, that being able to setup components in Figma is a must have. But if this is not the case, ask yourself what is most important for the team and ultimately for the business. At the end of the day you want to ship a product to make users happy and for the business to generate revenue. Creating your own components takes a lot of time. Time that you could also spent with focusing on understanding your users and providing them with a solid user flow.
2. Duplicate and clean the file
Disclaimer: this is my advice, not the advice from the author of the UI kit itself. You could download the UI kit and start adapting it to your own styleguide and preferences. I tried this at first, but to be honest, it felt a bit overwhelming. I didn’t know how everything was setup! So the moment I changed one thing and something else broke, I was completely stressed.
So I duplicated the file and stripped everything I didn’t need. This gave me a better feel with the UI kit and more overview of what was going on in the file itself.
3. Start adapting the styleguide first
Once you have duplicated the UI kit you can start stripping the parts you don’t need. How do you know what you don’t need? Gut feeling. Just follow your instinct on what you expect you will be needing. You can always add them later by copy/pasting from the original UI kit.
Colors as example
Every design kit has base colors, primary colors and functional colors. But the list of colors in the original UI kit was way too extensive for me. I didn’t need that many. So I stripped everything I thought I didn’t need. Below you can see the result.
4. Continue with the components later
Of course after the styleguide you continue with components. I reduced the list from 55 to 27 components. Since you already updated the styleguide, the components will take over that styling automcatically. The only thing you need to do is adapt spacing when needed, and remove the sizes you don’t need.
Buttons as example
Like with the colors, I was able to reduce the amount of variants from around 800 to 120. It sounds like a lot, but taking into account all the states and variations, is actually not that big of a deal.
Conclusion
There are multiple conclusions that I can draw from using a third party UI kit. Below are a few points that summarizes what benefits it brought me:
- Faster delivery — It increases your speed to deliver components. I cannot put a number to it, but imagine you need to design all the 120 buttons and its variations manually.
- Higher quality — Third party UI kits are built and maintained by specialists. In this case Jordan Hughes who did an amazing job in building this library. Quality is maintained and updates are provided.
- Better alignment with front-end — Since most UI kits are based on web conventions and front-end UI kits, the hand-off to developers is quite easy. If you would design all components manually, chances are bigger that you will miss out on a lot of details that front-end developers need.
What about creativity?
I can still imagine you are left with a feeling that creativity is being reduced to zero when using a UI kit like this. I experience the opposite, for the following reasons:
- In my belief users don’t care about the effort and time you put into designing components. They just want them to work as a whole.
- A user experience is not about the components, but it’s about the combination of components that make it an experience. It’s about the user flow. Saving time with components gives you time back to spend time with the user and to work on the flow rather than the individual components.
Did you like this article? Please feel free to comment or clap! Do you want to learn more about design documentation and how to work together with front-end developers, I can highly recommend the article below.
