강의

멘토링

커뮤니티

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) 181 đánh giá

1,455 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

Bạn sẽ nhận được điều này sau khi học.

  • 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,831

Học viên

249

Đánh giá

223

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ả

181 đánh giá

4.9

181 đánh giá

  • sunblaz1560님의 프로필 이미지
    sunblaz1560

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    Nếu bạn đang tìm kiếm một khóa học figma phù hợp và chuyên sâu, bạn chắc chắn sẽ thất bại nếu không tham gia khóa học này! Với tư cách là một người đã chăm chỉ nghiên cứu bài giảng, tôi sẽ đưa ra nhận xét thực sự. Tôi là một nhà phát triển front-end, nhưng tôi rất quan tâm đến UI/UX và có một số kỹ năng sử dụng Photoshop và Sketch, vì vậy tôi sẽ cố gắng viết ra trải nghiệm của mình về bài giảng này. Mặc dù Figma là một công cụ thiết kế nhưng nó đã trở nên vô cùng mạnh mẽ khi được bổ sung Biến và Chế độ Dev vào cuối tháng 6. Tuy nhiên, nếu áp dụng đúng cách, bạn có thể có được cảm giác logic hơn, vì vậy, từ góc độ của một nhà thiết kế, có vẻ như vậy. giống như kiến ​​thức bạn cần biết đã tăng lên. Khi mới kết thúc một bài giảng, tôi liếc nhìn bài giảng nhiều lần, chú ý xem liệu mình có giải thích đúng cách hay không. (Bạn không thực sự hiểu sau khi xem một lần, phải không? 😓) Và khi bắt đầu xem lần thứ hai, tôi cố gắng thỉnh thoảng làm theo những ví dụ để dễ làm theo. Bản chất của khóa học này là dày đặc nên không cần thiết phải nhảy qua từng chương. Nếu bạn nhớ và làm theo mọi thứ một cách hoàn hảo ngay từ đầu, rất có thể bạn sẽ bỏ cuộc. Đó chính xác là những gì tôi đã làm lúc đầu và cảm thấy chán nản, vì vậy tôi đã đứng dậy và bắt đầu xem đi xem lại cùng một video, tập trung vào sự hiểu biết hơn là tốc độ. Xem xét trình độ của người tham gia khóa học, người mới bắt đầu hoàn toàn sử dụng Figma có thể gặp khó khăn. Tuy nhiên, nếu bạn mua nó vì muốn tìm hiểu thêm về hệ thống thiết kế, bạn có thể dễ dàng xem và theo dõi các bài giảng. Có một số phần lý thuyết ban đầu có thể hơi nhàm chán, nhưng khi bạn đã vượt qua phần đầu, sẽ có rất nhiều bài giảng thực sự hữu ích và sâu sắc, và chúng được giải thích rất chi tiết. Khi tôi kiên nhẫn làm theo, tôi có thể cảm thấy rằng mức độ hiểu biết của tôi về hệ thống thiết kế ngày càng tăng. Có rất nhiều ví dụ thực tế để sử dụng. Thay vì nghĩ rằng bạn có thể hoàn thành mọi việc ngay lập tức, nếu bạn xem bài giảng với tâm thế cho viên kẹo vào miệng và từ từ tan chảy trước khi ăn, tôi chắc chắn rằng bạn sẽ cảm thấy kỹ năng của mình đang được cải thiện. Tôi đã làm vậy! Tôi khuyên tất cả các bạn hãy thử nó.

    • uppermost913709님의 프로필 이미지
      uppermost913709

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      97% đã tham gia

      Tôi thật bướng bỉnh. Tôi hiện là nhân viên và đã sử dụng Figma hàng ngày trong vài năm. Để kiểm tra xem kỹ năng của mình có còn thiếu hay không, tôi đã trả tiền để tham gia khóa học và học trong hai ngày trong dịp nghỉ Tết Nguyên đán. Bạn có thể tìm hiểu rất tốt hệ thống thiết kế và các trường hợp sử dụng Biến khi làm việc thiết kế. Điều đặc biệt thú vị là các bài giảng đã được cập nhật theo bản cập nhật của Figma. Như người dưới đây đã nói, nó có thể khá khó khăn đối với những người mới bắt đầu hoặc những người cố gắng theo dõi mọi thứ trong bài giảng ngay từ đầu. Tuy nhiên, những người đương nhiệm sẽ biết rằng đây chỉ là một trải nghiệm của công việc thực tế. Thật khó khăn vì đây là lần đầu tiên của bạn, Nếu bạn lặp đi lặp lại điều đó, bạn sẽ thấy được nguyên tắc. Biết rằng nguyên tắc được áp dụng và lặp đi lặp lại Bạn sẽ quen với nó một cách nhanh chóng. Cảm ơn bạn đã tạo ra khóa học. Đây không phải là bài giảng mà bạn chỉ có thể xem một lần. Tôi nghĩ đây là điểm mạnh khiến nó khác biệt so với các khóa học khác.

      • orinuguri님의 프로필 이미지
        orinuguri

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        35% đã tham gia

        Chất lượng bài giảng của giảng viên tốt đến nỗi mỗi lần xem là tôi đều cảm động :) 👍 Chắc hẳn bạn đã rất khó khăn để tự học những khái niệm này... Cảm ơn bạn đã biên soạn một bài giảng và chia sẻ nó với chúng tôi!! Tôi nghĩ bài giảng này giống như một cơn mưa rào đối với một nhà thiết kế trẻ sắc sảo như tôi! Tôi sẽ cố gắng hết sức!!

        • kkimaz4705님의 프로필 이미지
          kkimaz4705

          Đánh giá 2

          Đánh giá trung bình 5.0

          5

          57% đã tham gia

          Có rất nhiều nội dung hữu ích. Đột nhiên, những điều tôi luôn tò mò xuất hiện trong bài giảng và tôi cảm thấy mình có thể sắp xếp các khái niệm một cách tốt. Nó giúp tôi rất nhiều. Cảm ơn

          • minju90139432님의 프로필 이미지
            minju90139432

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            100% đã tham gia

            Vì Figma đã được cập nhật rất nhiều lần trong năm qua nên tôi đã tự hỏi khi nào nên học nó và làm thế nào để áp dụng nó vào thực tế. Tôi thực sự biết ơn người hướng dẫn đã giải tỏa cho tôi nỗi lo lắng đó. Đối với tôi, người đã nghe nói về hệ thống mã thông báo nhưng chưa bao giờ thử nó, đây là một cơ hội quý giá để học từ những điều cơ bản về cách thực hiện các biến thể bằng cách tạo từng hệ thống thiết kế một và biến chúng thành các thành phần, bắt đầu bằng việc đăng ký màu sắc thông qua các biến thể. Tôi nghĩ hiệu quả công việc của tôi sẽ tăng lên rất nhiều khi tôi tìm hiểu thêm về cách tạo biến thể một cách thuận tiện trong khi làm việc. Tôi không nghĩ mình đã từng hoàn thành một bài giảng nhanh đến vậy. Tôi nghĩ như vậy sẽ tốt hơn vì mỗi bài giảng không dài. Tôi mong đợi những bài giảng tốt hơn trong tương lai.

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

            3.344.979 ₫

            19%

            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!