Why do you need to build an Design System
UX/UI design is a field that evolves more and more as time passes by. Every year hundreds of thousands if not millions of new websites and mobile apps get launched. Every single website and mobile app has numerous screens and all of them require top-notch design work. That means an enormous amount of hours is invested in order for all those designs to be delivered.
Figma is one of the most used and useful tools in the world of digital product design. At Bebabit Figma is also our go-to tool for building User Interfaces. It's a very powerful tool, but not all designs are created equal. This is something that becomes evident as the project evolves and starts being more and more complex. Building a Design system from the start drastically influences the maintainability of the designs, consistency of the product, and overall speed at which new features can be designed and launched in the future. That's why, before jumping in and building the UI components and screens we always start with building out a design system. And there are good reasons for doing so. Before diving deeper into the importance of the Design system we will need to answer what is a design system and how to build one?
What is a design system and why is it so important?
The short answer would be: A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.
The design system serves you as a guideline for your whole design throughout the project. A design system is here to help you out, but it will only be as efficient as the team who is building it and using it. You need to take constant care about it, making sure that everything is always up to date and always upgrading it, if there is room for it.
The main advantage of design systems is their capability to replicate designs quickly by using premade UI components and elements. Companies can continue to use the same elements over and over, decreasing the need to reinvent the wheel and thus risking unintended inconsistency.
Design systems provide a single source of components, patterns, and styles and unify disjointed experiences so that they are visually cohesive and appear to be part of the same ecosystem. As a bonus, any major visual rebrands or redesigns can be managed at scale through the design system.
How to build a design system?
There are generally three approaches to using a design system:
- adopting an existing design system
- altering an existing design system
- creating your own custom design system
There are pros and cons to each, but generally speaking, the more custom your design-system solution is, the more time and money it will take to implement. So using an existing design system is the lowest-cost approach and requires the least time to implement.
Investment in a custom design system will be worth it if the organization has particular needs that cannot be met by already existing design systems. In the long run, you may be better off creating your own design system anyway. Be sure you know what your organization needs before you embark on a design system journey and evaluate the tradeoffs that come with it.
Building a design system in Figma
Obviously, we would need to write a couple of extensive books to cover all of the details about building a Design system. Here we will just concentrate on few most important elements of every Design System.
- First build a strong colour palette
When you start creating your Design System in Figma, you want to start with your Colour Palette first, and aim to keep your Base Colours to a minimum where possible, maximum 3 variations.
Of course, it makes sense for the purposes of flexibility to then expand on those Base Colours by offering varying degrees of lighter and darker variants.
Now you could go ahead and create the varying Tints and Shades from your initial Base Colour by tweaking the Saturation, and Lightness values from the HSL option inside the Colour Panel in Figma, but that’s a time-consuming process and might not be a necessary one for you.
- Give yourself enough typography options
When you are on the typography options step, make sure you have it all covered. Desktop, mobile, tablet. Follow the example of your colour palette. Keep it simple but diverse enough so you have it all covered.
- Shadows and elevations
This is a very important step to determine since you will want different components of your design to be highlighted and that way enrich its importance, and that’s where shadows and elevations come in. Having good shadows can make your design sleek and intuitive.
- Icons
Every design system needs to have it’s own icons. Icons are a crucial part of our designs, texts and animations nowadays and icons are considered one of 4 core components to an excellent design system, along with the other above mentioned ones. Find yourself icons that you like and have them unified all across your design.
Building the components
A powerful design system has a lot of well thought components. It is the biggest part of the work and definitely not an easy one. But there is some good news, and that is, when you are done with designing your main components, it’s smooth sailing from there.
Always start with the smaller components first, it will be much easier to implement them that way. Buttons, avatars, rating bars, dropdown menus, placeholders, progress bars, sliders, modal windows and many more are components where you need to pay a good amount of detail to. All of those components require that they are made in all of their possible states, but all of that hard work will pay off later on in the project, trust me.
It is pretty obvious that creating your design system in Figma is really, really time consuming. So there’s the question : is it worth it? And the answer is: definitely yes!
After having your own design system, you kickstart your project real fast and can build new features within a short period of time.
If you would like to learn more, do check out the following resoruces:
