5 Sai Lầm Người Mới Thường Gặp Khi Sử Dụng Variant Trong Figma 

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ế.

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!

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.

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.

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.

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.

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ý.

Thay vì tạo nhiều Variant, hãy cân nhắc:

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:

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é!