Từ người mới bắt đầu đến chuyên gia: Làm chủ hệ thống thiết kế (Design System) từ A đến Z với Figma

[Trường hợp thực tế mà tôi đã tham gia với tư cách là người phỏng vấn]

Có khả năng xây dựng hệ thống thiết kế

Lý do ứng viên A được chọn làm nhà thiết kế sản phẩm "cấp độ Junior" 🙌

Trong nhóm tôi làm việc gần đây, vì cần tuyển một nhà thiết kế sản phẩm cấp độ Junior (cấp thấp) nên tôi đã tham gia đánh giá với tư cách là người phỏng vấn. Khi đó, có các ứng viên A, B và C.

Cả A, B và C đều thể hiện tốt các năng lực cốt lõi trong portfolio của mình. Họ đã cho thấy việc thực hiện các phần như nghiên cứu người dùng, tư duy thiết kế (design thinking) và xây dựng chân dung khách hàng (persona) trong quá trình triển khai dự án UX/UI. Các sản phẩm trực quan như wireframe hay thiết kế UI high-fidelity cũng được hoàn thiện với chất lượng tốt.

Tuy nhiên, kết quả là ứng viên A đã được chọn. Tại sao lại như vậy? Ứng viên A đã thể hiện một điểm khác biệt cực kỳ rõ rệt trong hồ sơ năng lực của mình. Đó chính là khả năng xây dựng hệ thống thiết kế (design system). Ứng viên A đã mang lại cho các nhà tuyển dụng, bao gồm cả tôi, một sự tin tưởng chắc chắn rằng người này có thể xây dựng và quản lý hệ thống thiết kế một cách chuyên nghiệp. Nói cách khác, chúng tôi đã có thể đi đến kết luận rằng sau khi tuyển người này, sẽ không cần phải đào tạo nhiều về nghiệp vụ hệ thống thiết kế mà có thể giao việc ngay lập tức.

Mặc dù ứng viên B và C cũng có kinh nghiệm xây dựng ở mức độ đơn giản như màu sắc hay kiểu chữ, nhưng ứng viên A đã cho thấy khả năng xây dựng hệ thống thiết kế một cách toàn diện ở mức độ mà thực tế công việc yêu cầu, bao gồm các nguyên tắc thiết kế, nền tảng (foundation), token, cũng như việc tạo và quản lý các thành phần UI. Thêm vào đó, ứng viên này còn sở hữu các kỹ năng Figma cần thiết cho công việc thực tế và đã thể hiện rõ điều đó thông qua danh mục hồ sơ năng lực (portfolio) của mình.

Khả năng xây dựng hệ thống thiết kế đối với việc tìm việc làm thiết kế UX/UI

2 lý do tại sao nó không còn là lựa chọn mà là bắt buộc 🤔

Lý do thứ nhất. Vì trong thực tế công việc, nhà thiết kế cần có quyền sở hữu và vận hành hệ thống thiết kế

Nhà thiết kế sản phẩm (Product Designer) phải cộng tác với nhiều bên liên quan khác nhau như các nhà thiết kế khác, nhà phát triển và PM. Trong đó, có một điều chắc chắn là quyền sở hữu chính đối với hệ thống thiết kế (design system) thuộc về nhà thiết kế. Khi cần các màu sắc, token hoặc thành phần (component) mới, nhà thiết kế phải trực tiếp tạo ra, cập nhật vào hệ thống thiết kế, đồng thời chia sẻ và trao đổi với cả nhóm. Ở các công ty quy mô lớn, có thể có những nhà thiết kế chuyên trách về hệ thống thiết kế, nhưng ngay cả khi đó, tất cả các nhà thiết kế vẫn phải liên tục đóng góp vào sự phát triển của hệ thống này.

Lý do thứ hai. Đối với người làm chuyên môn hoặc người phỏng vấn, việc đào tạo hệ thống thiết kế (design system) cho nhân viên mới là một áp lực rất lớn.

Từ góc độ của công ty, việc tuyển dụng một nhà thiết kế không có kinh nghiệm về hệ thống thiết kế (design system) là một gánh nặng lớn. Nếu nhân viên mới không biết về hệ thống thiết kế, nhà thiết kế thực tế phải trực tiếp đào tạo họ. Tuy nhiên, trên thực tế, khả năng yêu cầu "giảm bớt công việc để đào tạo" được chấp nhận là rất thấp, và thông thường họ phải vừa làm việc vừa đào tạo cùng lúc. Vấn đề là việc đào tạo hệ thống thiết kế không thể kết thúc trong vài ngày. Nó mất ít nhất vài tuần, hoặc kéo dài đến vài tháng. Cuối cùng, điều này trở thành gánh nặng lớn cho người phụ trách, và vì thế, công ty đương nhiên không còn cách nào khác ngoài việc ưu tiên những nhà thiết kế đã có sẵn năng lực cơ bản.

Tóm lại, nếu bạn là người mới bắt đầu muốn trở thành nhà thiết kế UX/UI, khả năng xây dựng hệ thống thiết kế (Design System) không còn là lựa chọn mà là yêu cầu bắt buộc. Thông qua khóa học này, tôi sẽ giúp bạn trang bị năng lực về hệ thống thiết kế mà thực tế công việc yêu cầu để đạt được mục tiêu sự nghiệp mong muốn.

Đánh giá thật từ các học viên ✨

Với những nội dung đã được kiểm chứng bởi các học viên muốn làm chủ hệ thống thiết kế (design system),

Chúng tôi đã tuyển chọn kỹ lưỡng những nội dung cốt lõi và cần thiết nhất để đưa vào bài giảng.

Bạn sẽ học được gì qua khóa học này? 📖

Khóa học này bắt đầu từ việc hiểu nguyên lý của ‘hệ thống thiết kế để tạo ra sản phẩm’ thay vì chỉ là ‘tính năng của công cụ’. Chúng ta sẽ đi sâu vào toàn bộ luồng tư duy và kỹ năng thực tế để xây dựng một hệ thống thiết kế trong công việc thực tế, từ Khái niệm → Nguyên tắc → Nền tảng (Foundation) → Token → Thành phần (Component) → cho đến Ứng dụng vào dịch vụ. Mục tiêu sau khi hoàn thành khóa học là bạn có thể giải thích, trực tiếp xây dựng và áp dụng được hệ thống thiết kế vào dịch vụ thực tế.

Và, những mẹo thực tế để thiết kế sản phẩm và dịch vụ bằng cách sử dụng hệ thống thiết kế

Design foundation, token và component cuối cùng cũng chỉ là những công cụ để thiết kế màn hình nhất quán và tạo ra các sản phẩm, dịch vụ chất lượng cao. Tôi sẽ chia sẻ về những trăn trở gặp phải khi thiết kế màn hình thực tế dựa trên hệ thống thiết kế đã tạo trước đó, cùng với các tiêu chuẩn đánh giá và mẹo thực tế trong quá trình lặp lại giữa thiết kế màn hình ↔ mở rộng component và token.

Không chỉ là lý thuyết đơn thuần, khóa học sẽ giải đáp những câu hỏi thực tế khi vận hành hệ thống thiết kế trong công việc như “Khi nào nên tạo một thành phần mới”,
“Nên giữ các biến thể ở mức độ nào”.

Bạn sẽ tạo ra những gì thông qua khóa học này? 🛠️

[Dự án thực chiến tổng hợp] Thực hành thiết kế hệ thống component sử dụng ngay trong công việc thực tế

Trong khóa học này, bạn sẽ thiết kế các thành phần dựa trên tiêu chuẩn được sử dụng trong các sản phẩm thực tế và trực tiếp xây dựng một hệ thống thành phần có tính đến trạng thái (state), biến thể (variant) và khả năng mở rộng.

Tập trung vào các thành phần được sử dụng nhiều nhất trong thực tế như nút bấm, trường văn bản, hộp chọn, thanh thông báo (Snackbar), v.v.,
chúng ta sẽ đi sâu vào quá trình tạo ra “các thành phần dưới dạng một hệ thống” thay vì chỉ dừng lại ở thiết kế UI đơn thuần.

Mỗi thành phần không chỉ có trạng thái mặc định (Default) mà còn có các trạng thái khác như:

• Các trạng thái đa dạng như Hover / Active / Disabled / Error

• Các tùy chọn như Kích thước (Size), Loại (Type) và sự hiện diện của Biểu tượng (Icon)

• bao gồm cả việc cân nhắc về chế độ sáng/tối (Light/Dark mode)

  
  

Bạn sẽ được học cách cấu trúc và quản lý thông qua thực hành.

Ngoài ra, khóa học sẽ giải thích dưới góc nhìn của một nhà thiết kế thực thụ về cách chia cấu trúc thành phần bằng Figma, cách áp dụng các thuộc tính (Properties, Variant, Boolean, v.v.), cách sử dụng các token nguyên thủy (Primitive) và token mục đích (Semantic) đã định nghĩa trước đó vào các thành phần, cũng như cách thiết kế để có thể bảo trì ngay cả khi số lượng thành phần tăng lên trong tương lai. Thông qua quá trình này,

Bạn có thể tự mình tạo ra một hệ thống thành phần (component system) có khả năng cộng tác với đội ngũ phát triển, chứ không chỉ dừng lại ở việc tạo ra
“những thành phần đẹp mắt đơn thuần”.

[Dự án thực chiến tổng hợp] Tạo dịch vụ web đáp ứng bằng cách lắp ghép các thành phần và token thiết kế

Bạn sẽ được thực hành tạo ra một dịch vụ web phản hồi (responsive) cân nhắc đến tất cả các môi trường di động, máy tính bảng và máy tính để bàn bằng cách áp dụng các design token và component do chính bạn thiết kế. Thay vì thiết kế lại màn hình cho từng thiết bị, bạn sẽ thực hành quá trình mở rộng linh hoạt bằng cách lắp ghép các bố cục (layout) và component dựa trên một hệ thống thiết kế (design system) duy nhất.

Thông qua đó, bạn sẽ học được cách thiết kế web đáp ứng dưới góc độ hệ thống và cách tái sử dụng các thành phần của hệ thống thiết kế trong thực tế một cách tự nhiên.

Khóa học này sẽ giúp ích cho những ai? 🧭

Hướng dẫn về các môn học tiên quyết

Nếu bạn hoàn toàn chưa biết gì về Figma, tôi khuyên bạn nên học trước khóa học "Từ nhập môn đến thực chiến thiết kế UI sử dụng Figma" mà tôi đã mở trên Inflearn. Những ai mua qua liên kết sau đây có thể tham gia khóa học với mức giá ưu đãi giảm 30%. Nếu bạn nghe bài giảng về hệ thống thiết kế này sau khi đã hoàn thành khóa học đó, bạn sẽ có thể làm chủ các kỹ năng một cách nhanh chóng và bùng nổ hơn nhiều. (🎁 Phiếu giảm giá khóa học)

Các câu hỏi thường gặp (FAQ)

Q. Có thể học trên Windows và MacBook không?

A. Có thể. Khóa học này được xây dựng dựa trên công cụ Figma. Vì Figma là phần mềm chạy trên nền tảng trình duyệt web nên có thể sử dụng được trên cả Windows và MacBook. Trong khóa học này, tôi cũng sẽ hướng dẫn các phím tắt tương ứng cho cả người dùng Windows và MacBook.

Q. Tôi có thể nghe bài giảng bằng phiên bản Figma miễn phí không?

A. Bạn có thể theo dõi phần lý thuyết và hầu hết nội dung của khóa học này bằng phiên bản Figma miễn phí (khoảng 70% thời lượng khóa học). Các tính năng như Variables, Components, Auto Layout đều có thể sử dụng được trong phiên bản miễn phí. Tuy nhiên, phần áp dụng các chế độ (modes) bằng Variables và phần tôi thỉnh thoảng giới thiệu về Dev Mode sẽ không khả dụng trong phiên bản miễn phí. Vì vậy, tôi khuyên bạn nên coi đây là một khoản đầu tư và sử dụng phiên bản trả phí với giá 16 USD/tháng trong thời gian học.

Hỏi: Làm thế nào để có thể thành thạo hệ thống thiết kế (design system) một cách nhanh chóng?

A. Sau khi đã nắm vững các nguyên lý cơ bản về hệ thống thiết kế (Design System) và cách sử dụng công cụ Figma, tôi nghĩ việc nghiên cứu nhiều tài liệu tham khảo và luyện tập "trực tiếp" xây dựng chúng là điều rất quan trọng. Thông qua khóa học này, bằng cách thực hành các ví dụ đa dạng và làm theo dự án thực tế tổng hợp, bạn sẽ sớm thấy mình có khả năng tự xây dựng một hệ thống thiết kế. Sau đó, tôi khuyên bạn nên tiếp tục luyện tập, áp dụng và nếu có cơ hội làm việc thực tế, hãy thử lồng ghép chúng vào các dự án thực tế của mình.

Q. Người không chuyên ngành có thể học được không?

A. Vâng, khóa học này được thiết kế dành cho cả người mới bắt đầu và những người không chuyên. Tuy nhiên, nếu bạn đã nắm vững các kiến thức tiên quyết như nền tảng lý thuyết về thiết kế UX, kiến thức cơ bản về thiết kế UI và các chức năng cơ bản của Figma, bạn sẽ có thể tiếp thu nội dung bài giảng và đạt được các kỹ năng một cách nhanh chóng và bùng nổ hơn. Nếu bạn chỉ mới bắt đầu bước chân vào lĩnh vực thiết kế UX/UI, tôi khuyên bạn nên học khóa Nhập môn thiết kế UX dành cho người mới bắt đầu mà tôi đã mở trên Inflearn trước. Nếu bạn đã có kiến thức cơ bản về UX nhưng chưa từng sử dụng Figma, việc học trước khóa Thiết kế UI sử dụng Figma sẽ giúp bạn làm chủ Hệ thống Thiết kế (Design System) nhanh hơn gấp nhiều lần thông qua bài giảng này.

Hỏi: Tôi phải làm thế nào nếu có thắc mắc trong khi nghe giảng? (Hướng dẫn vận hành cộng đồng)

A. Trong quá trình nghe giảng, có thể bạn sẽ có những thắc mắc. Để giải đáp nhanh chóng và giao lưu thuận tiện, chúng tôi vận hành cộng đồng chat mở (Open Chat), đồng thời cũng trả lời câu hỏi thông qua bảng tin hỏi đáp của khóa học. Ngoài ra, đối với các nhiệm vụ và bài tập, chúng tôi khuyến khích học viên tích cực sử dụng bảng tin cộng đồng của khóa học để chia sẻ lẫn nhau và cùng nhau phát triển.