Design System as a Base of Good Frontend - Experts Zone Talks #6

Meet Experts Zone Talks with frontend developer Jakub Leszczynski! Today we will talk about design systems as a base of a good frontend.

In the #6 episode about design system and storybook you will find:

• 00:00 - Intro
• 00:39 - A few words about Jakub Leszczynski
• 00:52 - What is a Design System?
• 01:42 - Does every business need a design system?
• 02:59 - What are the pros and cons of design systems?
• 07:00 - How do you use design systems as a developer?
• 08:29 - Storybook: what is that and how to use it?
• 09:41 - How to create a design system?

Transcription

Olga

Hi, my name is Olga and this is Experts Zone Talks. Today, we'll talk with Jakub about design systems. Are you ready?

Jakub

Yeah, sure.

Olga

Let’s start. Can you please tell us a few words about yourself?

Jakub

My name is Jakub. I’m a front end developer at Frontend House, and thanks for having me.

What is a Design System?

Olga

That's ok. I'm glad to see you here. So today we will talk about design systems. Could you please tell me what the design system is?

Jakub

The design system is a set of design rules, constraints, patterns that describe our product. The design system includes things like colors, typography, naming conventions, and so on. The easiest way to think about design systems is to imagine a world if we didn't have design systems - basically every website you would enter, every element on those websites would have different colors. So we would see one button that would be blue, the next one green, and it would cause a mess. It would be chaos for the user experience.

Olga

And that is what the design system is. So every business needs a design system?

Jakub

No, obviously not, because if you're just starting out the business and you, for example, have only one digital product that is still in a prototype version, then you don't need to focus on the design system. You don't need to have a strict set of rules and principles. Pattern libraries and style guides are just not necessary at this point yet.

Olga

That means that when a company is small, we need another kind of rules, not a design system?

Jakub

I would say that if we're starting out a business it’s good to have some set of rules and UI elements, but those rules don't have to be written. It can be just spoken rules within the organization and you don't have to include them in the design system - because at starting point when we’re prototyping our digital product, it isn't necessary to spend that much time on setting strict rules.

Olga

So as I understand, a design system is a giant set of rules which are written and created by designers, right?

Jakub

Yeah, that's correct. A design system is, of course, a team effort. So not only designers work on the design system, it's more like a whole organization develops a design system to create some products.

What are the pros and cons of design systems?

Olga

Jakub, please tell what are the pros and cons of design systems?

Jakub

So the main advantage of design systems is that if, for example, our business works on multiple products, then it's really nice to have just one set of rules - we define them once and then we reuse them in other products. So we create reusable UI components and conventions (kind of a pattern library). It makes development more cost-efficient as well as it's easier to scale our digital products - once we have the design system, it's easier to introduce new products to our business. It's also easier to introduce it to new employees - the onboarding process is a lot shorter because we have all the rules and conventions written out in one place and a new person doesn't have to constantly ask the same questions. We have to just read the documentation about our product.

Olga

It's like knowledge is decentralized since everybody has access to this information, right?

Jakub

That's correct. And we have solid documentation that everyone can look up to and find what they need.

Olga

That sounds as it should be, simply best practices in design and development. I know that some companies even show their design systems, just to set an image and make marketing on it.

Jakub

Yeah, that's correct, because if you have a design system already prepared, it usually looks really nice and...

Olga

Why not show it to the world?

Jakub

If it looks awesome, why not.

Olga

Make sense, why not? And let's go straight to cons.

Jakub

Yeah, there are some.

Olga

What are the cons?

Jakub

One of the cons is more like a trap for people that are starting out and creating their design system. Sometimes they include things that aren't used in their digital products. For example, let's say that I have a product that just displays some charts and does a lot of background work but doesn't have any form - for some reason, people in the design system include all the inputs, all the checkboxes, or different features that just aren't used within the product. And it's sort of a waste of time in this case. You don't have to think of everything at the very beginning and most likely it will change anyway. So we do the same work two times.

Olga

So making too much is not good too?

Jakub

Yeah, I'd say if we want to create the design system, we should probably start with the most necessary things and then grow as we develop our business.

Olga

And develop step by step.

Jakub

Yeah, that's correct. Also, another thing to mention is that if we have a design system, we have to constantly update it. Whenever we want to change something in our digital product, we should start with a design system. And if we don't, well then the design system will become a kind of useless thing that nobody wants to see. It will have outdated information. And if the communication isn't updated it becomes a sort of useless, right?

Olga

Yeah. It works this way I think. And are there more cons you want to talk about?

Jakub

I think those two that we talked about are the most vivid ones. There are not really more traps rather than creating design systems just takes time, which might be potentially spent on some problem-solving at the beginning.

Olga

So we have to remember about these two cons.

How to use design systems as a developer?

Olga

How do you use design systems as a developer?

Jakub

Design systems are basically my bread and butter when I'm creating reusable components like buttons, inputs, checkboxes, and so on. I also sometimes like to use libraries like material.io, which are basically a design system, when creating prototypes, because sometimes you just don't feel that you need to think much about the design and want to focus on problem-solving and I think libraries like material.io are just awesome in this case. Having a solid design system simply helps. For example, if I'm working on two different products that use the same style guide, I like to create a shared library between them and it's much easier if I have a design system.

Olga

So it is really helpful in your work and you can't work without it, right?

Jakub

Well, it's much easier to work with design systems because I know that if a global change to all the erasable components occurs, then I can just separate the visual tasks from the logic and just work on the visual thing and it will update all my products because I have this shared library. It's just very convenient, really saving a lot of time.

Storybook: what is that and how to use it?

Olga

Please, tell me what is a storybook and how to use a storybook?

Jakub

A storybook is a tool that developers use and it helps to recreate that design system and the code level. It's like a library that allows you to showcase all the components that we have in our code, so you can just preview every component at a given time. It's also sort of a testing utility because we were running the storybook and you can try all the different variants and so on. It's also very helpful when a new people come to the project. For example, if they want to create some button and they don't know if any button in the design system has already been created, a storybook is a place where they will find it.

Olga

Are there any pros that a storybook offers?

Jakub

Sure. The biggest one is definitely the documentation. Every component that we create, that is in the storybook, is very easy to use afterward. It just makes life simple.

How to create a design system?

Olga

How to create a design system?

Jakub

Basically, when starting out as a business, first of all, we need to recognize if we need a design system at all because if we're creating a very small application it's probably not necessary to include a design system, you have other elements to worry about. Pattern librarieses, style guidelines, page templates, and other UI elements can just wait. But if we decide that we want to create a big application, then it will be a good idea to start with creating the design system as early as possible.

And then my only advice is to start really slow. You don't have to include everything at the very beginning. It's easy to fall into a trap because if we look at other design systems like, for example, material.io, then you'll see that they include all sorts of different components. For example, the guidelines for voice but our application might not have any places at all, or iconography but you just might not need that at the very beginning.

So my advice is that creating a design system should start really slow and only include components that are crucial to our application and to our understanding of our products and then expand from there.

Olga

If you need technical advice, you can always ask our Frontend House experts. Just click the button Free Consultation on frontendhouse.com.

Thank you so much for this interesting conversation about design systems. Thank you for watching this video. You can find other videos on the Frontend House YouTube channel and see you next time.

Jakub

Bye.

Olga

Goodbye.