Design System 101

1. Design System là gì?

• Một thư viện chứa các thành phần giao diện tái sử dụng.

• Một bộ hướng dẫn về phong cách thiết kế.

• Tất cả các đáp án trên.

• Một tập hợp các quy tắc, tiêu chuẩn giúp duy trì tính nhất quán trong thiết kế.

Thành phần nào dưới đây thường có trong một Design System?

• Color Palette, Typography, Iconography

• Components, Tokens, Grid System

• Guidelines, Documentation, Accessibility Rules

• Tất cả các đáp án trên

Design Token trong Design System là gì?

• Một loại component có thể tái sử dụng.

• Các biến giúp quản lý màu sắc, khoảng cách, font size một cách nhất quán.

• Một bộ biểu tượng có thể dùng trong thiết kế.

• Các quy tắc về thương hiệu.

Nguyên tắc quan trọng nhất khi xây dựng Design System là gì?

• Tính nhất quán (Consistency)

• Tính sáng tạo (Creativity)

• Tính phức tạp (Complexity)

• Tính độc quyền (Exclusivity)

Trong một Design System, “Atoms” thuộc cấp độ nào trong mô hình Atomic Design?

• Cấp độ nhỏ nhất, gồm các đơn vị cơ bản như nút, input, label.

• Cấp độ trung bình, gồm các nhóm component nhỏ.

• Cấp độ cao nhất, gồm các page template.

• Không có trong Atomic Design.

Component nào sau đây có tính tái sử dụng cao nhất trong một Design System?

• Button

• Card

• Navigation Bar

• Page Template

Grid System giúp ích gì trong Design System?

• Định nghĩa cách sắp xếp layout và căn chỉnh nội dung.

• Quản lý màu sắc trong thiết kế.

• Tạo hiệu ứng động (animation).

• Cấu hình typography scale.

Accessibility trong Design System tập trung vào yếu tố nào?

• Đảm bảo thiết kế có thể truy cập bởi tất cả người dùng, bao gồm người khuyết tật.

• Tăng tốc độ tải trang.

• Làm cho thiết kế trông đẹp hơn.

• Tạo hiệu ứng hover đẹp mắt.

Khi cập nhật một Design System, điều gì quan trọng nhất?

• Cập nhật nhanh mà không cần kiểm tra.

• Thông báo rõ ràng về thay đổi và cách sử dụng.

•  Xóa bỏ các component cũ ngay lập tức.

• Tạo một Design System hoàn toàn mới từ đầu.

Trong Figma, bạn có thể quản lý Design System bằng cách nào?

• Sử dụng Component Library

• Tạo Styles cho màu sắc, typography, effects

• Sử dụng Variants cho các trạng thái component

• Tất cả các đáp án trên