Bài 17 — Typography System trong Figma

Mở đầu — vì sao bài này quan trọng

Bạn đã bao giờ mở một file Figma của dự án cũ, rồi phát hiện có tới 47 text style khác nhau chỉ để làm... chữ tiêu đề chưa? "Heading Blue", "Title Big", "H1 New", "H1 New Final", "H1 Homepage Copy 2". Nghe quen không? Đây là căn bệnh kinh điển của những file thiết kế không có typography system (hệ thống chữ) đàng hoàng.

Ở các bài trước, bạn đã học về typography scale (thang cỡ chữ) và type system ở góc độ lý thuyết (Bài 6), và bạn cũng đã nắm Figma cơ bản (Bài 10, 11). Bài 17 này là nơi hai mảng đó gặp nhau: chúng ta sẽ hiện thực hóa một hệ thống typography ngay bên trong Figma bằng Text Styles và Variables, sao cho mỗi vai trò (role) văn bản chỉ tồn tại đúng một lần, có thể tái sử dụng trên hàng trăm màn hình, và bàn giao cho lập trình viên một cách sạch sẽ.

Vì sao chuyện này quan trọng đến vậy? Vì typography chiếm khoảng 90% giao diện. Gần như mọi thứ người dùng nhìn thấy đều là chữ. Nếu hệ thống chữ của bạn lộn xộn, toàn bộ sản phẩm sẽ trông thiếu chuyên nghiệp, và tệ hơn — khi cần đổi font hay điều chỉnh cỡ chữ toàn hệ thống, bạn sẽ phải sửa thủ công từng màn hình một. Một designer làm chủ được typography system trong Figma có thể thay đổi diện mạo cả sản phẩm trong 5 phút; một người không có nó thì mất cả tuần và vẫn bỏ sót.

Khái niệm cốt lõi

Nguyên tắc vàng: style theo role, không theo screen

Đây là câu thần chú bạn phải khắc vào đầu: tạo style cho mỗi vai trò (role), không phải cho mỗi màn hình (screen).

Nghĩa là bạn không đặt tên style theo nơi nó xuất hiện ("Homepage Title", "Product Page Heading"), mà theo chức năng ngữ nghĩa của nó trong hệ thống. Một cấu trúc đặt tên tốt trông như sau:

heading.hero       — 56/64, Bold
heading.h1         — 40/48, Bold
heading.h2         — 32/40, Semibold
heading.h3         — 24/32, Semibold
heading.h4         — 20/28, Semibold
body.large         — 18/28, Regular
body.base          — 16/24, Regular
body.small         — 14/20, Regular
label.default      — 14/20, Medium
caption            — 12/16, Regular
overline           — 11/16, Medium, uppercase

Cách đọc cặp số 56/64 là font-size / line-height (cỡ chữ / chiều cao dòng), đơn vị pixel. Ví dụ heading.hero là chữ 56px với line-height 64px.

Khi đặt tên theo role như vậy, một style body.base sẽ được dùng ở màn hình trang chủ, trang sản phẩm, trang thanh toán, mọi nơi. Nếu một ngày CEO muốn tăng cỡ chữ body từ 16px lên 17px cho dễ đọc trên mobile, bạn chỉ cần sửa đúng một style và toàn bộ 200 màn hình tự cập nhật.

Text Styles vs Variables — dùng cái nào?

Đây là câu hỏi khiến nhiều bạn bối rối vì Figma hiện có hai cơ chế. Hãy phân biệt rõ:

Text Styles đóng gói trọn bộ thuộc tính typography vào một đơn vị: font family, font weight, font size, line height, letter spacing, và cả text case, decoration. Bạn áp một text style vào một text layer, layer đó "khóa" theo style. Đây là cách truyền thống và vẫn là xương sống của typography trong Figma.

Variables (biến) mới hơn, cho phép bạn lưu từng giá trị đơn lẻ — ví dụ một biến số font-size/base = 16, hay biến chuỗi font-family/primary = "Inter". Sức mạnh của variables là theming và modes (Bài 15): bạn có thể có mode "Mobile" khiến font-size/h1 = 32 và mode "Desktop" khiến font-size/h1 = 40, rồi chuyển qua lại chỉ bằng một cú click.

Cách tiếp cận thực dụng nhất năm 2026 là kết hợp cả hai: dùng variables làm lớp giá trị nền tảng (số cỡ chữ, tên font, số line-height), rồi Text Styles tham chiếu đến các variables đó. Figma cho phép bind (gắn) variable vào thuộc tính của text style. Như vậy bạn vừa có tính tổng hợp gọn gàng của Text Styles để áp lên layer, vừa có khả năng đổi mode/theming linh hoạt của Variables ở tầng dưới. Nếu bạn mới bắt đầu và dự án chưa cần multi-mode, cứ dùng Text Styles thuần trước — đừng phức tạp hóa sớm.

Ba trục kiểm soát của một type style

Mỗi text style, dù đơn giản, xoay quanh ba trục bạn cần kiểm soát có chủ đích:

• Size & line-height: cặp đôi luôn đi cùng nhau. Quy tắc kinh nghiệm: chữ càng lớn thì tỉ lệ line-height so với size càng nhỏ. Heading hero 56px chỉ cần line-height khoảng 1.1–1.15 (64px); body 16px cần line-height rộng hơn khoảng 1.5 (24px) để dễ đọc đoạn dài.

• Weight (độ đậm): đừng dùng quá nhiều weight. Ba weight là đủ cho hầu hết sản phẩm: Regular (400) cho body, Medium/Semibold (500/600) cho label và heading nhỏ, Bold (700) cho heading lớn.

• Letter spacing (giãn cách chữ): chữ càng lớn nên giãn cách âm nhẹ (-1% đến -2%) cho chặt chẽ; chữ nhỏ như caption và overline nên giãn cách dương (+2% đến +5%) cho dễ đọc, đặc biệt khi viết hoa.

Tình huống thực tế

Ví dụ 1: Tiki dọn dẹp "rừng style" khi lên design system

Giả định một đội thiết kế tại Tiki (sàn TMĐT lớn của Việt Nam) tiếp quản file Figma đã tồn tại 3 năm qua tay 6 designer. Khi audit, họ đếm được 63 text style và 41 màu chữ khác nhau. Có tới 5 style đều là "chữ tiêu đề 24px Semibold" nhưng đặt tên khác nhau: "Section Title", "H2", "Heading Medium", "Title 24", "Product Name".

Đội ngồi lại và ánh xạ (map) toàn bộ 63 style về một hệ thống chuẩn chỉ còn 12 role. Cách làm: dùng plugin như "Similayer" hoặc "Style Organizer" để tìm mọi layer đang dùng 5 style trùng lặp kia, rồi gộp tất cả về heading.h3. Sau hai ngày, họ xóa được 51 style thừa.

Bài học: một hệ thống typography không cần nhiều — nó cần đủ và duy nhất. 10–14 role bao phủ được 99% nhu cầu của một sản phẩm thương mại điện tử. Sự bừa bộn không đến từ thiếu style, mà từ việc mỗi người tự tạo style mới thay vì tái dùng cái đã có.

Ví dụ 2: MoMo và bài toán tiếng Việt có dấu

Một tình huống rất đặc thù Việt Nam mà designer nước ngoài hiếm khi gặp: dấu thanh tiếng Việt ăn vào line-height. Giả định đội thiết kế MoMo chọn line-height quá chật cho heading (ví dụ 40px chữ với line-height chỉ 44px, tức 1.1). Trên bản tiếng Anh trông ổn, nhưng khi gõ tiếng Việt "Nạp Tiền Điện Thoại", dấu nặng, dấu huyền và dấu mũ ở dòng trên bị cắt cụt hoặc chạm vào dòng dưới.

Cách xử lý: với sản phẩm tiếng Việt, họ nâng line-height của mọi heading lên tối thiểu 1.2–1.25 thay vì 1.1, và test trực tiếp bằng chuỗi chữ có nhiều dấu chồng như "Ưu Đãi Khủng Tháng Giêng". Họ cũng chọn font có hỗ trợ Vietnamese subset tốt (Inter, Be Vietnam Pro, Nunito Sans) và lưu tên font vào một variable font-family/primary để dễ đổi khi cần.

Bài học: typography system không chỉ là con số đẹp trên lý thuyết. Với thị trường Việt Nam, bạn phải test bằng nội dung tiếng Việt thật, nhiều dấu, và thường phải cho line-height thoáng hơn chuẩn phương Tây một chút. Đây là chi tiết phân biệt designer làm cho người Việt với designer bê nguyên template nước ngoài.

Ví dụ 3: Startup fintech đổi font toàn app trong 10 phút

Một startup fintech ở TP.HCM đang dùng font Roboto, nhưng gọi vốn xong, thương hiệu mới yêu cầu chuyển sang Be Vietnam Pro cho toàn bộ 180 màn hình. Nếu file Figma của họ đặt font trực tiếp trên từng layer, đây là cơn ác mộng nhiều ngày.

Nhưng vì họ đã làm đúng — mọi text style đều tham chiếu variable font-family/primary = "Roboto" — designer chỉ cần đổi giá trị variable đó thành "Be Vietnam Pro". Toàn bộ text style, và qua đó toàn bộ 180 màn hình, cập nhật tức thì. Việc còn lại chỉ là rà soát vài chỗ chữ bị tràn do font mới rộng hơn.

Bài học: khoản đầu tư dựng một tầng variable nền tảng ban đầu (mất nửa buổi) sẽ hoàn vốn gấp trăm lần vào đúng những thời điểm quan trọng như rebrand. Đây chính là lý do ta bind text style vào variable thay vì hard-code.

Hướng dẫn từng bước

Dưới đây là quy trình dựng typography system trong Figma từ con số không:

Bước 1 — Chốt danh sách role trên giấy trước. Trước khi mở Figma, liệt kê các vai trò văn bản sản phẩm cần: hero, h1–h4, body large/base/small, label, caption, overline. Đừng tạo style bạn chưa chắc cần.

Bước 2 — Dựng lớp variable nền tảng (nếu dùng). Vào panel Variables, tạo một collection tên "Typography". Thêm các biến số: font-size/hero = 56, font-size/h1 = 40... và biến chuỗi font-family/primary. Nếu cần responsive, tạo mode "Mobile" và "Desktop" với giá trị size khác nhau.

Bước 3 — Tạo Text Style cho từng role. Chọn một text layer, chỉnh đúng size/line-height/weight/letter-spacing cho role đó, rồi ở panel Text bên phải, nhấn biểu tượng style (bốn chấm) và "Create style". Đặt tên theo cấu trúc phân cấp có dấu chấm: heading/hero, body/base. Dấu / giúp Figma tự gom nhóm thành thư mục.

Bước 4 — Bind variable vào style. Với mỗi text style, gắn font-size và font-family vào variable tương ứng để hưởng lợi ích theming. Bước này tùy chọn nhưng rất đáng làm cho dự án dài hạn.

Bước 5 — Đặt tên có hệ thống và nhất quán. Dùng chữ thường, dấu chấm hoặc gạch chéo phân cấp, không dùng tên gắn với màn hình. Thứ tự nhóm nên theo phân cấp thị giác từ lớn xuống nhỏ.

Bước 6 — Test bằng nội dung thật. Áp toàn bộ style vào một màn hình mẫu có nội dung tiếng Việt nhiều dấu. Kiểm tra dấu không bị cắt, đoạn body dễ đọc, và phân cấp rõ ràng.

Bước 7 — Publish thành library. Nếu dùng Figma team, publish file này thành shared library để mọi designer trong đội dùng chung đúng một bộ style.

Lỗi thường gặp & mẹo

Lỗi 1 — Tạo style theo màu. Nhiều bạn tạo heading.h1.blue, heading.h1.white. Sai. Màu là thuộc tính riêng, nên tách ra thành color style/variable (Bài 16). Text style chỉ nên quản size, weight, line-height, letter-spacing. Một text layer sẽ đồng thời mang một text style và một color style độc lập.

Lỗi 2 — Quá nhiều weight và size. Có 9 weight và 15 size không làm sản phẩm tinh tế hơn, chỉ làm nó rối. Hãy giới hạn: khoảng 10–14 role, 3 weight.

Lỗi 3 — Line-height lẻ, không theo grid 8px. Cố gắng để line-height chia hết cho 4 hoặc 8 (Bài 9) để chữ ăn khớp với spacing system. body.base line-height 24 (chia hết 8) tốt hơn 23.

Lỗi 4 — Quên tiếng Việt. Đã nói ở ví dụ 2: luôn nới line-height cho heading và chọn font có Vietnamese subset.

Mẹo — Đặt tên để dev đọc được. Tên role của bạn sẽ trở thành tên biến trong code (ví dụ text-heading-h1). Đặt tên rõ ràng, tiếng Anh, phân cấp — bạn đang bàn giao một API cho lập trình viên, không chỉ đặt tên cho mình.

Mẹo — Dùng plugin audit. "Style Organizer", "Design Lint" giúp phát hiện layer dùng font/size lệch chuẩn (detached) không theo style nào.

Bài tập thực hành

• Mở một file Figma mới. Dựng đầy đủ 12 text style theo bảng role ở phần Khái niệm cốt lõi, đặt tên phân cấp bằng dấu /.

• Tạo một variable collection "Typography" với biến font-family/primary và ít nhất 5 biến font-size/*. Bind chúng vào các text style tương ứng.

• Thiết kế một màn hình "Chi tiết sản phẩm" bằng nội dung tiếng Việt thật (tên sản phẩm nhiều dấu, mô tả, giá, nhãn khuyến mãi), chỉ dùng các style vừa tạo — không được chỉnh size/font trực tiếp trên layer.

• Thử đổi giá trị font-family/primary sang một font khác và quan sát toàn màn hình cập nhật. Ghi lại những chỗ bị tràn chữ.

• Bonus: tạo mode "Mobile" và "Desktop" cho collection, đặt size heading khác nhau, và chuyển đổi để thấy màn hình co giãn.

Tóm tắt

Typography system trong Figma xoay quanh một nguyên tắc duy nhất: style theo role, không theo screen. Bạn dựng khoảng 10–14 text style ứng với các vai trò ngữ nghĩa (hero, h1–h4, body, label, caption, overline), mỗi role kiểm soát ba trục size/line-height, weight và letter-spacing. Với dự án dài hạn, hãy đặt một lớp variables làm nền tảng cho font-family và font-size, rồi để Text Styles tham chiếu đến chúng — nhờ vậy bạn đổi được font hay bật responsive/theming chỉ trong vài phút.

Đừng quên bối cảnh Việt Nam: nới line-height cho heading và chọn font có Vietnamese subset để dấu không bị cắt. Tách màu ra khỏi text style, giữ số lượng style tối thiểu, đặt tên sạch để bàn giao dev. Làm đúng những điều này, bạn không chỉ có một file Figma gọn gàng — bạn có một nền móng typography có thể mở rộng cho cả một sản phẩm và cả một đội ngũ.