Generally speaking, a design system is kind of a guide. It helps development/design teams build products which are consistent in terms of appearance. Basically, its scope depends on the design system itself. A perfect one contains basic typography, colour themes, layouts and of course designed components. These components help development teams to build consistent products in a smooth way. How?
Imagine that you’ve built several products under one brand. Each of them was built in different circumstances: time, team, goals etc. As a result they look completely different and the users of your products are confused. They see all the different colours, fonts, components. They do not connect any visual part of your products with your brand, so they won’t recall it. You are probably asking yourself: “What should I do to avoid that?”. “How to maintain a consistent brand communication between different products?”.
And the answer is: create a design system. One of the most important aspects of branding is to keep a coherent design, and design systems are a good foundation for achieving this. As a result your users will remember your brand the way you want them to.
By having a design system internally you will:
At Netguru we use a design system based on React Native for a smooth mobile development process. We have come a long way, checking out the available tools and open source libraries as well as building our own solution. Now we want to share our knowledge to help you to simplify the whole mobile development process and improve code safety:
A typical design system contains dozens of components and an overall style guide. It would be very hard to use design system elements without any description of basic usage. The most common solution is to use a custom webpage or GitHub Readme/Pages. At Netguru we support both options. Well-written and well-designed documentation helps developers to understand each component better.
In addition to documentation, an example app is the second thing we do in parallel. In most cases it is a simple app with navigation to switch between the specific components. If required, we can also align the example application to the client’s requirements.
React Native as a technology has its own limits. We have faced a couple of issues during design system implementation:
Besides React Native, Netguru has worked on design systems in React. It is a big advantage to have the same design system implemented on mobile and web: it allows multiple platforms and products to be really consistent in terms of looks and behaviour of components.
A design system is a really powerful tool. For a React Native developer, well-built components and style guide collections help in daily development. They speed up development time and improve app stability. It is recommended to have a design system, especially if you are building many products under one brand.