Mở đầu
Là một công cụ mạnh mẽ giúp tối ưu quy trình thiết kế, Figma cung cấp tính năng Variant giúp quản lý hiệu quả các biến thể của component. Tuy nhiên, việc sử dụng Variant không đúng cách có thể ảnh hưởng nhiều đến hiệu quả công việc và chất lượng thiết kế. Trong thực tế, việc bạn sử dụng và tạo ra variant như thế nào thì công cụ sẽ đều cho phép, nhưng điều đó không có nghĩa là cách làm đó hiệu quả.
Dưới đây là 5 sai lầm phổ biến khi sử dụng Variant trong Figma cũng như hướng khắc phục mà các UI/UX Designer cần biết!
5 Sai Lầm Người Mới Thường Gặp Khi Sử Dụng Variant Trong Figma
1. Hệ thống Properties thiếu quy hoạch
Tên và cách bố cục của Properties trong hệ thống Variant nếu không được sắp xếp khoa học sẽ dẫn đến việc khó khăn khi phân loại và sử dụng. Ví dụ, việc đặt tên không logic, không thèm đặt tên hoặc cách đặt tên bị sai nguyên lý để phân loại sẽ khiến việc tìm kiếm và sử dụng Variant trở nên tốn thời gian cho designer. Ví dụ: bạn tạo ra các variant button và để tên mặc định như trên hình, khi cần chọn ra một variant phù hợp cho tình huống thiết kế, bạn phải lọc từng dạng hình để biết chính xác cái trạng thái mà button đang tồn tại là gì
Designer cần xây dựng hệ thống Properties chặt chẽ, logic, đảm bảo tính nhất quán và dễ dàng tìm kiếm. Sử dụng các quy tắc đặt tên rõ ràng, phân nhóm Properties hợp lý và bố cục khoa học sẽ giúp hệ thống Variant trở nên dễ sử dụng và hiệu quả hơn. Việc này còn có một ý nghĩa lớn trong việc phân loại các trạng thái hoặc trường hợp của một element thiết kế trong tương lai, nếu nhìn vào một thiết kế lớn bạn sẽ thấy một hệ thống component có cấu trúc đặt tên và phân chia properties rất khoa học, hiệu quả.
2. Lạm dụng Variant thay vì sử dụng Component
Việc sử dụng Variant cho tất cả các trường hợp thay vì phân tách thành Component riêng biệt sẽ dẫn đến hệ thống phức tạp và khó quản lý. Variant phù hợp cho các trạng thái hoặc trường hợp hiển thị của elements. Ví dụ như sử dụng Variant cho các trạng thái bật/tắt của nút bấm, hoặc điển hình nhất là nhét toàn bộ icon vào 1 component duy nhất và chia chúng nó ra các variants, cực kì nặng.
Khi cần thể hiện nhiều elements, hãy chia tách thành Component riêng. Ví dụ, các Variant là icon; các Variant là các version thiết kế cũ của một element.
3. Bỏ qua Component Properties
Một sai lầm thường gặp khác là chỉ sử dụng Variant mà không tận dụng Component Properties để quản lý phân loại dựa trên nội dung, khiến thư viện trở nên lộn xộn và thiếu khoa học. Component Properties cung cấp các thuộc tính bổ sung cho Component, giúp designer quản lý và phân loại Component hiệu quả hơn.
Kết hợp Variant với Component Properties để phân loại hiệu quả, giúp hệ thống dễ dàng quản lý và tìm kiếm. Ví dụ, bật tắt hiển thị icon của nút bấm, thay đổi icon và nội dung chữ CTA trên button. Nhân tiện, bạn có biết câu khẩu quyết trong lớp Figma của TELOS để chọn xem khi nào chọn properties, khi nào thì tạo variant? Có bí quyết cả đấy.
4. Nhiều variants = tốt? Chưa chắc à nha
Có nhiều thư viện sẽ cho bạn một component với 150 variants hoặc hơn, để đảm bảo đủ các trạng thái của một đối tượng. Tuy nhiên nhiều không hẳn là tốt, mà thật ra đủ và vừa phải mới là hợp lý. Hãy tưởng tượng việc xem variants như những người quản lý của một công ty và các instance được copy ra sẽ là nhân sự xuất hiện trong thiết kế. Sẽ ra sao nếu một công ty có 5 nhân viên nhưng tận 40 giám đốc? Đây cũng sẽ là tình trạng khi mà bạn có quá nhiều variant trong khi thiết kế thì không dùng nhiều đến thế.
Quản lý hệ thống tốt hẳn sẽ khiến số lượng variant tinh gọn lại, tuy nhiên điều đó cần nhiều tư duy. Đây sẽ là một số mẹo, thay vì tạo nhiều Variant, hãy cân nhắc:
- Chia tách thành nhiều Component phụ: Phân chia element bạn đang làm thành các phần nhỏ hơn, mỗi phần có thể là một component riêng
- Sử dụng Component Properties: Tận dụng Component Properties để phân loại Variant theo nội dung, giúp giảm số lượng Variant cần thiết
- Loại bỏ các phân loại không cần thiết: Phân tích nhu cầu sử dụng và loại bỏ các Variant không thực sự cần thiết
5. Bỏ qua các công cụ quản lý khác
Chỉ sử dụng Variant mà bỏ qua các công cụ quản lý hệ thống khác trong Figma như Style, Variable thì hệ thống sẽ bị cồng kềnh và kém hiệu quả. Figma cung cấp nhiều công cụ quản lý hệ thống khác nhau, mỗi công cụ có chức năng riêng biệt giúp designer tối ưu hóa quy trình thiết kế.
Vd:
- Style: Quản lý màu sắc, chữ, hiệu ứng cho các elements trong hệ thống thiết kế
- Variable: Quản lý các giá trị số và biến số, giúp designer dễ dàng thay đổi giá trị trong toàn bộ hệ thống mà không cần chỉnh sửa từng Component riêng biệt
Kết
Và còn những điểm nào cần lưu ý nữa hay không? chắc hẳn là nhiều rồi, nhưng vậy thì làm sao để có thể nhớ được hết hay không bao giờ phạm phải các sai lầm đó? hãy thực tập nhiều lên và học tập thêm trong quá trình sử dụng.
Trên đây là những sai lầm thường gặp khi sử dụng Variant trong Figma và cũng là kiến thức của buổi học thứ 2 trong khóa học Figma tại TELOS Academy. Để học cách sử dụng Figma hiệu quả, định hướng tư duy hệ thống và giảm đến hơn 60% thời gian cho các thao tác, bạn có thể tham khảo khóa học nhé!
