Component properties là các thuộc tính của một component, instance hoặc variant, có bao gồm kích thước, màu sắc, vị trí, độ trong suốt và các thuộc tính khác. Các thuộc tính này có thể được tùy chỉnh để thay đổi hình dạng và nội dung của các phần từ thiết kế. Nên component trong Figma giúp chúng ta có thể thiết kế và sử dụng và chỉnh sửa hàng loạt ở khắp mọi nơi. 

Ở bài viết này, chúng ta cùng tìm hiểu về các loại Component properties mà Figma có thể tạo ra nhé! 

Ứng dụng Component properties trong thiết kế giao diện

Giả sử bạn có một frame sản phẩm muốn tái sử dụng ở nhiều nơi khác trong dự án và bạn muốn thay một đoạn text để phù hợp theo tên của từng sản phẩm, bạn có thể áp dụng Component properties cho đoạn text đó.

Bước 1: Biến Frame thành Component (Ctrl + alt +K) sau đó tạo cho Frame 1 Variant (biến thể). 

Bước 2: Chọn vào đoạn text muốn thay đổi và chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm tổ hợp phím Ctrl + alt + A để chọn tất cả các biến thể của text đó.

Bước 3: Chọn Create text property, sau đó tùy chỉnh Name (tên của component property) và Value (giá trị text) rồi lưu lại. 

Sau đó bạn có thể dễ dàng thay đổi tên của các sản phẩm tại các Instance (biến thể) khác chỉ với 1 nút bấm.

Tiếp theo bạn muốn nút Pre Order chỉ xuất hiện ở những sản phẩm nhất định. Vậy thì bạn có thể áp dụng Component property boolean.

Bước 1: Chọn vào nút PreOrder rồi chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm tổ hợp phím Ctral + alt + A để chọn tất cả các biến thể của nút đó.

Bước 2: Chọn Create boolean property rồi thay đổi Name tương ứng.

Sau đó bạn có thể dễ dàng cho ẩn/hiện trạng thái của nút Pre Order bằng Component property boolean cho các biến Instance (biến thể) mong muốn.

Cuối cùng, muốn thay đổi các icon cho phù hợp với từng sản phẩm, bạn thể áp dụng Component properties Instance swap. 

Bước 1: Biến các icon muốn thay đổi thành các component (Ctrl + Alt +K). Sau đó chọn  các icon đó rồi nhấn tổ hợp phím Ctrl + R để đổi tên cho nhóm icon đó và thêm thuộc tính Current name ở bên dưới để có thể phân loại icon theo tên. 

Bước 2: Sau khi thêm icon vào vị trí phù hợp, chúng ta chọn vào biểu tượng tâm ngắn bên dưới hoặc bấm tổ hợp phím Ctrl + alt + A để chọn tất cả các biến thể của icon đó.

Cuối cùng chọn create instance swap property và đặt tên cho property đó.

Trên đây là những hướng dẫn về Component Properties với 3 cách ứng dụng khác nhau. Từ đây bạn có thể thỏa thích thay đổi icon cho các Instance (biến thể) khác một cách dễ dàng. Chúc các bạn thành công!

Bộ môn Công nghệ thông tin
Trường Cao đẳng FPT Mạng cá cược bóng đá cơ sở Hà Nội