Ở Bài 5, bạn đã học cách tạo ra các Component và sử dụng Auto Layout để cấu trúc thiết kế co giãn linh hoạt. Tuy nhiên, hãy tưởng tượng một kịch bản: Khách hàng yêu cầu thay đổi màu chủ đạo của ứng dụng từ "Xanh dương" sang "Cam", và đổi toàn bộ font chữ từ "Inter" sang "Roboto".
Nếu bạn đang chọn màu thủ công (dán mã Hex) cho từng nút bấm, bạn sẽ mất hàng giờ để sửa đổi. Đây là lúc Styles (Kiểu dáng) trong Figma phát huy sức mạnh.
Trong bài học này, chúng ta sẽ đi sâu vào cách xây dựng hệ thống Styles cho Màu sắc (Color), Chữ viết (Typography), Hiệu ứng (Effects) và Lưới (Grids) để đảm bảo thiết kế của bạn luôn nhất quán, chuyên nghiệp và dễ dàng cập nhật.
Styles là bộ tính năng cho phép bạn lưu trữ các thuộc tính thiết kế (như mã màu, thông số font chữ, độ mờ bóng đổ) thành các biến số có thể tái sử dụng.
Tại sao phải dùng Styles?
Tính nhất quán (Consistency): Tránh tình trạng "lệch màu" (ví dụ: dùng 5 mã màu xám khác nhau cho cùng một chức năng).
Tốc độ chỉnh sửa (Efficiency): Khi sửa Style gốc, mọi đối tượng đang dùng Style đó sẽ cập nhật ngay lập tức.
Tối ưu quy trình (Workflow): Giúp lập trình viên (Developer) dễ dàng đọc thông số khi Code.
II. Color Styles (Paint Styles): Quản lý màu sắc
Figma gọi là Paint Styles vì nó không chỉ lưu màu đơn sắc (Solid) mà còn lưu được màu chuyển (Gradient) và hình ảnh (Image)
- Chọn một đối tượng đã tô màu (ví dụ: một hình chữ nhật).
Nhìn sang thanh Properties bên phải, tại mục Fill, click vào biểu tượng Style (hình 4 dấu chấm vuông
::).Click vào dấu cộng (+) ở góc trên menu.
Đặt tên cho Style và nhấn Create style.
Mẹo đặt tên (Naming Convention): Sử dụng dấu gạch chéo
/để gom nhóm.Ví dụ: Đặt tên
Primary/Blue 500,Primary/Blue 600,Neutral/Grey 100.Figma sẽ tự động tạo thư mục
PrimaryvàNeutralgiúp bảng màu gọn gàng hơn.
- Click ra ngoài khoảng trống (Descent all).
- Nhìn vào thanh bên phải, bạn sẽ thấy danh sách Local Styles.
- Click vào biểu tượng Edit Style (hình thanh trượt) bên cạnh tên màu để đổi mã màu.
III. Text Styles: Chuẩn hóa Typography
Sai lầm phổ biến của người mới là chỉnh cỡ chữ "theo cảm hứng". Text Styles giúp bạn thiết lập hệ thống phân cấp thông tin (Hierarchy) rõ ràng.
- Font Family (Tên font).
- Font Weight (Độ dày: Bold, Regular...).
- Font Size (Kích thước).
- Line Height (Khoảng cách dòng) & Letter Spacing.
Lưu ý quan trọng: Text Style trong Figma KHÔNG lưu màu sắc. Điều này cho phép bạn dùng cùng một kiểu chữ "Heading 1" nhưng có thể tô màu Đen, Trắng hoặc Đỏ tùy ý.
- Headings: H1 (32px), H2 (24px), H3 (20px) - Dùng cho tiêu đề.
- Body: Body Large (16px), Body Medium (14px) - Dùng cho nội dung chính.
- Caption: Caption (12px) - Dùng cho chú thích nhỏ.
IV. Effect Styles & Grid Styles
Ngoài màu và chữ, đừng quên lưu lại các hiệu ứng để tạo chiều sâu (Depth) cho thiết kế.
Effect Styles
Thường dùng cho Drop Shadow (Bóng đổ) hoặc Layer Blur.
Ví dụ: Tạo style
Shadow/Smallcho các nút bấm thường, vàShadow/Largecho các thông báo nổi (Pop-up).
Nếu ở Bài 4 bạn đã học về lưới, hãy lưu chúng lại thành Style.
Tạo
Grid/Desktop(12 cột) vàGrid/Mobile(4 cột).Việc này giúp bạn áp dụng lưới chuẩn vào bất kỳ Frame mới nào chỉ với 2 click.
V. Thực hành: Xây dựng Mini Design System
Bước 1: Tạo bảng màu (Color Palette)
Tạo 3 hình vuông. Tô màu Xanh (Chủ đạo), Đỏ (Cảnh báo), Xám (Văn bản).
Lưu chúng thành Styles:
Brand/Primary,Semantic/Error,Neutral/Text.
Bước 2: Tạo kiểu chữ (Typography)
Viết dòng chữ "Tiêu đề bài viết" -> Chỉnh size 24px, Bold -> Lưu thành style
Heading/H2.Viết dòng "Nội dung chi tiết..." -> Chỉnh size 16px, Regular -> Lưu thành style
Body/Regular.
Bước 3: Áp dụng vào Component (Kết hợp bài 5)
Lấy một Button bạn đã tạo từ bài trước.
Gán màu nền bằng
Brand/Primary.Gán chữ bên trong bằng
Body/Regular.Thử đổi màu gốc của
Brand/Primarysang màu Tím và xem Button tự động đổi màu theo!
VI. Tổng kết
Chúc mừng bạn! Bạn đã chuyển từ việc "vẽ tự do" sang tư duy [Atomic Design] (thiết kế có hệ thống). Việc quản lý Styles là kỹ năng bắt buộc của một UI Designer chuyên nghiệp để tạo ra sản phẩm đồng bộ.Tuy nhiên, Styles mới chỉ giải quyết vấn đề về màu sắc và font chữ. Làm thế nào để quản lý một cái nút bấm có nhiều trạng thái phức tạp như trong Material Design: Khi di chuột vào (Hover), Khi bị vô hiệu hóa (Disabled), hay Đổi icon?Chúng ta sẽ giải quyết vấn đề này trong Bài 7: Variants và Component Properties. Đây là bài học sẽ đưa kỹ năng Component của bạn lên một tầm cao mới.
