Figma Variables (P1): Tại sao lại cần đến Variables?

Về bản chất thì Variables tương tự như khái niệm Design Tokens đã có từ trước.

Tính năng Variables được Figma giới thiệu tại sự kiện Config 2023. Variables giúp thiết kế design system trở nên hiệu quả và mạnh mẽ hơn rất nhiều. Về bản chất thì Variables tương tự như khái niệm Design Tokens đã có từ trước.

Variables giúp quản lý design system chặt chẽ hơn Styles

Style chỉ áp dụng cho color, stroke, typography, image,… Trong khi Variables có thể được dùng cho nhiều nơi hơn như spacing, corner radius, letter spacing,…

Ngoài color ra thì Variable còn có thể mang giá trị dưới dạng number, string, hay boolean.

Variables giúp hand-off design mượt mà hơn

Variables giúp design và production tiến lại gần nhau hơn, mang lại trải nghiệm hand-off liền mạch hơn. Với chức năng ‘Code syntax’ trong Dev Mode, developer có thể tận dụng các variables (tokens) đã được designer tạo sẵn, sau đó xuất ra các đoạn code có tính đồng bộ cao và chỉnh sửa được nhanh chóng hơn.

Variables giúp thiết kế thay đổi theo context

Tuỳ theo các mode được tạo, mà variables có thể thay đổi design theo context như theme, ngôn ngữ, breakpoint,… Tính năng này cũng giúp designer tạo nhanh các option hơn.

Variable giúp quản lý design system thuận tiện hơn

Quan trọng hơn hết, aliasing chính là điểm mấu chốt giúp cho Variables linh hoạt hơn Styles rất nhiều. Một variable (token) có thể tạo các alias cho nhau, tức là giá trị của một variable có thể được kế thừa (reference) từ giá trị của một variable khác.

Trong ví dụ bên trên, nếu sử dụng Styles chúng ta cần phải mò lại những nơi các button được sử dụng rồi đổi color thì quả thật rất mất công và dễ sai sót. Variables giúp chúng ta đổi color đúng các mục tiêu mong muốn một cách có hệ thống và thuận tiện. Một điểm nữa là cái tên variable ‘button-primary-bg’, cũng sẽ mang nhiều ý nghĩa hơn là style ‘Purple /600’.

Khi nào không nên dùng Variables

• Không thể gán gán images, GIFs, videos, và blend modes cho một variable.

• Không thể gán multiple values như gradient cho một variable.

• Để sử dụng chắc năng share library và thay đổi design theo context (mode) thì cần phải nâng cấp lên Profesional.

Tham khảo

• https://help.figma.com/hc/en-us/sections/14506605769879-Variables

• https://www.untitledui.com/