Component trong Figma Archives - Cao Đẳng FPT M?ng c c??c bng ? xét tuyển //westview-heights.com/tag/component-trong-figma Cao Đẳng FPT M?ng c c??c bng ? tuyển sinh theo hình thức xét tuyển h?sơ. Tiêu chí đào tạo: Thực học ?Thực nghiệp! Wed, 25 Oct 2023 15:22:19 +0000 vi hourly 1 //wordpress.org/?v=6.4.1 //westview-heights.com/wp-content/uploads/cropped-logo-fpt-32x32.png Component trong Figma Archives - Cao Đẳng FPT M?ng c c??c bng ? xét tuyển //westview-heights.com/tag/component-trong-figma 32 32 Component trong Figma Archives - Cao Đẳng FPT M?ng c c??c bng ? xét tuyển //westview-heights.com/tin-tuc-poly/ha-noi-tin-sinh-vien/component-properties-khai-niem-va-ung-dung-trong-figma.html Wed, 25 Oct 2023 15:21:01 +0000 //westview-heights.com/?p=258610 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 ...

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 bng ? xét tuyển.

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

Ứng dụng Component Properties trong Figma

?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 bng ? 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 bng ? xét tuyển.

]]>