�?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

The post Component Properties – Khái niệm và ứng dụng trong Figma appeared first on Cao Đẳng FPT M?ng c�� c??c b��ng ?�� xét tuyển.