Token thiết kế là nguồn thông tin duy nhất cho các quyết định hình ảnh trên một sản phẩm. Chúng mã hóa màu sắc, khoảng cách, kiểu chữ và chuyển động thành các biến có tên mà các thành phần sử dụng.
Tại sao token quan trọng
Nếu không có token, việc thay đổi màu sắc thương hiệu chính cần phải tìm kiếm qua hàng trăm tệp. Với token, một lần cập nhật biến sẽ lan tỏa khắp nơi — từ nút bấm đến thông báo đến thanh điều hướng.
Token cũng cầu nối khoảng cách giữa công cụ thiết kế và mã. Một nhà thiết kế đặt tên một màu là surface-brand trong Figma; một nhà phát triển sử dụng var(--surface-brand) trong CSS. Họ nói cùng một ngôn ngữ.
Ví dụ thực tế
Xem xét một thành phần cần một nền, một viền, và văn bản. Thay vì mã cứng #1a56db, #e1effe, và #1e429f, thành phần tham chiếu --color-primary, --surface-primary-subtle, và --text-primary-strong. Khi thương hiệu phát triển, bảng màu thay đổi — thành phần không thay đổi.
Danh mục token
Màu sắc — bảng màu thương hiệu, ngữ nghĩa và trung tính
Khoảng cách — một thang đo đồng nhất từ 2px đến 64px
Kiểu chữ — kích thước phông, trọng số và chiều cao dòng
Bán kính — từ góc sắc nét đến tròn hoàn toàn
Bóng — mức độ nâng cho chiều sâu và phân cấp
Chuyển động — đường cong và bước thời gian
Hầu hết các trích dẫn tìm thấy trên Internet có lẽ được tạo ra bởi AI.
Hàm content_image() hiển thị một img với loading="lazy" theo mặc định, và bao bọc nó trong một phần tử figure khi có chú thích được cung cấp.
Không có chú thích — một img đơn giản, toàn chiều rộng.
Có chú thích — được bao bọc trong một figure với figcaption.
Một figure với một figcaption — sử dụng nó để ghi công nguồn hoặc thêm ngữ cảnh cho nội dung hình ảnh.
Phương tiện với văn bản
Hình ảnh chiếm một phần ba bố cục.
Sử dụng content--media để đặt một hình ảnh và văn bản bên cạnh nhau. Hình ảnh chiếm một phần ba chiều rộng, văn bản chiếm hai phần ba.
Bố cục này phù hợp cho các trích dẫn, định nghĩa minh họa, hoặc bất kỳ khối biên tập ngắn nào mà hình ảnh củng cố nội dung mà không chiếm ưu thế.
Chữ cái đầu dòng
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Thanh meta
Hiểu biết về token thiết kế
Token thiết kế là nguồn thông tin duy nhất cho các quyết định hình ảnh trên một sản phẩm. Chúng mã hóa màu sắc, khoảng cách, kiểu chữ và chuyển động thành các biến có tên mà các thành phần sử dụng.
Cách khác, khi cách đầu tiên không thành công: câu hỏi, sau đó là giá trị được sao chép chỉ bằng một cú nhấp, hoặc một liên kết. Ngay dưới cái mà nó đại diện, căn chỉnh với nó.
Không quét được? Gõ khóa này vào ứng dụng:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
