Cách tạo component để tái sử dụng trong thiết kế

Trong bài viết Figma là gì? Cách cài đặt và sử dụng Figma, khi giới thiệu các tính năng nổi bật của công cụ này (trong đó có Chức năng Figma dành cho team) mình cũng đã đề cập đến Design System (hệ thống thiết kế) - một phần thiết yếu đối với nhiều công ty hiện nay. Design System sử dụng các thành phần (components) để tái sử dụng trong nhiều ngữ cảnh. Chúng ta có thể tập hợp các thành phần lại thành một thư viện (Figma team library) để tất cả các thành viên của dự án (UI/UX designer, front-end developer…) truy cập, xem và sử dụng. Bởi vậy, sau Autolayout - tính năng thông minh và mạnh nhất của Figma, mình nhận thấy Components chính là tính năng thú vị và quan trọng thứ hai, giúp chúng ta tiết kiệm nhiều thời gian và đảm bảo tính nhất quán cho các thiết kế của dự án.

Bạn có thể xem video hướng dẫn cơ bản về cách tạo và giới thiệu qua các thuộc tính của component tại đây.

Component là gì?

Component là yếu tố, thành phần mà bạn có thể sử dụng lại trên các thiết kế của mình, giúp bạn tạo và quản lý các thiết kế nhất quán trong các dự án.

Bạn có thể tạo component từ bất kỳ lớp hoặc đối tượng nào bạn đã thiết kế. Component có thể là một loạt những đối tượng như nút (buttons), biểu tượng (icons), bố cục (layouts),…

Có 2 khía cạnh đối với 1 component:

• Main component: Thành phần chính xác định các thuộc tính của component.
• Instance: Bản sao của component mà bạn có thể sử dụng lại trong các thiết kế của mình. Các bản sao được liên kết với main component và nhận bất kỳ bản cập nhật nào được thực hiện trên thành phần chính.

Bạn có thể tạo các components để sử dụng trong 1 file đơn lẻ, hoặc cũng có thể sử dụng thư viện nhóm (team library) để chia sẻ components và styles trên nhiều files và dự án.

Các components mà bạn tạo có thể được phân thành các nhóm chính để dễ theo dõi và dễ tìm khi cần sử dụng, bạn nên tạo frame riêng cho từng nhóm component như colors, buttons, typography, text field, dropdownlist… Khi cần dùng đến component nào, bạn chỉ cần tìm đến frame nhóm đó và kéo thành phần mình cần ra từ đó.

Bạn có thể tạo component từ bộ sưu tập các đối tượng (objects) hoặc lớp (layers) bất kỳ. Components có thể đơn giản là các hình khối (shapes), nút (buttons), trường (fields), hoặc phức tạp hơn như các thẻ (cards) và menu…

Gợi ý:

• Khi tạo component và xây dựng hệ thống thiết kế của mình, bạn sẽ thấy nhu cầu về các thành phần tương tự nhau, chỉ có một số khác biệt nhỏ.
• Các biến thể (variants) cho phép bạn nhóm và tổ chức các components tương tự vào một vùng chứa duy nhất. Điều này đơn giản hóa thư viện thành phần của bạn và giúp mọi người dễ dàng tìm thấy thứ họ cần hơn.

Bạn có thể tạo 1 component đơn lẻ được chọn từ các lớp (layers) hoặc tạo một loạt các components riêng được chọn từ các đối tượng (objects)

1. Tạo component đơn lẻ

• Bước 1: Chọn các layers bạn muốn đưa vào component.
• Bước 2: Tiếp đó, bạn có thể tạo component bằng 1 trong các cách sau:
  • Nhấp vào button “Create component” trên thanh công cụ.
  • Chuột phải vào đối tượng bạn đã chọn và click “Create component”.
  • Sử dụng các phím tắt:
    • Mac: ⌥ Option - ⌘ Command - K
    • Windows: Ctrl + Alt + K
• Bước 3: Figma sẽ lồng các layers vào một khung thành phần đặc biệt (special component frame). Bạn có thể nhận biết các components trong bảng điều khiển Layers (ở thanh bên bên trái) bằng biểu tượng màu tím
• Bước 4: Trong thanh bên bên phải, hãy thêm Description và Documentation link dành cho cộng tác viên. Cộng tác viên và dev có thể xem thông tin này trong bảng Inspect panel.

2. Tạo components hàng loạt

Theo mặc định, hành động “Create component” sẽ tạo 1 component đơn lẻ từ đối tượng mà bạn chọn.

Bạn cũng có thể tạo một loạt components cùng lúc. Điều này cho phép bạn chọn nhiều nhóm hoặc khung, và tạo các components từ chúng. Chúng ta có thể tạo nhiều components từ:

• Đối tượng (object) và lớp (layer) trong khung (frame)
• Đối tượng và lớp trong nhóm (group)
• Các lớp đơn lẻ, như một đường dẫn hoặc mạng vectơ
• Các lớp trong một bảng phép toán logic

Lưu ý: Nếu bạn chọn nhiều layers không thuộc 1 trong các cấu hình trên, Figma sẽ tạo 1 component cho từng layer riêng lẻ

• Bước 1: Chọn các layers mà bạn muốn tạo components từ đó
• Bước 2: Nhấn button mũi tên xổ xuống bên cạnh button Create component ở thanh công cụ
• Bước 3: Chọn “Create Multiple components” trong menu tùy chọn
• Bước 4: Figma sẽ tạo component cho từng khung (frame), nhóm (group), bảng phép toán logic (boolean operation) hoặc đường dẫn (path)