7 tips for creating a design system
Creating a design system can be challenging. Here is a collection of tips aimed to help you get started in the best possible way.
1. Be agile with Kanban and continuous delivery
The design system team needs to be able to adapt really quickly. The turnaround from a new request coming in to a solution being pushed out should be at an absolute minimum. Locking down the team in a 3 week scrum sprint is really bad. Rapidly changing requirements would then require you to repeatedly change the spring on the fly. A much better solution is to switch to Kanban. This is a significantly more agile development process where tasks are just in a prioritised order and there is a focus on completing tasks, in that order. A new and critical task could then just be added at the top and would be addressed as soon as possible. This will allow the team to change their direction almost instantly if needed. This pairs well with continuous delivery where each single merge to master is published using the semantic versioning system. This will help deliver value as fast as possible, while preventing breaking changes from affecting existing solutions. Semantic versioning gives the control back to the developers that are using the design system.
2. Do not support Internet Explorer 11
2020 is the year when you can finally stop supporting Internet Explorer 11. Usage is at an all time low, and Microsoft is slowly starting to pull support for this dead browser. Supporting IE11 in 2020 will mean you will lose out on critical features that you need to create a great design system. This includes CSS variables, Grid and Flex. CSS variables will allow you to define at the CSS root level all your colors, spacings, shadows and any global CSS value. Those ready to use values will then be inherited by any element in any system that uses your design system. This will make it easier than ever to use the correct color and spacing. You will also gain other benefits by dropping IE 11 like web components, and everything new to HTML, CSS and JS over the last 5 years.
3. Consider using design tokens
This approach for a design system expects all systems to in some form run HTML CSS and JS. This assumption holds true for websites, but not for native mobile applications. This is a problem. The design system and component library can then be the single source of truth. One partial solution to this problem is design tokens. This is a layer of abstraction before the CSS core. Important aspects of the design system get encapsulated as a token. One for font, one for spacing, one for shadows and so on. These tokens become the source of truth and are used as a basis in the CSS core, and mobile applications. This is still not optimal as you have to create the component library for web, iOS and Android, but is better than no standard.
4. Consider using Web Components
Web components is an umbrella term of the technologies that allow us to finally write reusable components on the web without any framework.
Web components have become a real alternative to the big frameworks and you should consider using it for your component library, especially if it’s not too big. The standard is low level, which means more work for the same features compared to for example Angular, but it gives you more control. It also gives better performance and bulge size, as long as you do a good job when writing them. It’s possible to add a web component framework on top like polymer to make them easier to make. Making your component library as a web component will guarantee that they can be used in any framework. I have added a video at the end of this blogpost to help you understand web components better.
5. Use SCSS and Typescript
Sass is a CSS preprocessor that makes it easier to write and maintain CSS, especially in larger projects. A design system will benefit greatly from what SCSS provides, and it also helps with giving a good way of structuring the application. SCSS providers a way of creating loops, functions and simple programming in your CSS (As long as the result can compile to “dead” CSS) You should use CSS variables over SCSS variables as CSS variables are dynamic.
Typescript adds a lot of features on top of Javascript like classes and types which will greatly help you when making the component library. You will have significantly less runtime errors with the type checking system, and you can use esnext features before they are ready. You can even go as far as enabling strictNullChecks which forces you to explicitly handle null and undefined. This will almost completely remove any x of undefined errors in production.
6. Invest significantly in documentation, and marketing
A design system needs to be easy to use. It needs to be easier to use than just making something yourself in any application you are working on. Your users should want to use it. A great developer experience is therefore critical. This means that documentation, getting started guide and your marketing needs to be top notch. A new solution should be able to start to use the design system in minutes. That’s why Angular semantics is so important. One command to get started, with everything being set up automatically.
7. Go open source
You are standing on the shoulders of giants. Most if not all of your dependency to the component library is already open source, and you should give back. Give the world another great example of a design system. Another good reason is to reduce the barrier of entry for any team using the design system. Being able to look up the source code easily can be a gamechanger. This is not so they can steal it, but so they can understand more of the internals, and even get inspired to create more elements with the same high quality.
Conclusion
So that’s it, I hope this guide will help you create the best design system possible, and you will join the design system revolution. I have made another blogpost on design systems last week if you want to know how to structure one: