A Low Level Introduction To Design Systems

Superpowers is learning to design at scale — Mudia Imasuen.

For me, dreams and ideas are like vector files. Make of that what you will.

Alright then, let me explain. The amazing thing about vector files is that they can begin small and be scaled up to any size without any distortion in the quality. Whenever I begin a project, I arm myself with that thought.

You should always design like the product you are working on is going to be used by a billion users, sure it may look like only a handful of people are going to use it for now, but hey, where is the fun in that?. Having a billion users in mind means more features and consistency in design during the growth process.

In all honesty, design at scale can be a headache. For instance, your product has 10 pages with flat buttons and a corner radius of 0px, you are then asked to create new pages and features with rounded buttons, and this rounded button design should reflect on all pages old and new.

Yeah in the past, this was the definition of hell for me. That could be over 200 buttons. A few years ago when I was still creating web and mobile interfaces with Adobe Photoshop, I would spend the whole night just adjusting the corner radius of all the buttons. By morning I could be told to change the colour of the buttons and all header font size.

This was my life for a long time

Imagine how this felt! I for one hate monotonous work, so it would basically mean spending an hour to find the least depressing playlist and then going through the gates of hell.

Now, I am writing on design systems from the perspective of a tool, but keep in mind this can be easily applied in front end web development. In fact, having the ability to work with component-based frameworks or even a basic understanding of Markup and Style(HTML + CSS), means you are well on your way towards building with a design system.

So back to the tool, I use Figma as my primary design tool. The flexibility it gives and also the ability to collaborate is second to none for me. That being said, the best thing Figma has done for me so far is the provision of component and styles. It is pretty straight forward.

An example of a component is a button. All you have to do is to simply design the button types that are important for your project….

Oh! by the way, this is where I should mention that creating a component-based design system takes a lot of work and thinking, but saves you several hours of monotonous crap in the future.

…..yeah, where was I? Button. So think about the button sizes you require in your project, the colour and also the border radius of your choice. All you have to do is design this once and then save each button as a Master Component.

Now you have gone ahead to use this button in about 10 pages of your web/app UI design. Along the line, due to a stroke of bad luck or a more intelligent source of inspiration, you realize that material style buttons would make more sense for the design(or the client decides that material buttons are more appealing and in sync with their brand).

What do you do? Would you go through 10 pages and change all the button styles one after the other? NO!! All you have to do is go to the master component and make the required modification. There! You just condensed 1hr of work into 2mins max.

The same goes for making instant modifications to all the colours and fonts on the entire project.

Well, a picture is worth a thousand words, I would be showing you a few to quickly explain what you just read. So do the math.

A button

This is how you create a style. It gets saved across your entire project.

Styles can also be created for text(I have created a style for button text

Select the text and background and then Ctrl+Alt+K to create a component

This is all you have to do, you have now created a component. Now when you start designing, you simply have to use the button component (which you would find within the component library) in the parts of the design that requires buttons.

Figma comes with a component lib, which can be quickly accessed with Alt+2

Easy as pie, now by simply editing the master component button, I can change the style and shape of the button.

Quickly changing the colour of the button and the text colour from the styles panel

I already mentioned that design systems take a lot of effort and planning to create right? Well, below are images of a design system.

Colours, Typography and Shadows

Buttons & Cards

Takeaway

Design system is not a shortcut to quick and easy design. Alas, it is a process that requires you to think things through before you dive fully into creating (designing) the product. This means putting in a lot of work in the initial stage would save you a lot of headache and sleepless nights in the future.
One cool practice is to even create components while carrying out low-fi prototypes on Figma(or any tool of your choice). Go ye into the world and create.