Design System as a Base of Good Frontend - Experts Zone Talks #6 | frontendhouse.com
Design Systems

June 18, 2021

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

Olga Vasylenko

Marketing Specialist

Jakub Leszczynski

Frontend Developer
SHARE
frontend app(8)
product design(2)

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.

What do you think? Share your impressions!

Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet the authors

Olga
Diamond logo icon
LinkedIn logo
Diamond logo icon
Mail logo

Olga Vasylenko

Marketing Specialist

Jakub
Diamond logo icon
LinkedIn logo
Diamond logo icon
Mail logo

Jakub Leszczynski

Frontend Developer

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.