Cách tạo các thuộc tính thành phần (component properties) trong Figma

[VNR Content]

Component properties là gì? Sự khác nhau giữa Variant và Component properties
Ở các bài viết trước, mình đã giới thiệu cách tạo và sử dụng component, variants cũng như đề cập đến các thuộc tính biến thể (variant properties). Bài viết này mình sẽ giới thiệu về component properties, cùng tìm hiểu xem đó là gì và khác gì so với variant properties nhé!
Properties (thuộc tính) có thể được coi là các cách thức phân loại.
Variant properties là những thuộc tính mang tính phân loại cao, ảnh hưởng đến cấu trúc, ví dụ như kích thước, trạng thái, màu sắc…
Bên cạnh variant properties còn có component properties - là những thuộc tính có tính phân loại thấp hơn nhưng tính tùy biến cao, ví dụ như nội dung text, tùy chọn yes/no, on/off…
Trong trường hợp cần thay đổi nội dung của component, nếu tạo quá nhiều variants thì tính ứng dụng phân loại không cao, và cũng khó quản lý. Thay vào đó, chúng ta có thể tạo component properties để việc sử dụng và quản lý được hợp lý hơn. Bạn cần xác định những phần nào của component mà mình có thể thay đổi bằng cách gán chúng vào các thuộc tính thiết kế cụ thể. Điều này cho phép bạn kiểm soát việc các lớp (layers) có hiển thị hay không, có thể hoán đổi biểu tượng (icon) hoặc có thể thay đổi text không…
Lưu ý: Component properties không hỗ trợ tương tác prototype. Nếu muốn tạo prototype với các components, bạn vẫn cần sử dụng variants. Bởi vậy, trước khi áp dụng component properties, bạn nên xem lại hệ thống thiết kế hiện có của mình, để quyết định xem khía cạnh nào có thể phản ánh dưới dạng component properties, khía cạnh nào cần phải là variants.

Các loại thuộc tính​

Thuộc tính thành phần được gắn với các thuộc tính thiết kế khác nhau. Bạn có thể tạo các thuộc tính thành phần cho bất kỳ thành phần chính (main component) hoặc bộ thành phần (component set) nào và áp dụng chúng cho các lớp lồng nhau của thành phần (component) hoặc biến thể (variant).
Thuộc tính thành phần có nhiều loại khác nhau:

• Thuộc tính biến thể (Variant properties)
• Thuộc tính hoán đổi bản sao (Instance swap properties)
• Thuộc tính văn bản (Text properties)
• Thuộc tính phép toán logic (Boolean properties)

1. Thuộc tính biến thể (Variant property)
Variant là 1 component độc lập trong 1 component set.
Variant property cho phép bạn xác định các thuộc tính của biến thể, chẳng hạn như trạng thái, màu sắc hoặc kích thước.
Một bộ thành phần (component set) chứa nhiều variants, và các variants mang các thuộc tính có thể được xác định bằng variant properties. Variant properties dành riêng cho các variants và component sets, không thể tạo hoặc áp dụng cho các main components.
Trong ví dụ dưới, chúng ta có 1 bộ thành phần nút (button component set) với 4 biến thể. Có 2 thuộc tính biến thể: kích thước và màu sắc. Các giá trị kích thước bao gồm nhỏ và lớn, các giá trị màu bao gồm màu xanh lá cây và đỏ.

2. Thuộc tính hoán đổi bản sao (Instance swap property)
Instance swap property cho biết instance nào trong 1 main component hoặc variant có thể được hoán đổi. Khi tạo instance swap property, bạn có thể xác định giá trị bản sao mặc định từ các thư viện cục bộ hoặc thư viện đã được kích hoạt bất kỳ.
Khi sử dụng thuộc tính này, bạn sẽ được cung cấp 1 instance swap menu để hoán đổi trong cùng một tập hợp con thành phần hoặc một tài sản từ bất kỳ thư viện có sẵn nào.
Các instances đã được lồng và mang thuộc tính này chỉ có thể được hoán đổi ở lớp trên cùng của component cha của nó. Bạn sẽ không thể hoán đổi nó cho 1 instance khác nếu bạn chọn instance đã được lồng rồi.
3. Thuộc tính văn bản (Text property)
Thuộc tính văn bản được sử dụng để nhận biết lớp văn bản nào nên được chỉnh sửa.
Cho dù bạn đang quản lý giá trị mặc định của thuộc tính văn bản hay đang sử dụng một đối tượng chứa nó, thì chuỗi văn bản đều có thể được chỉnh sửa từ thanh bên bên phải hoặc trên bản vẽ. Giá trị cập nhật theo cả hai hướng.
Các lớp không có thuộc tính này được áp dụng vẫn có thể được cập nhật.
4. Thuộc tính phép toán logic (Boolean property)
Sử dụng thuộc tính boolean để đặt giá trị true / false, cho phép người dùng bật hoặc tắt thuộc tính thông thường.
Ví dụ: nếu hệ thống thiết kế chứa các nút có và không có icon, thay vì tạo các variants cho từng trạng thái, hãy áp dụng thuộc tính boolean cho khả năng hiển thị lớp của icon.

Cách tạo component properties​

Bạn có thể tạo các thuộc tính thành phần ở 2 cấp độ: lớp cha hoặc lớp con của 1 component.
Bất kỳ thuộc tính thành phần nào cũng có thể được tạo từ lớp cha của một thành phần. Bạn không thể tạo thuộc tính biến thể từ lớp con.

1. Tạo component properties từ các lớp con
Tạo component properties từ lớp con của 1 main component hoặc 1 variant. Thao tác này sẽ tạo thuộc tính và áp dụng nó cho bất kỳ layer nào mà bạn chọn cùng 1 lúc.
a. Instance swap property

• Bước 1: Chọn 1 instance được lồng trong 1 main component hoặc variant
• Bước 2: Ở bên cạnh swap instance dropdown tại thanh bên bên phải, nhấn button Apply instance swap property để tạo thuộc tính. Thao tác này sẽ mở ra modal tạo thuộc tính thành phần.

• Bước 3: Đặt tên cho thuộc tính trong text field
• Bước 4: Đặt giá trị mặc định bằng cách sử dụng dropdown để chọn 1 instance từ local components (trong file hiện tại hoặc bất kỳ thư viện có sẵn nào).
• Bước 5: Nhấn vào create property. Khi đã áp dụng xong, bạn sẽ thấy 1 hình thoi màu tím và tên thuộc tính trong instance dropdown ở thanh bên bên phải.

b. Text property

• Bước 1: Chọn 1 text layer được lồng trong 1 main component hoặc variant
• Bước 2: Nhấn button Apply text property trong phần content tại thanh bên bên phải để tạo thuộc tính. Thao tác này sẽ mở ra modal tạo thuộc tính thành phần.
  • Nhập tên thuộc tính vào text field
  • Nhập text mặc định vào trường value. Nếu bạn đặt giá trị mặc định khác với text hiện tại, Figma sẽ cập nhật chuỗi text khớp với giá trị mới này.
• Bước 3: Nhấn create property. Sau khi áp dụng, bạn sẽ thấy 1 hình thoi màu tím và tên thuộc tính trong phần content ở thanh bên bên phải.

c. Boolean property

• Bước 1: Chọn 1 layer được lồng trong 1 main component hoặc variant
• Bước 2: Nhấn button Apply boolean property trong phần layers tại thanh bên bên phải để tạo thuộc tính. Thao tác này sẽ mở ra modal tạo thuộc tính thành phần.
  • Nhập tên thuộc tính vào text field
  • Đặt giá trị mặc định thành true hoặc false.
• Bước 3: Nhấn create property. Sau khi áp dụng, bạn sẽ thấy 1 hình mắt màu tím và tên thuộc tính bên cạnh thuộc tính tương ứng ở thanh bên bên phải.

2. Tạo component properties từ lớp cha
Tạo 1 component property với component set hoặc main component đã được chọn. Phương pháp này hỗ trợ tạo tất cả các loại thuộc tính, bao gồm cả variant property.
Cách tiếp cận này chỉ tạo thuộc tính, bạn sẽ cần áp dụng các thuộc tính cho các layer con riêng biệt.
Để tạo component property từ layer cha:

• Bước 1: Chọn 1 main component hoặc component set và nhấn vào phần Properties tại thanh bên bên phải. Dropdown với các tùy chọn component property sẽ xuất hiện.

• Bước 2: Chọn 1 thuộc tính:
  • Variant property
  • Instance swap property
  • Text property
  • Boolean property
• Bước 3: Sử dụng các trường và dropdown trong modal create component property để đặt tên thuộc tính và giá trị mặc định.

3. Áp dụng
Cách áp dụng 1 component property vào 1 layer đã được lồng ghép:

• Bước 1: Chọn 1 layer được lồng trong 1 main component hoặc variant
• Bước 2: Tại thanh bên bên phải, tìm phần dành cho thuộc tính mà bạn đang muốn áp dụng. Nhấn để hiển thị dropdown chứa các thuộc tính liên quan hoặc đang có:

Nếu dropdown không xuất hiện, mà thay vào đó là modal create component property, tức là thuộc tính thuộc loại đó chưa tồn tại trong component đó. Khi đó bạn cần tạo component property trước.

• Bước 3: Tại dropdown, nhấn 1 property để áp dụng nó cho layer mà bạn đã chọn. Sau đó, bạn sẽ thấy 1 hình thoi màu tím với icon và tên thuộc tính tại thanh bên bên phải.

Nguồn tham khảo:​

• Create and use component properties
• Hướng dẫn Figma - COMPONENT PROPERTIES