The essential UXUI knowledge that no one ever taught you, Design Systems

📖 The price of one book!
For the price of one book, you can take a video lecture consisting of a total of 18 chapters!
Lifetime access to continuously updated lectures!

📝 Cheat keys to prevent missing components, checklist file provided!
When managing a design system, there are times when a single component requires multiple versions of the UI. For example, in the case of a button, you need multiple versions of the UI, such as default + hover state UI + pressed UI. You also need to set a user guide, such as when to use a blue button and when to use a ghost button, and other related policies. However, since you have to consider all these different cases, you may end up missing something. Here is a checklist to help you avoid such omissions.

👆 An example of a design system created by Google. This is called the famous ' Material Design (system) '.

Rather than a difficult and vague definition of consistency or something like that, please remember it as one or two images that are familiar to you. At first, it is easier to understand and remember clearly for a long time if you remember it as an image rather than text.

👆 If you are a designer, remember the Figma image.

Design System = Styles, components in Figma + user guides for each (written by designers in the team on Notion/Slack/other websites)

👆 If you are a developer, remember the VScode image.

Design System = Styles, component codes written in VScode + user guides for each (written by designers within the team on Notion/Slack/other websites)

Just search for 'design system' on any online lecture platform.
There will probably be very few relevant lectures. Not only will there be an absolute lack of lectures, but the curriculum will also be either too simple or, on the contrary, most of the lectures will be too long.
There is a bit more content on YouTube, but even on YouTube videos there is no specific content regarding the 'guide'.
Because all of our time is precious, and especially because Korean office workers are so busy, this lecture has been packed with only the most essential content!

Design systems are the basic framework for all web/app products, so designers in particular must be familiar with them.
But why are there so few lectures on 'design systems', even though it is such an important and essential concept? It's because 'design systems' are not something that is easily visible and are not directly related to sales.
It's similar to 'housework'. Even if you do housework diligently every day, it doesn't show. And you don't get money just because you do it diligently. Housework doesn't show or make money just because you do it diligently, so it's been underestimated. There probably aren't many people who have taken classes that teach you how to do housework well. But just like if you don't do housework for just three days, it shows right away, and if you don't pay attention to 'design system', you'll continue to encounter inconveniences while working. And if such big and small related issues continue to be neglected, it may become difficult to turn back later.
Large companies such as Google, Apple, and Samsung have separate teams that only manage design systems. These smart companies probably didn’t create such teams just because they had money left over for no reason. This is proof that they are well aware of the importance of design systems. In Korea, a company called Toss is said to have saved 15,800 hours a year after reorganizing its design system on a large scale.
Despite being such an influential system, unfortunately, not many people talk about design systems.

I will say this again and again, but it doesn't have to be this lecture. I hope you will continue to study design systems consistently, whether through books or YouTube. Design systems have developed a lot, but there are still many areas that need improvement. The more people are interested in the system, the more it can be standardized.

🔥 Things that are only available in your design class

👍 Constantly updated lectures!

The pace of change in the IT field is incredibly fast. Just looking at Figma, every time there is an update, so much changes that you have to keep studying. Therefore , it is necessary to check the update history to see if the lecture is being updated consistently to keep up with the rapid pace of change. The frequency of updates is also a reflection of the instructor's desire for the quality of the lecture.

👍 A lecture by an instructor who listens carefully to students' negative feedback!

Don't just look at the review ratings, but also pay attention to the comments left by the instructor. If you react defensively or give formal responses to students' negative feedback, it's hard to say that you have a good attitude as an instructor. If you sincerely want your students to develop and do well, when students say, "This is what I regret," you will think, "Oh, that's right. I missed this part. I need to improve the lecture."

1. Increases work efficiency

This is something that many of you already know: it reduces repetitive work, maintains design consistency across the product , etc.

2. Prevent unnecessary training

I am also a designer and I do this job because I love design, but sometimes I get lost in thought. Design is a field where anyone can easily express their opinion about my designs at any time. For example, a sales team member passing by might say something like, "Isn't the font a bit too stiff?" or "Wouldn't it look better if the numbers in this column were centered?" Feedback from others' perspectives is always welcome, but if the designer did not work on it thoughtlessly but researched and made a decision after much deliberation, or if several people give very different opinions, the designer might want to find peace of mind and body by listening to the chirping of birds in the morning or the sound of a stream in nature.
However, if we actively adopt a design system, it will not be a system for designers alone, but one created with everyone’s participation. Since it is a system that reflects everyone’s voices, the number of people who are dissatisfied will decrease. There will be no need to hold a heated meeting every time a difference of opinion arises.

3. Practice improving usability

In terms of the need for continuous usability improvement, design systems are just like regular products. The difference is that improving the usability of the web/app I create makes end users happy, but improving the usability of the design system makes me and my team happy. It’s hard to figure out who the users of my product are because they can be anyone, but our company’s design system users are fixed to our company’s team members, so it’s great for practicing user research and usability improvement!

The fact that it is already being used in the company also means that team members will be less resistant to upgrading the design system! If you try to introduce it to a company that has not been using a design system, there will be a lot of new things to learn and adapt to, and a lot of things that have been worked on before will have to be reworked, so team members may be quite resistant. It would be a good idea to take this opportunity to talk about reorganizing the design system with your team or company-wide!

The IT field is one of the fastest-changing fields in all industries. New technologies are coming out every day. If the term 'design token ' is unfamiliar to you, I recommend that you at least briefly understand the concept somewhere else, even if it is not in this lecture.

In the case of large companies, there is a separate team that is solely responsible for the design system. In the US, the design system team is usually composed of 4 to 9 team members. However, in the case of small and medium-sized companies and startups, there is a high possibility that there will be 1 to 2 team members managing the design system. It would not be easy for a single designer at a startup to create a better design system than 7 people at a large company. No matter how talented that single designer may be, 7 people at a large company would spend all day researching and improving the design system, while one designer at a startup would be barely making it while splitting up their free time. Fortunately, however, these large companies disclose the details of the design systems they have painstakingly created on their websites. So we can gratefully refer to those details and develop them into our own design system. Never try to create everything by yourself from the beginning. You will make a lot of trial and error . Instead, it is a wise decision to actively utilize the contents that several global experts have created over a long period of time.

👆 How to upload and use components in the library

👆 How to use a checklist to make sure you don't miss anything

👆 Atomic System

👆 Token concept and usage

📢 The following is not covered:
How 'Developers' Handle Design System Code

Q. Is this a lecture that non-majors can also take?

I would say it depends on the level of prior knowledge of Figma rather than your major. If you have the concept of components in Figma and the knowledge to search for open sources in the Figma Community, you should have no trouble taking the course.

Q. What level of content is covered in the class?

We did not cover how to create each component directly using the Figma tool. As I will mention several times in the lecture, our goal is to create a design system quickly and efficiently . We will actively utilize a design system that has been well-made over a long period of time by gathering many experts from large companies!

• Current representative of Nidesign
• Completed Master's Program in Design Graduate School
• Participation in projects of various scales and topics, from large corporations to startups
• More than 7 years of practical experience
• Youtube: @ needesign

Due to the poor recording environment and equipment, I had no choice but to use an AI voice. Please understand. However, I used the most natural voice possible, so it won't be too awkward.

• Please prepare in advance because we will be using Figma.
• If you are familiar with Figma's component and community concepts, it will be easier to understand.