Design Token không phải là tiền ảo đâu nha

Lần đầu nghe đến cụm “Design Token”, thật lòng mà nói, mình nghĩ đến cái gì đó rất... blockchain, NFT hay gì đó đại loại vậy. Nhưng mãi sau khi đi làm được một khoảng thời gian khá dài, mình mới biết Token ở đây không để mua bán. Nó đơn giản là một cách gọi tên có hệ thống cho những thứ nhỏ xíu nhưng xuất hiện khắp nơi trong UI: Màu sắc. Font chữ. Khoảng cách. Bo góc…

Nhưng vì không tìm hiểu và cứ nghĩ mình đã nắm hết được figma rồi nên mình đã bỏ qua nó, và bỏ qua trong một khoảng thời gian… rất lâu.

Chapter 01 - Một ngày, câu hỏi tưởng đơn giản lại khiến mình bối rối

Khi làm một hệ thống UI cho app tài chính, mình chọn màu trực tiếp trong Figma theo cảm tính. Xanh thì mình chọn một tone dịu. Heading thì tăng font size tuỳ… tâm trạng. Padding giữa các nút và icon thì… theo tổ tiên mách bảo.

Mọi thứ vẫn chạy ổn – cho đến khi dev hỏi:

“Hiếu ơi, màu này là mã gì em nhỉ?”
“Khoảng cách chỗ này là bao nhiêu px vậy em?”
“Sao nút bên màn kia hơi khác?”

Mình loay hoay mở từng frame, đo lại từng thành phần. Và BÙMMMM, mình nhận ra là mình không thật sự kiểm soát được hệ thống do chính tay mình đã vẽ ra.

Chapter 02 - Token cho mình thấy một lối đi ổn định hơn

Design token là cách đặt tên có hệ thống cho những giá trị thiết kế cơ bản: màu sắc, khoảng cách, font size, độ bo góc, v.v. Thay vì mỗi lần đều chọn lại mã màu #3278FF, mình đặt tên nó là primary/blue. Spacing 8px thì gọi là spacing/sm. Font 16px là text/base.

Cách này thoạt nghe thì có vẻ kỹ thuật và hơi "coder" một chút, nhưng tin mình đi, nó giúp cả team rất dễ hiểu và có tiếng nói chung, cũng như để dùng lại sau này. Mỗi lần cần thay đổi gì, ví dụ như điều chỉnh tone màu hoặc làm dark mode là mình chỉ cần sửa một token thay vì đi sửa tay từng frame.

Chapter 03 - Hiểu vấn đề và bắt đầu từ những thứ đơn giản

Là một UI/UX Designer nhưng đã từng xắn tay vào code, "tranh việc" với Front-end dev tại VNEXT Software, mình thấy nếu phần thiết kế của mình có logic rõ ràng, thì dev đỡ hỏi, QA đỡ nhầm, và việc bàn giao trơn tru hơn rất nhiều. Và đó cũng là lúc mình bắt đầu xem việc xây dựng token là một phần quan trọng trong thiết kế hệ thống. Không chỉ là “thêm thắt cho đẹp”, để thể hiện mình "pro", mà là để xây “nền móng giúp mọi thứ đi xa hơn”.

Mình không dùng đến plugin hay công cụ gì cao siêu, mình chỉ ngồi lại, rà soát các giá trị hay dùng lặp đi lặp lại, gom nhóm, và đặt tên rõ ràng. Một file Figma gọn gàng, nhất quán, chính là bước đầu tiên để có một mini design system ổn định. Không cần phải quá đầy đủ, chỉ cần chính mình và dev hiểu và dùng được là được.

Lời khuyên

Mình từng nghĩ token là khái niệm xa vời, nhưng giờ mình thấy đó là một trong những điều cơ bản nhất để làm việc chuyên nghiệp hơn. Không chỉ cho team, mà cho chính mình. Để mỗi lần thiết kế lại, mình không phải bắt đầu lại từ đầu.

Nếu bạn đang bắt đầu làm UI/UX và còn cảm thấy lúng túng với việc “hệ thống hóa” thiết kế, thì mình nghĩ token là thứ rất nên thử trước. Chỉ cần bắt đầu từ một vài thứ lặp lại và đặt tên cho chúng là mọi thứ sẽ dần dễ thở hơn. Thật đấy!