From Beginner to Professional: Mastering Design Systems from A to Z with Figma

[A real case where I participated as an interviewer]

With the ability to build design systems

The reason why Applicant A was hired as a "Junior" Product Designer 🙌

I recently had to hire a junior product designer for the team I was working with, so I participated as an interviewer. At that time, there were candidates A, B, and C.

A, B, and C all demonstrated the following core competencies well in their portfolios. They showed that they had conducted user research, design thinking, and personas in the process of carrying out UX/UI projects. They were also producing high-quality visual outputs, such as wireframes and high-fidelity UI designs.

But in the end, Candidate A was selected. Why was that? Candidate A had one very clear differentiating point that stood out in their portfolio. It was their ability to build design systems. Candidate A gave me and the other interviewers confidence that they could professionally build and manage design systems. In other words, we could conclude that once we hired this person, we wouldn't need to provide much training for design system work. We could assign them tasks right away.

Applicants B and C also had experience building simple elements like colors or typography, but Applicant A demonstrated a comprehensive ability to build a design system at a professional level, including design principles, foundations, tokens, and UI component production and management. Furthermore, they possessed the Figma skills required in the field and showcased them through their portfolio.

Why design system building skills are essential for UX/UI design employment

2 reasons why it's no longer an option but a must 🤔

Reason 1. Because in the field, designers must take ownership and manage the design system

Product designers collaborate with various stakeholders, including other designers, developers, and PMs. One thing is certain: primary ownership of the design system lies with the designer. When new colors, tokens, or components are needed, designers must create them, reflect them in the design system, and communicate these changes to the team. While larger companies may have dedicated design system designers, all designers must still continuously contribute to the evolution of the design system.

Reason number two. For practitioners and interviewers, training a new hire on design systems is perceived as a significant burden.

From the company's perspective, hiring a designer without design system experience is a significant burden. If a new hire doesn't understand design systems, a working designer must train them directly. However, in reality, it is unlikely that a request to "reduce the workload for training purposes" will be accepted, so they usually have to handle both their tasks and the training simultaneously. The problem is that design system training doesn't end in just a few days. It takes at least several weeks, or even months at most. Ultimately, this becomes a major burden for the practitioner, which is why companies naturally have no choice but to prefer designers who already possess basic competencies.

In summary, for beginners aspiring to become UX/UI designers, the ability to build a design system is a necessity, not an option. Through this course, I will help you acquire the design system skills required in the field and achieve your desired career goals.

Real course reviews from students ✨

Based on content verified by students who aimed to master design systems,

We have carefully selected and included only the most essential content in this lecture.

What will you learn through this course? 📖

This course starts not with "tool functions," but with understanding the principles of a "design system for building products." It covers the entire thought process and practical skills for building a design system in the field, from Concept → Principles → Foundations → Tokens → Components → to Service Application. The goal is for you to be able to explain, create, and apply a design system to a service yourself after completing the course.

And, practical tips for designing products and services using design systems

Design foundations, tokens, and components are ultimately tools for designing consistent screens and creating high-quality products and services. We share the practical decision-making criteria and tips encountered during the iteration process—where screen design and component/token expansion repeat—while designing actual screens based on the design system created previously.

Rather than just simple theory, it covers answers to realistic questions encountered while operating a design system in practice, such as "when to create a new component"
and "to what extent should variations be maintained."

What will we be creating through this course? 🛠️

[Comprehensive Practical Project] Hands-on Component System Design for Real-world Application

In this course, you will design components based on standards used in actual products and build a component system yourself, considering state, variants, and scalability.

Focusing on the most frequently used components in practice, such as buttons, text fields, select boxes, and snackbars,
we cover the process of creating “components as a system” that goes beyond simple UI design.

Each component includes not only its default state, but also

• Various states such as Hover / Active / Disabled / Error

• Options such as Size, Type, and Icon presence

• considerations for light/dark modes, etc.

  
  

You will learn how to structure and manage them through hands-on practice.

In addition, it explains from a working designer's perspective how to divide component structures using Figma, how to apply properties (Properties, Variant, Boolean, etc.), how to utilize previously defined Primitive and Semantic tokens in components, and what constitutes a maintainable design even as the number of components increases. Through this process,

You can create a component system capable of collaborating with the development team, rather than just
“pretty components.”“những thành phần đẹp mắt đơn thuần”.

[Comprehensive Practical Project] Creating a Responsive Web Service by Assembling Design Tokens and Components

You will create a responsive web service that considers mobile, tablet, and desktop environments by applying design tokens and components you designed yourself. Rather than designing new screens for each device, you will practice the process of flexibly expanding by assembling layouts and components based on a single design system.

Through this, you will naturally learn how to design responsive webs from a systems perspective and how to reuse design system elements in practice.

Who will benefit from this course? 🧭

Prerequisite Course Information

If you are completely new to Figma, I recommend taking my Inflearn course, "From Introduction to Practical UI Design Using Figma," first. Those who purchase through the following link can enroll at a 30% discounted price. If you take this design system course after completing that one, you will be able to master the skills much more explosively and quickly. (🎁 Course Discount Coupon)

Frequently Asked Questions (FAQ)

Q. Is it possible to learn on both Windows and MacBook?

A. Yes, it is possible. This course was created based on the Figma tool. Since Figma is browser-based software, it can be run on both Windows and MacBooks. I will also provide the shortcuts I use in this course for both Windows and MacBook users.

Q. Can I take the course using the free version of Figma?

A. You can follow the theoretical parts and most of the content of this course using the free version of Figma (about 70% of the course). Variables, components, and auto layout can all be used in the free version. However, the parts involving applying modes using variables and the Dev Mode features I occasionally show cannot be used with the free version. Therefore, I recommend using the paid version at $16 per month as an investment while taking the course.

Q. How can I master design systems quickly?

A. Once you have mastered the basic principles of design systems and how to use Figma, I believe it is important to study numerous references and practice building them "yourself." By practicing various cases through this lecture and following along with the comprehensive practical project, you will soon find yourself capable of building a design system. After that, I recommend continuing to practice, apply what you've learned, and try integrating it into real-world projects once you enter the industry.

Q. Can non-majors take this course?

A. Yes, this course is designed specifically for beginners and non-majors. However, if you come prepared with foundational concepts of UX design, basic knowledge of UI design, and an understanding of Figma's basic functions, you will be able to master the content and skills of this lecture much more explosively and quickly. If you are just starting out in UX/UI design, I recommend taking my Introduction to UX Design for Beginners course on Inflearn first. If you have some basic knowledge of UX but have never used Figma, taking the UI Design using Figma course beforehand will help you master design systems several times faster through this lecture.

Q. What should I do if I have questions while taking the course? (Information on community operations)

A. You may have questions while taking the course. To provide quick answers and facilitate communication, we operate a group open chat community and also provide answers through the Q&A board of the course. Furthermore, we encourage the active use of the course community board for missions and assignments to promote sharing among students and aim for mutual growth.