[0] “What/Why/How” and "When” of Design Systems 🎨

A Design System is like a collection of elements and set of rules (as in guidelines) which are required to make a project visually consistent and frontend scalable. It has a set of components, properties and rules created by designers which can be used for implementing frontend for applications and websites.

A Design System is really important to make the UI elements more consistent, make a UI more scalable and improve the User Experience. Imagine creating a button of same style every time with some minor changes. Sounds like a terrible approach, right? Worse when working on a web-application that could have more than 100 buttons. In conditions like these, having pre-designed components is a good approach.

Starting a design system project is a real tricky task. You might have to consider a bunch of factors such as UX Principles, UI Necessities, Business Logics, Consumer Experience and Feedbacks, Developer Experience and the list can increase on the go, forever. With so many of these parameters, it’s good to start slow and small. The best way to start is by listing the UI requirements. Create a list of components which are directly affecting your product such as cards, buttons, typographies, colors and other potential components. Applying design principles such as Atoms > Molecules (atomic design) approach will make your project more scalable and understandable for other developers & designers.

Usually, what companies and individuals do is that, they first focus on implementing a standard UI (frontend) of their product and focus more on the backend side. After spending some time on backend and gaining some potential users, they then start focusing on their design system. Some of them don’t even do that, they totally depend on other utilities such as Ant-Design or Chakra UI. Which is great, but still needs to be more modified according to the business logics and UX principles.

The best time to start is from the beginning of the project. Start with small and most required components and then iterate and improve on the go. A Design System is a living document which is always under design, development & documentation process. Thus, don’t focus on making the best design system for your product at once, instead keep updating it from small to more complex components. It will become better. 🚀

[1] Start with designing the components

Before writing the code for your components, it’s better to follow design-first approach. Designing components will give you much flexibility to experiment with your components and create better UX flows without worrying about large chunks of dummy-code. Make sure to keep the design maintainable and understandable by other designers and developers. You can use Figma, Adobe XD, Sketch or any other design software to design components. Focus on creating all the potential use-cases of a particular component in order to write better code for it.

• Start with basic components and properties. ATOMS 🤏

  • Atom components usually contains basic properties such as Color Palette, Typography, Spacing and Alignment Rules and other elements used to design more complex components.
  • Color Palette: Creating a color palette from scratch can be real task but very helpful for your projects. It gives you freedom to experiment with your application colors according to your business logics, the solution you’re providing.

  If you’re not comfortable in creating a color palette from scratch specifically for your application then you can also use third-party utilities such as TailwindCSS, ChakraUI, Bootstrap and many other packages. You can personalize the color systems according to your convenience. - Typography: Every website, application has a set of fonts. For some instances, in which the end-users are non-developers (in most of the cases), you should add 2 similar type of fonts for your typography system. If your application is used by developers then it’s good to have 2 fonts for all the text-based content and 1 monospace font for code-snippets (if required). Adding too many will fonts make your application look chaotic. Some of the best typographies you can follow: https://99designs.com/blog/tips/font-pairings/

    My personal favorite is **Inter + Manrope** 🤌
  

  • Spacing and Alignment Rules: Having a properly spaced UI makes the user feel less confused and more comfortable while using the application. Aligning different sections properly is mandatory. If a grid is chaotic, it is going to be tough for the users to understand or find certain section/content on the screen.

On Figma, naming your components properly is really important to keep a track of what you’re crafting. Let’s say you’ve 3 major and multiple minor variations of the button components, on the basis of color, sizes, shape etc. Rather than keeping the naming convention like (Button-1. Button-2, Button-3, Button-main) you should follow the conventions given below:

• Usually, every button component set has variations on the basis of visual hierarchy. Commonly, named as Primary, Secondary Buttons. Some even have a Ghost/Text Button. Thus, in such as condition having the naming conventions like (button-primary, button-secondary, button-text/button-ghost) makes a lot of sense.