How to create design system components

We have spoken before about design systems and why we need them, but to clarify here for the sake of this article, a design system enables you to gather your team around you to work on a project with one shared vision. 

Building a set of design system components that your team can stick to will allow them to easily reuse, amend and blend together design components so that your project evolves much quicker and will be simpler for your team to work on together.

Having a set of design system components will make producing small projects a breeze, and yet at some point should you need to expand and grow that small project, you will have a sound foundation to build on because the original project was built using your core design system components.

Having design components built in this way means they are generic and complement each other, making their reuse much easier – they just fit well together, much like interconnecting pieces of a puzzle.

Choosing your components

To start building your components you should begin with the most common raw materials from which you can then design and build the rest of your project.

So effectively you will be creating your own unique visual language for the project, but this obviously would be based around or be very close to your brand identity.

Your design system will be your set of standards for your design and code. Your design components will act to unify both elements and complement each other. 

It is almost like you are building a library list of codes and designs that you can pick and use in your design, but they all inter-relate with each other. 

Having a set system to draw on will make them familiar to work with and will become part of your design language. It will help to build uniformity across your brand and product range. 

Building your design components

Building up your library (or inventory) of your components can take some time. You will be collecting together quite a lot of colours, patterns, text styles, common coding and other assets which you will use throughout your design project. 

Your library should hold all of the components and features you need to build a complete project, such as an app or website. You can see why this could take some time and dedication to put together!

You’ll have to decide whether or not to build upon a framework such as React, Vue or Angular.

Your design components should include the following elements:

• Mood board and colour palette: This will help you set the theme for your design and give you an idea of what your finished project will look like. For your colour palette, list your Primary, Secondary and Tertiary colours. Don’t forget your Greyscale colours for backgrounds, borders, shadows, lines and dividers.
  
  
• Type scale: You need to use a set of fonts that complement each other as well as look good. You should be able to scale the fonts for different tags. If you are unsure how good or readable a font type will be at different scales, then test out your favourite fonts to see how they will look by using a tool called Type Scale. This can save you a lot of time messing about with font sizes and checking how they look. 
  
  
• Icons: Icons can look great as long as they display the same uniformity across your whole project. You could create your own set of standard icons to use and add these to your component library, or you can use a free icon set pack to save time having to make them yourself. If you do use an icon pack, make sure that you continue to use the same one to keep them uniform.
  
  
• Buttons: A key element of your design component library will be your buttons. Without buttons, your users will not be able to take action and ultimately lead them to buy your product or service. Buttons also act as short cuts so they can progress with a single tap. Your buttons should be easily identifiable and clearly defined in their action. Your button components should include radio buttons, checkboxes and navigation buttons. 
  
  
• Sliders and progress bars: These too will help your user to understand where they are so these should also be uniform and clearly defined. 
  
  
• Other interface elements: such as toggle switches, modals, forms and input fields.

With all these basic elements in place, you can then use them to create more complex elements such as dropdowns, tags and pop-ups that will all follow the same design principles and share the same core components.

Keep it simple – don’t over-complicate

As with any successful design plan, it is better to keep things simple when building your components. While it may be tempting to add many more elements to your library, going overboard with your component inventory can complicate things. It is best to keep it clean and simple so that your resources are all inter-related and act to complement each other. 

By doing this you will be able to build up a sound library of design components that you will be 100% confident of working across all devices, screen sizes and platforms with already tested and proven use. 

It used to be the norm that everything was built on different screens, then broken down into components and reconstructed to work on the medium it was intended for. However, this was a very long and complicated process and each new project would be started over again using the same methods. 

But instead, by building a sound design component library that you can borrow from, you will be able to build new things or expand on smaller projects using modular forms of components that you know will complement each other and will work well together. 

The amount of time and effort saved will be worth the investment of your initial time while building your design component library. This will save you having to go back to scratch to design new products by the page or screen and building them from the ground up. 

If you would like to know more about how using a sound design system can improve your ROI, see our post on design system management: 7 steps to enhance ROI and UX and to learn more about the basics of design systems see: What are design systems and why do you need one?

Our team are here to help, so if you would like to talk to us about our services, do not hesitate to contact us.