Chia Sẻ Khóa Học Design System & Design Token Master [Khóa 5062 A]
Làm chủ Figma, design token, các UI component, theme và các scalable design system từ design đến code.
Bạn sẽ học được gì:
- ✓ Hiểu cách các design system chuyên nghiệp được cấu trúc sử dụng các foundation, design token, component, pattern và governance..
- ✓ Build các kiến trúc design token có khả năng mở rộng sử dụng các primitive, semantic & component-level token.
- ✓ Tạo các component library có thể tái sử dụng trong Figma bằng cách sử dụng các variable, component, variant, property, Auto Layout và các nguyên tắc responsive design.
- ✓ Áp dụng accessibility, responsive design, theming, dark mode và các chiến lược multi-brand trên toàn bộ một design system.
- ✓ Triển khai design token vào code sử dụng JSON, các CSS custom property, JavaScript, TypeScript, React và các token automation workflow.
- ✓ Design và document một design system sẵn sàng cho production với các quy tắc quản trị, developer handoff, documentation, versioning và quality assurance.
Design system đã trở thành một phần thiết yếu để xây dựng các sản phẩm kỹ thuật số nhất quán, dễ mở rộng và dễ bảo trì.
Khi sản phẩm phát triển, việc duy trì tính nhất quán về màu sắc, khoảng cách, kiểu chữ, các component, trạng thái tương tác, các tiêu accessibility và các development pattern trên nhiều màn hình và team ngày càng trở nên khó khăn.
Một design system chuyên nghiệp sẽ giải quyết thách thức này.
Khóa học "Design System & Design Token Master" sẽ đưa bạn từ các nền tảng của design system đến việc xây dựng các kiến trúc token có khả năng mở rộng, các UI component có thể tái sử dụng, các theme, developer workflow, documentation, governance, automation và các design system sẵn sàng cho cấp độ doanh nghiệp.
Bạn sẽ bắt đầu bằng việc hiểu một design system thực chất là gì và nó khác biệt như thế nào so với một UI kit, component library hay style guide.
Từ đó, bạn sẽ khám phá các nền tảng hỗ trợ các design system hiện đại, bao gồm visual hierarchy, grid, spacing, color system, typography, responsive design, interaction states và accessibility.
Tiếp theo, bạn sẽ chuyển sang Figma, nơi bạn sẽ học cách các design-system file chuyên nghiệp được cấu trúc bằng cách sử dụng các component, variant, Auto Layout, variable, collection, mode và shared library.
Một phần lớn của khóa học tập trung vào design token.
Bạn sẽ học cách cấu trúc các:
- ✓ Primitive token.
- ✓ Semantic token.
- ✓ Component-specific token.
- ✓ Color token.
- ✓ Typography token.
- ✓ Spacing & sizing token.
- ✓ Border & radius token.
- ✓ Shadow & elevation token.
- ✓ Responsive & breakpoint token.
Bạn cũng sẽ học cách các kiến trúc token chuyên nghiệp sử dụng các reference, alias, naming convention, namespace, inheritance và hierarchy để duy trì khả năng quản lý khi sản phẩm phát triển.
Khóa học sau đó chuyển sang việc xây dựng các UI component có thể tái sử dụng như:
- ✓ Button.
- ✓ Input.
- ✓ Select.
- ✓ Checkbox.
- ✓ Radio button.
- ✓ Switch.
- ✓ Badge.
- ✓ Chip.
- ✓ Alert.
- ✓ Toast.
- ✓ Card.
- ✓ Tab.
- ✓ Breadcrumb.
- ✓ Pagination.
- ✓ Modal.
- ✓ Dropdown.
- ✓ Table.
- ✓ Navigation.
- ✓ Sidebar.
Bạn cũng sẽ khám phá các chủ đề nâng cao quan trọng bao gồm:
- ✓ Accessibility & WCAG fundamentals.
- ✓ Responsive design system.
- ✓ Light & dark theme.
- ✓ High-contrast theme.
- ✓ Multi-brand design system.
- ✓ White-label product architecture.
- ✓ Design token trong JSON.
- ✓ CSS custom property.
- ✓ SCSS.
- ✓ JavaScript.
- ✓ TypeScript.
- ✓ React.
- ✓ Runtime theme switching.
- ✓ Style Dictionary.
- ✓ Tokens Studio.
- ✓ Figma-to-code synchronization.
- ✓ Git-based token management.
- ✓ CI/CD workflow.
- ✓ Storybook.
- ✓ Design-system documentation.
- ✓ Governance & contribution workflow.
- ✓ Versioning & deprecation.
- ✓ Enterprise migration.
- ✓ Localization & Internationalization.
- ✓ RTL design system.
- ✓ AI-assisted design-system workflow.
Chương trình giảng dạy bao gồm các module chuyên dụng cho việc triển khai và tự động hóa code, bao gồm token JSON, CSS variable, JavaScript, TypeScript, React, Style Dictionary, Tokens Studio, Git-based workflow và CI/CD.
Bạn cũng sẽ học cách các design system vận hành ở quy mô doanh nghiệp, bao gồm egacy UI audit, các chiến lược migration, cross-platform architecture, localization, RTL support, governance và measurement.
Cuối cùng, bạn sẽ tổng hợp mọi thứ thông qua một design system capstone project sẵn sàng cho production hoàn chỉnh.
Bạn sẽ build các primitive & semantic token, typography & spacing foundation, theme, UI component, responsive behavior, accessibility requirement, multi-brand variant, code token, documentation, governance rule và một design-system audit cuối cùng.
Dự án khóa học sẽ kết thúc bằng việc trình bày toàn bộ hệ thống dưới dạng một portfolio case study chuyên nghiệp.
Dù bạn là một người mới bắt đầu, designer, developer, sinh viên hay chuyên gia sản phẩm, khóa học này sẽ cung cấp cho bạn một lộ trình có cấu trúc để hiểu cách thức hoạt động của các design system hiện đại, từ nền tảng Figma đến UI architecture có khả năng mở rộng và triển khai sản phẩm thực tế.
Nếu bạn muốn vượt ra khỏi việc tạo ra các screen riêng lẻ và bắt đầu xây dựng các hệ thống có thể tái sử dụng, hỗ trợ các sản phẩm kỹ thuật số thực tế, khóa học này sẽ cung cấp cho bạn nền tảng và quy trình cần thiết để thực hiện điều đó.
Khóa học này dành cho ai:
- ✓ Người mới bắt đầu muốn hiểu cách các design system chuyên nghiệp hoạt động.
- ✓ UI designer muốn tạo ra các giao diện có khả năng mở rộng và nhất quán.
- ✓ UX designer muốn hiểu về kiến trúc design-system.
- ✓ Product designer đang làm việc trên các sản phẩm kỹ thuật số đang phát triển.
- ✓ Người dùng Figma muốn làm chủ các component, variable và thư viện tái sử dụng.
- ✓ Frontend developer muốn hiểu về design token và các designer-to-developer workflow.
- ✓ Developer đang triển khai các design system bằng CSS, JavaScript, TypeScript hoặc React.
- ✓ Design lead & Product team đang quản lý các shared UI library.
- ✓ Các chuyên gia đang làm việc với các sản phẩm cấp doanh nghiệp hoặc đa thương hiệu.
- ✓ Học sinh/sinh viên đang chuẩn bị cho sự nghiệp UI/UX hoặc product design.
- ✓ Bất kỳ ai quan tâm đến việc xây dựng các sản phẩm kỹ thuật số có thể tái sử dụng, dễ mở rộng và dễ bảo trì.