강의

멘토링

로드맵

BEST
Design

/

UI/UX

[Cập nhật UI3] Xây dựng hệ thống thiết kế bằng biến Figma

Cùng nhau xây dựng hệ thống thiết kế bằng cách tận dụng các biến trong Figma với giao diện UI3 mới nhất🔥 Biến là chìa khóa🔑 để mang lại trải nghiệm người dùng nhất quán và cải thiện một cách đột phá quy trình thiết kế.

(4.9) 170 đánh giá

1,409 học viên

  • bolduxlab
피그마
디자인 시스템
토큰
figma variable
Figma
Figma Tokens
Design System
Atomic Design

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Xây dựng hệ thống thiết kế bằng cách sử dụng các biến

  • Phản ánh cập nhật mới nhất của Figma nửa đầu năm 2025

  • Củng cố khái niệm biến (variable) dựa trên Atomic Design và Design Token

  • 33+ thành phần thiết kế cốt lõi tự xây dựng từng cái một từ đầu

  • Sử dụng chế độ Variable để tạo trang B2B, B2C, UI di động

Hướng dẫn hoàn hảo về hệ thống thiết kế sử dụng Figma Variable 🔥


Có phải bạn đang gặp khó khăn trong việc thích nghi với giao diện UI mới không?

Gần đây bạn có gặp khó khăn trong việc tìm kiếm tài liệu tiếng Hàn chất lượng về Figma đã được cập nhật không?


🙋‍♀ Những bạn muốn học về token và design system nhưng cảm thấy bối rối không biết bắt đầu từ đâu vì có quá nhiều tài liệu,

🤷 Những ai đã gặp khó khăn trong việc áp dụng các biến (Figma Tokens) vào thực tế và ứng dụng chúng vào hệ thống thiết kế,

Đừng lo lắng!

Khóa học cho phép bạn học từ lý thuyết cơ bản dành cho người mới bắt đầu đến các phương pháp ứng dụng thực tế cho người làm việc trong ngànhđã được chuẩn bị sẵn sàng. Đặc biệt trong thời điểm năng lực về Figma và hệ thống thiết kế được coi là yêu cầu thiết yếu tại các doanh nghiệp, khóa học này sẽ cung cấp những kỹ năng thực tế và góc nhìn sâu sắc có thể áp dụng trong công việc thực tế.

Giới thiệu Designer Bold😀

Xin chào, tôi là designer Bold. Hiện tại tôi đang làm việc tại London với vai trò Sr. Product Designer và chia sẻ những câu chuyện thực tế trong công việc của mình thông qua Instagram và Brunch.

Trong 8 năm qua, tôi đã làm việc trong lĩnh vực UX Research và Product Design, trải qua nhiều dự án đa dạng. Đặc biệt gần đây, tôi đã thực hiện dự án cập nhật variables cho hệ thống thiết kế Figma, qua đó đạt được thành quả nâng cao năng suất và hiệu quả công việc thiết kế gấp hơn 2 lần và tạo ra trải nghiệm UX nhất quán. Khóa học nàytập trung vào việc hiểu bản chất của khái niệm design token/design system và phương pháp áp dụng vào thực tế, dựa trên kinh nghiệm thực tế và bí quyết của tôi. Thông qua đó, tôi sẽ giúp các bạn có được những kỹ năng thực tế và insight có thể thực sự sử dụng trong công việc hiện tại, đồng thời phát triển năng lực về hệ thống thiết kế!

Hãy tham gia vào hành trình thú vị của việc học tập và phát triển cùng nhau!

Lý do cần học hệ thống thiết kế sử dụng biến (Variable)

Lý do Figma hiện đang là số 1 độc tôn trên thị trường công cụ thiết kế toàn cầu chính là nhờ hệ thống thiết kếtính năng cộng tác mạnh mẽ.

Figma cung cấp các biến (variables) đóng vai trò là "design token" - yếu tố cốt lõi của hệ thống thiết kế, và nhiều bản cập nhật được lên kế hoạch trong tương lai. Ngoài ra, nhiều công ty toàn cầu như Atlassian, Microsoft, IBM cũng đã áp dụng variables vào hệ thống thiết kế của họ.

Trong khóa học này, bạn sẽ học cách tạo hệ thống thiết kế bằng cách sử dụng variables và nâng cao tính nhất quán và hiệu quả của thiết kế.

Những
điểm cốt lõi chỉ có trong khóa học này

Trong khóa học này,
nội dung nào sẽ được học?

Chương trình giảng dạy của khóa học này được chia thành tổng cộng 3 phần và được chia thành tổng cộng 13 chương

Phần 1
Hiểu lý thuyết và xây dựng nền tảng

Phần 2, 3, 4, 5

Hiểu về Design Token và Variable

Khái niệm design token có vẻ xa lạ với bạn không? Thông qua atomic design và các trường hợp thực tế ở nước ngoài, bạn sẽ có thể hiểu rõ khái niệm design token một cách rõ ràng.

(Đã mở miễn phí nên nhất định phải xem!)

Tự tay xây dựng toàn bộ Foundation

Bạn đã từng sử dụng foundation nhưng chưa bao giờ tự tạo ra một cái? Chúng ta sẽ tạo ra mọi thứ từ style đến variable.

Hiểu và đăng ký cấu trúc biến màu sắc, khoảng cách

Đặc biệt là cấu trúc và cách đặt tên của color variable (Figma token) là phần khó khăn và phức tạp nhất. Chúng ta sẽ học cách thiết kế cấu trúc variable thông qua các ví dụ. Sau khi học xong, bạn sẽ có thể hiểu được token của các công ty khác và tạo ra cấu trúc riêng của mình.

Lý thuyết cơ bản về component và thư viện

Đây là bài giảng bổ sung dành cho những ai chưa hiểu rõ về nền tảng cơ bản của component, chúng tôi sẽ giải thích chi tiết về lý thuyết cơ bản trước khi bắt đầu thực hành component một cách bài bản.

Phần 2
Sử dụng biến để tạo các thành phần cốt lõi

Phần 6, 7, 8, 9

Tạo hơn 30 thành phần cốt lõi

Chúng ta sẽ tạo 30 component cốt lõi được chia thành bốn phần. Sau khi tạo các component, chúng ta sẽ kiểm tra từ những điều cơ bản đến khả năng tiếp cận web đơn giản.

[Phần nhập liệu, hiển thị, phản hồi, điều hướng]

I'm

Xây dựng một cách có hệ thống, từng bước một cách bài bản

Bạn sẽ thấy cách xây dựng từ các component con (Part) cho đến component thực tế như thế nào. Thông qua việc xây dựng từng bước một cách tiệm tiến, các bạn cũng sẽ hiểu được cấu trúc và có thể tạo ra một cách dễ dàng.

Chia sẻ các mẹo và bí quyết giúp nâng cao hiệu quả

Hướng dẫn các mẹo hữu ích về component như cách sử dụng slot component để giảm hiệu quả số lượng component, bí quyết sử dụng dummy icon, v.v.

Phần 3-1
Tìm hiểu về việc sử dụng các chế độ

Phần 10

Áp dụng chế độ tối

Để triển khai chế độ tối, chúng ta sẽ chọn các giá trị màu sắc có xem xét đến thương hiệu, khả năng tiếp cận và tính thẩm mỹ, sau đó đăng ký chúng vào biến cục bộ để áp dụng chế độ này.

Áp dụng chế độ thương hiệu

Chúng ta sẽ tìm hiểu khái niệm về chế độ đa thương hiệu và cách triển khai thương hiệu tích hợp bằng cách sử dụng chế độ biến số cũng như những hạn chế của nó.

Áp dụng thiết kế responsive

Chúng ta sẽ học về khái niệm thiết kế phản hồi và thiết kế thích ứng, giá trị tối đa và tối thiểu, đồng thời tạo ra các phiên bản desktop, tablet, mobile bằng cách sử dụng chế độ variable.

Áp dụng đa ngôn ngữ

Chúng ta sẽ tìm hiểu về toàn cầu hóa (global) và bản địa hóa (localization), đồng thời tạo ra hướng ngôn ngữ (RTL, LTR) và chuyển đổi hình ảnh cho bản địa hóa bằng cách sử dụng text variable.

Phần 3-2

Tạo trang bằng cách sử dụng chế độ

Phần 11, 12, 13, 14

Tạo trang thiết kế web admin B2B

Chúng ta sẽ tạo một trang admin dạng B2B SaaS và sử dụng các chế độ để tạo ra dark mode, multi-brand và responsive design.

Tạo trang E-learning B2C

Tôi sẽ tạo trang e-learning B2C với việc sử dụng mode để làm dark mode, multi-brand và responsive design.

Tạo trang dịch vụ ứng dụng OTT di động

Chúng ta sẽ tạo một ứng dụng được cấu thành từ đa thương hiệu và chế độ tối. Bạn sẽ thấy cách sử dụng các chế độ để tạo ra chế độ tối một cách dễ dàng và nhanh chóng.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ ai quan tâm đến hệ thống thiết kế

  • cho những bạn chưa quen thuộc với variable/design token

  • PM/nhà phát triển tò mò về hệ thống thiết kế

  • Dành cho những ai muốn nâng cao kỹ năng Figma của mình lên một tầm cao mới

Cần biết trước khi bắt đầu?

  • Figma cơ bản (giao diện cơ bản, Auto Layout)

Xin chào
Đây là

4,623

Học viên

227

Đánh giá

206

Trả lời

4.9

Xếp hạng

7

Các khóa học

저희는 프로덕트 디자이너의 성장을 돕는 볼드유엑스랩 메인 튜터인 볼드, 제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 해외에서 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.

  • 사용자 리서치 시스템 구축, 관리

     

  • 디자인 시스템 구축, 관리,

    피그마 UI/프로토타이핑

  • 디자인 역량 코칭, 멘토링

인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.

감사합니다.

 

경험 및 경력

(현) 데이터 솔루션 회사 · 시니어 프로덕트 디자이너

(전) 글로벌 리서치, 핀테크, 클라우드 컴퓨팅 등 다양한 분야에서 프로덕트 디자이너로 활동

연세대 인지공학랩 리서처

Chương trình giảng dạy

Tất cả

81 bài giảng ∙ (19giờ 53phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

170 đánh giá

4.9

170 đánh giá

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    If you are looking for a proper, in-depth Figma course, you will definitely miss out if you don't take this course! I will give you a real comment as someone who has completed the course. I am a front-end developer, but I am interested in UI/UX, so I have the skills to use Photoshop and Sketch to some extent, so I will write about my experience in this course. Although Figma is a design tool, it has become incredibly powerful since Variables and Dev Mode were added at the end of June, but if you want to apply it properly, you need to feel the logical feeling, so I think it is a lot of knowledge for designers. When I first completed the course, I carefully watched the lecture several times to see if it was explained properly. (I didn't understand it after watching it once? 😓) And when I started watching it for the second time, I followed along with easy-to-follow examples. The characteristic of this course is that it is dense, so there is no chapter that goes over each chapter in a rush. If you remember everything perfectly from the beginning and follow it all, you will likely give up. I did that in the beginning and got frustrated, so I got my mind right and started watching the same videos over and over again, focusing on understanding rather than speed. Considering the level of the people taking the course, it might be difficult for a complete beginner in Figma. However, if you bought it because you wanted to know more about the design system, you can easily watch the lecture and follow along. There are some theoretical parts that can be a bit boring in the beginning, but once you get past the beginning, there were many lectures that were really useful and showed a lot of inner strength, and they explained things in great detail. If you followed along with patience, you could feel your level of understanding of the design system increasing. There were so many examples that you could use in real life. Don't think that you'll finish it all at once, but if you watch the lecture with the mindset of putting a candy in your mouth and slowly melting it, I'm sure you'll feel your skills improving. That's what I did! I recommend you try it too.

    • uppermost913709님의 프로필 이미지
      uppermost913709

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      97% đã tham gia

      It was tough. I am a current employee and have been working with Figma every day for several years. I paid for the course and took it over two days during the Lunar New Year holiday to check if there were any shortcomings in my skills. I was able to learn the design system and the use cases of Variable in design work very well. It was especially good that the course was updated according to Figma updates. As the person below said, it may be quite difficult for beginners or those who try to follow everything in the course from the beginning. However, current employees will know that this is a taste of the actual work. It is difficult because it is the first time, but if you repeat it over and over again, you will see the principles, and if you know that the principles are applied and repeated, you will be able to adapt quickly. Thank you for making the course. I think that the fact that it is not a course that you just watch once is a strength that differentiates it from other courses.

      • orinuguri님의 프로필 이미지
        orinuguri

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        35% đã tham gia

        The instructor's lecture quality is so good that I am impressed every time I watch it :) 👍 It must have been hard to learn these concepts on your own... Thank you for making it into a lecture and sharing it!! For a junior designer like me who is very beginner, this lecture is like a drop of rain in a drought! I will do my best!!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          Đánh giá 2

          Đánh giá trung bình 5.0

          5

          57% đã tham gia

          There is a lot of helpful content. Sometimes, things I was curious about came up in the lecture, so I think it helped me organize my concepts well. It was very helpful. Thank you.

          • minju90139432님의 프로필 이미지
            minju90139432

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Figma has been updated so much over the past year that I have been worried about when to learn it and how to apply it to my work. I am very grateful to the instructor who helped me with my worries. I have heard of the token system but have never tried it before, so it was a valuable opportunity for me to learn the basics from registering colors through Variable, creating design systems one by one, and making variants while componentizing them. I think my work efficiency will greatly increase as I learn a lot about how to conveniently create variants while working. I don't think I have ever completed a lecture this quickly. I think it was better because each lecture was not too long. I look forward to even better lectures in the future.

            Ưu đãi có thời hạn, kết thúc sau 4 ngày ngày

            116 ₫

            24%

            4.151.357 ₫

            Khóa học khác của bolduxlab

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!