Design system là gì?

Design System (một hệ thống thiết kế) về mặt thành phần, là một tập hợp đầy đủ các thành phần (components), các tiêu chuẩn thiết kế (standards), và các tài liệu hướng dẫn (documentation) để có thể sử dụng trong quá trình thiết kế sản phẩm.

Về khía cạnh chức năng và giá trị, hệ thống này sinh ra là để hỗ trợ cho các sản phẩm phức tạp có một quy mô lớn với nhiều màn hình, nhiều luồng kịch bản. Design system giúp giữ vững tính thống nhất của sản phẩm, tính nhất quán cả về ngôn ngữ thiết kế lẫn cấu trúc kĩ thuật và nhờ đó nó hạn chế sai sót, tăng tốc độ phát triển cho quá trình thiết kế sản phẩm.

Design system sẽ là thứ quen thuộc đối với những product team chuyên nghiệp, nhưng người dùng phổ thông có thể sẽ không thấy được sự tồn tại của nó vì nó nằm khá sâu ở hậu trường của một quy trình thiết kế sản phẩm. Tuy nhiên, bạn có thể đang tận hưởng giá trị mà nó mang lại khi được dùng một sản phẩm có trải nghiệm tốt, nhất quán & dễ sử dụng. Hãy đào sâu hơn ở các phần tiếp theo để thấy được vai trò, giá trị và hình dung một Design System thì nó tròn méo ra sao nha.

Vai Trò của Design system trong Product Design

Trong một công ty làm sản phẩm (Product-based), Design System đóng vai trò vừa là “ngôn ngữ chung”, vừa là các quy tắc thiết kế để tuân theo và kiểm soát, và cũng đồng thời là “thư viện thành phần”. Nó sẽ góp phần kết dính và đẩy mạnh khả năng teamwork giữa Designer, Developer và Product Manager (hoặc các vai trò đóng vai trò phát triển sản phẩm khác). Các giá trị chuyên môn quan trọng nhất mà chúng ta cần ở Design System là:

  • Tạo sự đồng nhất (Consistency): Đảm bảo trải nghiệm người dùng không bị thay đổi dù họ đang ở đâu trên sản phẩm, hay trong hệ thống lớn do chúng ta tạo ra. Ví dụ về mặt hình thức như: các nút bấm, khoảng cách, màu sắc và quy tắc bố cục sẽ giống nhau, hay ví dụ về mặt trải nghiệm như: các trải nghiệm thao tác, tìm kiếm thành phần và phản hồi của phần mềm khi gặp lỗi đều được cảm nhận nhất quán.

  • Tăng tốc độ phát triển (Efficiency): Hiểu đơn giản: thay vì phải thiết kế và code lại một cái Form từ đầu, các team chỉ cần “lắp ghép” các thành phần đã có sẵn trong thư viện. Design system tạo ra một hệ quy tắc để một nhân sự (Người hoặc A.I.) có thể biết trong một ngữ cảnh cụ thể ở tương lai khi chức năng mới xuất hiện nó có thể tái sử dụng hình mẫu nào để tạo ra một thiết kế mới.

  • Giảm thiểu sai sót: Nhờ vào các bộ quy tắc để phân định được đúng – sai, nhờ thêm vào các thành phần đã tồn tại trong thư viện và các hình mẫu giao diện đã được liệt kê để tái sử dụng. Khi một ai đó thiết kế ra một màn hình hay element mới, họ sẽ có quy chuẩn để đối chiếu, nhờ đó giảm thiểu các sai sót do sự tản mác không hệ thống.
    Giảm thiểu sai sót còn đến ở việc các tiêu chuẩn quốc tế về a11y như WACG sẽ được đính kèm vào ngay từ giai đoạn xây hệ thống, để đảm bảo sản phẩm bạn có thể đạt được tiêu chí khi cần thâm nhập thị trường tương ứng.

  • Dễ dàng mở rộng (Scalability): Khi công ty muốn phát triển thêm sản phẩm mới hoặc mở rộng quy mô đội ngũ, Design System giúp các thành viên mới hòa nhập và làm việc đúng chuẩn (nếu bộ quy chuẩn đủ chặt chẽ & nhân sự mới thật sự nghiêm túc trong việc tiếp nhận).

Bên cạnh đó cũng nên đề cập đến các giá trị mà Design System đóng góp cho doanh nghiệp:

  • Tiết kiệm chi phí và nguồn lực
    Không quá khó hiểu ha. Khi bạn giảm được thời gian và công sức thiết kế và lập trình lặp đi lặp lại, công ty có thể tập trung nguồn lực vào việc giải quyết các bài toán khó hơn hoặc nghiên cứu tính năng mới để cạnh tranh trên thị trường.
  • Nâng cao giá trị thương hiệu
    Sự chỉn chu trong từng điểm chạm (touchpoint) giúp người dùng cảm thấy tin tưởng vào sản phẩm. Một sản phẩm có giao diện chắp vá sẽ tạo cảm giác thiếu chuyên nghiệp, trong khi Design System tạo ra sự liền mạch trong trải nghiệm (UX) và nhất quán trong hiển thị (UI), nó sẽ thúc đẩy cảm giác tin tưởng, đồng thời củng cố nhận diện thương hiệu của sản phẩm.
  • Thúc đẩy sự cộng tác (Collaboration)
    Nó tạo ra những ngôn ngữ chung để kéo gần các nhóm task “Thiết kế” và “Lập trình”. Khi Designer nói về “Primary Button”, Developer biết chính xác đó là component nào trong code. Điều này giúp giảm thiểu các cuộc tranh luận không cần thiết về pixel hay màu sắc.
  • Ví dụ thực tế: Dễ thấy nhất là ở những sản phẩm lớn và hàng đầu như Microsoft Offices hay hệ sinh thái của Google, bạn sẽ luôn cảm giác được sự quen thuộc khi ở trên những nơi khác nhau thuộc cùng một hệ thống. Giờ đây không chỉ những sản phẩm lớn mà Design System dần cũng đã trở thành tiêu chuẩn của những sản phẩm của các tập đoàn ở Việt Nam, các sản phẩm nhỏ đang tồn tại trên thị trường hoặc thậm chí ở một vài MVP của Start-Up

Các cấu phần quan trọng của design system

Một hệ thống không phải chỉ đơn thuần là một kho thư viện, nó sẽ gồm nhiều thứ hơn để đảm bảo sao cho khi có một thành phần mới cần sinh ra, người đảm nhiệm vai trò sẽ có thể tìm thấy đầy đủ nguyên liệu (các element cần thiết), các hình mẫu để đối chiếu và phân loại (UI pattern) và các quy tắc để có thể ráp nối chúng nó lại, và bùm! element mới được sinh ra.

design system parts - diagram

Vậy nên chúng ta hãy đến với các cấu phần quan trọng nhất của Design System, chúng nó là:

1. Design Tokens (các biến số quy ước)

Design Tokens là các biến số dùng để lưu trữ các giá trị thiết kế cốt lõi, giúp đảm bảo sự đồng bộ tuyệt đối giữa thiết kế và code. Ví dụ:

  • Color (Màu sắc): Các kho thư viện về màu, và cả các mã màu cho từng vai trò, vị thế màu (như màu background, màu text, link…)

  • Typography (Kiểu chữ): Font chữ, kích thước (font-size), độ dày (font-weight), khoảng cách dòng (line-height).

  • Spacing (Khoảng cách): Các quy tắc về Margin, Padding (thường dựa trên hệ số 4 hoặc 8).

  • Shadows & Elevation: Các thông số về đổ bóng để tạo chiều sâu.

  • Icons: hệ thống các kí tự biểu tượng giúp dẫn đường user bằng hình hoạ.

2. UI Component Library (Thư viện thành phần)

Đây là tập hợp các thành phần giao diện đã được thiết kế và lập trình sẵn. Các thành phần này được chia làm 2 loại chính:

  • Atoms (Nguyên tử): Các thành phần cơ bản nhất như Button (nút), Input field (ô nhập liệu), Checkbox, Radio button.

  • Molecules (Phân tử): Sự kết hợp của các nguyên tử để tạo ra một cụm chức năng nhỏ.

    • Ví dụ: Một ô Search Bar = Một Input field + Một Button “Tìm kiếm”.

Chắc bạn cũng sẽ quan tâm đến khái niệm “atomic design” vì đây sẽ là nguyên lý của loại hình thư viện này.

3. Patterns & Templates (Mẫu hình và Bố cục)

Patterns hay cụ thể hơn là UI Pattern là các hình mẫu sẽ thường xuyên xuất hiện trong hệ thống của bạn. Đây là những giải pháp thiết kế cho các vấn đề lặp đi lặp lại. Có những pattern sẽ mang tính phổ quát, gặp lại ở rất nhiều sản phẩm ví dụ như:

  • Forms: Cách sắp xếp các ô nhập liệu, thông báo lỗi và nút gửi đi.

  • Navigation: Cấu trúc thanh menu, sidebar, breadcrumbs.

  • Data Visualization: Cách hiển thị biểu đồ, bảng biểu (Tables).

  • Empty States: Giao diện hiển thị khi không có dữ liệu.

…cũng có một số UI Pattern có thể sẽ chỉ xuất hiện trong riêng product của bạn, ví dụ một thẻ swipe trái-phải sẽ thường chỉ bắt gặp ở nền tảng dating apps.

4. Content Guidelines (Ngôn ngữ và Nội dung)

Một Design System tốt phải quy định cả cách sản phẩm “nói chuyện” với người dùng. Nếu không có phần này, trải nghiệm người dùng sẽ bị đứt gãy về cảm xúc.

  • Voice & Tone: Giọng văn của sản phẩm là trang trọng, nghiêm túc hay thân thiện, hài hước?

  • Grammar & Mechanics: Quy định về cách viết hoa, dấu câu, định dạng ngày tháng/tiền tệ.

  • Microcopy: Cách viết các dòng chữ ngắn trên nút bấm, thông báo lỗi (Error messages) hoặc chỉ dẫn (Tooltips).

5. Documentation & Governance (Tài liệu và Quản trị)

Mình hay gọi vui với các bạn khác, đây là “hiến pháp” giúp Design System điều khiển quá trình tạo mới thành phần và phát triển cùng quy mô sản phẩm.

  • Usage Guidelines: Tài liệu hướng dẫn khi nào nên dùngkhông nên dùng cái gì. (Ví dụ: “Nút màu đỏ chỉ dùng cho hành động xóa vĩnh viễn”).

  • Code Snippets: Các đoạn mã (React, Vue, CSS…) tương ứng với từng component để Developer copy-paste nhanh chóng.

  • Governance Process: Quy trình để đóng góp một component mới hoặc chỉnh sửa một component cũ khi hệ thống cần thay đổi.

Tóm tắt các thành phần qua bảng sau:

Cấu phần Vai trò Đối tượng sử dụng chính
Tokens Đảm bảo tính nhất quán từ gốc Designer & Developer
Components Tiết kiệm thời gian xây dựng UI Designer & Developer
Patterns Chuẩn hóa trải nghiệm người dùng Designer & Product Manager
Content Tạo sự đồng nhất trong giao tiếp UX Writer & Marketing
Documentation Giữ cho hệ thống luôn đúng hướng Tất cả các bên

Những nhầm lẫn – UI Kits vs Design System

Có một điểm mình hay thấy mọi người nhầm khi hình dung hoặc nói về khái niệm Design system, đó là “chúng ta có thể tải các design system template trên mạng về và dùng cho thiết kế của mình”. Thật ra cách hiểu này có phần hời hợt vì chỉ nhìn thấy được bề nổi của Design System là một bộ thư viện các UI Element. Thật ra như những gì bạn đọc ở các phần trước, bạn sẽ thấy Design System nó nihều hơn thế.

1. Trước tiên hãy hiểu: UI Kit là gì?

UI Kit (User Interface Kit) là một tập hợp các thành phần giao diện đồ họa (như nút bấm, biểu tượng, thanh menu, ô nhập liệu…) thường được đóng gói dưới dạng một tệp thiết kế (trong Figma, Sketch hoặc Adobe XD).

Nó giống như một “kho tài nguyên chuẩn bị sẵn” được trình bày đẹp mắt để Designer có thể kéo-thả vào bản thiết kế của mình một cách nhanh chóng. Có khá nhiều những UI Kit tốt trên thị trường có thể dùng tốt cho các nhu cầu cá nhân hoặc các công ty nhỏ đang phát triển MVP cho sản phẩm. (Tụi mình có lưu lại một vài “design system template” như vậy ở đây, các bạn có thể tìm hiểu).

Tưởng tượng, bạn là một nhà kinh doanh tay ngang, đang muốn làm một thiết kế nháp cho sản phẩm tự thân, nhưng lại không có nhiều kiến thức về hệ thống UI & thẩm mỹ. Bạn tải một bộ UI Kit về và bóc các thành phần ra, tạo thành các hình mẫu và các cụm chức năng cụ thể, làm prototype để kêu gọi đầu tư vào ý tưởng. UI Kit giúp bạn rất rất nhiều trong tình huống này.

2. So sánh ngang: UI Kit vs. Design System

Tuỳ cách ví von, mỗi người sẽ khái quát hoá một kiểu khác nhau. Với mình, mình hay xem Design System là cả một hệ thống chiến thuật của một đội bóng, nó có cả triết lý bóng đá (Governance), những vai trò trên sân & yêu cầu cho các vai trò đó (token & component) và các chiến thuật phù hợp trong từng tình huống hoặc đối thủ phù hợp (pattern).

Đôi khi người hâm mộ thấy các cầu thủ ra sân với một đội hình và đó là thứ gần với chiến thuật bóng đá nhất mà họ được tiếp xúc, nhưng họ không hiểu điều gì diễn ra phía sau dẫn đến ban huấn luyện quyết định sẽ mang đội hình này ra sân, trong những thế trận diễn ra, các cầu thủ sẽ làm gì để áp dụng lối chơi vào các tình huống bóng cụ thể.

Theo cách hiểu trên, thì UI Kit sẽ tương đương với các đội hình ra sân, bạn có thể lấy về để áp dụng cho trận bóng của mình, nhưng phía sau nó còn rất nhiều thứ khác bạn chưa hiệu rõ.

Nhìn vào bảng so sánh tóm gọn dưới đây để có cái nhìn tổng quan hơn.

Tiêu chí UI Kit Design System
Phạm vi Hẹp (Chỉ dành cho Thiết kế) Rộng (Thiết kế + Lập trình + Quy tắc)
Bản chất Một tệp tĩnh (Static file) Một hệ sinh thái sống (Living ecosystem)
Thành phần Chỉ có UI Components (các yếu tố thiết kế) UI Components + Code + Guidelines + Tokens
Mục đích Thiết kế giao diện nhanh Xây dựng sản phẩm nhất quán và bền vững
Người dùng Chủ yếu là UI/UX Designer Designer, Developer, PM, Writer

Lần sau nếu có ai đó nói với bạn về UI Kit như là một design system, hay đặt vấn đề build một design system, nhưng thật ra thứ họ kì vọng lại là một UI Kit, hãy dùng những kiến thức này để giúp họ làm rõ những mù mờ về các khái niệm nhập nhằng này nha.

Tìm hiểu ngay về UI UX:

3. Tại sao UI Kit không thể thay thế Design System?

Một công ty Product có thể mua một bộ UI Kit trên mạng về để thiết kế giao diện cực nhanh, nó sẽ rất có ích ở những giai đoạn đầu. Nhưng nếu khi bước qua giai đoạn mở rộng, không có Design System, họ sẽ gặp phải các vấn đề sau:

  • Thiếu tính nhất quán ngôn ngữ teamwork: Designer xài UI Kit, nhưng Dev ko có cái thư viện code, họ chỉ cầm design và làm lại theo những gì nhìn thấy. may mắn hơn thì họ sẽ quy hoạch vài thành phần component để tái sử dụng dễ dàng nhưng mọi thứ rất “tuỳ duyên”. Điều này giảm năng suất đội ngũ, tăng thời gian cần có cho những thứ có thể generate một cách tự động.

  • Thiếu tính thống nhất đa chiều: Các lỗi sai về giao diện và UX Pattern có cái gì để canh vào chứ? câu từ trên các CTA, Short text hay các chỉ dẫn đã đồng bộ chưa? nếu một chức năng mới ra đời, nó sẽ dùng hình mẫu giao diện nào? nó có thuộc về một phân loại pattern nào chưa? UI Kit không trả lời cho bạn những câu hỏi này đâu.

  • Khó cập nhật: Có UI Kit giải quyết được phần nào đó quá trình cập nhật đồng bộ, nhưng như bạn có thể thấy ở các vấn đề trên, nó còn là sự quản lý liên chuyên môn. Nên UI Kit thì chỉ xử lý được phần bề nổi (UI và các quy tắc thẩm mỹ cho Product) thôi.

Tóm lại: UI Kit là công cụ hỗ trợ thi công giao diện, còn Design System là bộ khung quản trị toàn bộ hệ thống thiết kế của sản phẩm.

Open-Source Design System

1. Tình huống hay gặp của các designer

Đã bao giờ bạn vào làm ở một công ty và nhận được yêu cầu hãy thiết kế theo một hệ thống phổ biến đã có sẵn – một thư viện component online, để giúp quá trình làm việc với team lập trình trở nên dễ dàng hơn? Đây là một tình huống thú vị và hay gặp, vì thứ chúng ta đang đề cập là một hệ thống thiết kế mã nguồn mở, được dùng chung miễn phí (hoặc có vài giới hạn) bởi mọi người.

Nói về việc nhầm lẫn UI Kit với Design System thì cũng sẽ thiếu sót khi không nói về những hệ thống mở Material Design hoặc Ant Design. Những bộ thư viện như Material Design (của Google) hay Ant Design (của Alibaba) thực chất chính là những Design System (Hệ thống thiết kế) hoàn chỉnh và mẫu mực nhất thế giới.

Khác với một Design System được dùng riêng, độc bản cho các sản phẩm cụ thể của một công ty, các Open-source Design System sẽ như một tài nguyên công cộng, được tạo ra để bản thân nó là một giải pháp template cho nhu cầu đơn giản hoá quy trình của các bên chưa có design system.

Ant Design -một Open-Source Design System nổi tiếng

Lấy ví dụ như Ant Design đi, hệ thống này sẽ cung cấp rất đầy đủ một kho tài nguyên gồm:

  1. Thiết kế (Design): Các tệp Figma/Sketch cực kỳ chi tiết (đây là phần UI Kit bên trong chúng). Bạn có thể tải một file Figma cực kì đầy đủ ở đây

  2. Kỹ thuật (Engineering): Các bộ thư viện mã nguồn (React, Vue, Angular, Mobile SDK) tương ứng hoàn toàn với thiết kế.

  3. Ngôn ngữ thiết kế (Philosophy & Guidelines): Các tài liệu hướng dẫn cực kỳ khắt khe về tư duy tại sao nút này lại đặt ở đây, chuyển động (motion) phải như thế nào là đúng.

Vậy tại sao bạn hay nghe người ta gọi là thư viện? Trong giới lập trình, họ thường gọi là “Component Library” (Thư viện thành phần) vì họ thường tiếp xúc nhiều nhất với phần Code. Nhưng về bản chất tổng thể, nó là một Design System. Do quá trình tiếp xúc của designer là sau so với những người làm lập trình, nên chúng ta sẽ quen gọi theo cái đã có trước và quen thuộc.

2. Cách hoạt động của các bộ Design System mở này

Các hệ thống này hoạt động dựa trên cơ chế “Cài đặt và Tùy biến” (Themeable Frameworks):

  • Bước 1 – Import thư viện: Developer sẽ cài đặt bộ thư viện này vào dự án (ví dụ: npm install antd). Ngay lập tức, họ có trong tay hàng trăm component từ đơn giản đến phức tạp (Table, Chart, Form…).

  • Bước 2 – Sử dụng UI Kit: Designer tải file thiết kế tương ứng của AntD hoặc Material về Figma. Thay vì vẽ lại, họ chỉ việc kéo các component đó ra để ráp màn hình. Đây là cái lúc mà các bạn hay nghe và gặp phải đã được đề cập ở phần trên á.

  • Bước 3 – Customization (Theming): Thay vì dùng màu xanh của AntD hay màu của Google, team sẽ thay đổi các Design Tokens (biến số). Bạn chỉ cần đổi mã màu Primary thành màu thương hiệu của bạn, toàn bộ hệ thống sẽ tự động cập nhật theo.

  • Bước 4 – Đồng bộ: Vì cả Designer và Developer đều dùng chung một “gốc” (là bộ thư viện đó), nên Designer vẽ gì là Dev có ngay Component đó để dùng, không cần phải giải thích nhiều. Quá đãaaa.

3. Nó giúp ích thế nào cho một Team Product (Đặc biệt là làm MVP)?

Với một dự án MVP (Sản phẩm khả thi tối thiểu), tốc độ là sống còn. Sử dụng các bộ Design System mở mang lại 3 lợi ích khổng lồ:

a. Tốc độ “thần tốc” (Speed to Market) :  không cần mất 3-6 tháng để tự xây dựng Design System riêng. Designer và Developer có thể làm việc song song ngay từ ngày đầu tiên vì “nguyên liệu” đã có sẵn trên bàn. Rất là ưu thế khi cần nhanh chóng ra mắt sản phẩm để hoặc là “fail thật nhanh” hoặc là thắng lớn rồi hoàn thiện sau.

b. Chất lượng đạt chuẩn quốc tế (Standard Quality)

  • Tính tiếp cận (Accessibility): Các bộ thư viện này đã được tối ưu cho người khuyết tật, hỗ trợ phím tắt, đọc màn hình… điều mà các team nhỏ thường bỏ qua.

  • Tính đáp ứng (Responsive): Chúng hoạt động tốt trên mọi kích thước màn hình (Web, Tablet, Mobile).

  • Trải nghiệm người dùng (UX): Được nghiên cứu bởi hàng nghìn chuyên gia hàng đầu tại Google hay Alibaba, giúp giảm thiểu các lỗi UX ngớ ngẩn.

c. Tiết kiệm chi phí cực lớn: Dưới góc nhìn của nhà quản trị, thay vì thuê 5 Designer và 5 Developer chỉ để xây dựng bộ khung, bạn chỉ cần 1-2 người để tùy chỉnh lại bộ thư viện có sẵn cho phù hợp với thương hiệu. Team Product có thể dành 90% trí lực để tập trung vào Logic nghiệp vụ (cái thực sự mang lại tiền) thay vì ngồi tranh cãi xem cái nút bấm nên bo góc bao nhiêu pixel.

Kỹ năng design system là một kỹ năng cạnh tranh – bạn nên học nó

Tổng quan thị trường

Thị trường tuyển dụng cho Product Designer tại Việt Nam đang phát triển theo hướng nở rộ các cơ hội nhưng đồng thời cũng gia tăng mức độ yêu cầu đối với ứng viên. Nếu tầm 5 năm trước, việc biết sử dụng figma đã đủ đem đến cho bạn một lợi thế to lớn để nộp vào một vị trí Junior UI Designer thì giờ đây mức độ cạnh tranh đã khác hơn. Các kỹ năng chuyên môn hoá sâu (Design System, Chuyên biệt ở một lĩnh vực nào đó) hoặc các nhóm tư duy phổ quát đa dạng (product mindset, tech mindset…) dần xuất hiện nhiều hơn trong những JD

Một vài yêu cầu công việc có từ khoá kỹ năng 'design system' trên nền tảng ITViec - 01-2026

Một vài yêu cầu công việc có từ khoá kỹ năng ‘design system’ trên nền tảng ITViec – 01-2026

Kỳ vọng gì ở một Designer có kỹ năng Design System

Ở mức độ Junior, bạn ứng viên cần thể hiện được tư duy hiểu về giá trị, vai trò của Design System. Điều đó giúp bạn ấy không gặp trục trặc khi bước vào một môi trường có sự tồn tại của design system. Tối thiểu bạn không ngớ người ra và hỏi “design system là gì” sau đó “detach instance” của hệ thống một cách vô cớ. Bạn cũng sẽ sẵn sàng với việc tận dụng thư viện component/token để tạo dựng thiết kế cho các task mới.

Ở mức Mid-senior, bạn sẽ quen thuộc với hệ thống, đã có thể thành thạo trong việc tạo mới các thiết kế dựa trên thư viện design system của công ty và team. Bạn cũng sẵn sàng tham gia vào các hoạt động kiểm tra và nhận định cách vận dụng hiện tại là đang đúng hay sai, có cần bổ sung mới hoặc thay đổi quy tắc gì cho những thành phần hiện tại.

Ở vai trò Senior hoặc cao hơn, bạn có thể sẽ tham gia vào việc xây dựng design system cho hệ thống công ty khi cần. Vai trò này có thể được tuyển khi công ty đang ở giai đoạn cần build Design System, trong nhiều trường hợp, nếu sản phẩm đủ lớn và nhu cầu đủ cao bạn có thể là một nhân sự chuyên trách cho riêng design system, tạo lập hoặc vận hành duy trì luôn.

Học gì để có kỹ năng Design System?

Ngắn gọn thì: đăng ký học khoá Design System tại TELOS Academy trong form ở cuối comment.

Dài dòng hơn thì:

  1. các bạn nên học và hiểu cách dùng công cụ để xây dựng hệ thống (Figma và các công cụ component, style, variables… của nó)
  2. học tiếp về các lý thuyết cơ bản, design system là gì và cách dùng một design system, để có thể tham gia một đội ngũ có Design system
  3. học cách tạo dựng một hệ thống design system với các thành phần cơ bản từ nhỏ lên từ token, component tới các pattern
  4. học cách hệ thống hoá cái mình đã xây, document và hand-off (bàn giao) nó cho các bộ phận liên quan.
  5. và sau đó thì tham gia các dự án thực tế để trải nghiệm

Lộ trình học UI Design System tại TELOS Academy

Lộ trình 8 buổi học UI Design System tại TELOS Academy

Cảm thấy quan tâm hơn và muốn được tư vấn dựa trên trình độ hiện tại? Hãy điền form và giáo vụ của TELOS Academy sẽ hỗ trợ trong 24h

    I. Thông tin cá nhân

    II. Lựa chọn khóa học

    TELOS Academy sẽ liên hệ với bạn trong vòng 24 giờ để hiểu rõ hơn về nhu cầu của bạn. Hãy để ý điện thoại để không bỏ lỡ cuộc gọi từ chúng mình nhé!

    Tổng kết

    Design system không đơn thuần là những bộ UI Kit lung linh bán hoặc chia sẻ free trên các nền tảng về tài nguyên thiết kế UI/UX. Nó là một hệ thống phức tạp với cả thành phần, thư viện cho designer, code cho FE developer và các bộ quy tắc cho việc vận hành một thiết kế sản phẩm phức tạp.

    Kỹ năng design system cũng dần trở thành một tiêu chuẩn mới của ngành product design và là một phần không thể thiếu để cạnh tranh của một product designer. Hãy học ngay khi còn sớm.