Trong bài học trước về Frame presets và Constraints, chúng ta đã học cách tạo ra các khung xương cơ bản cho giao diện. Tuy nhiên, để thực sự bước chân vào thế giới UI/UX chuyên nghiệp và xây dựng những hệ thống thiết kế (Design System) quy mô lớn, bạn cần hai vũ khí tối thượng: Auto Layout (Bố cục tự động) và Components (Thành phần tái sử dụng).
Trước khi Auto Layout ra đời, Designer phải căn chỉnh khoảng cách (padding, margin) bằng tay. Mỗi khi thay đổi nội dung text, bạn phải hì hục kéo lại khung. Auto Layout sinh ra để giải quyết nỗi đau đó. Nó mô phỏng cách hoạt động của Flexbox trong CSS, giúp thiết kế tự động "thở" và co giãn theo nội dung.
1.1. Auto layout là gì?
Auto Layout là một thuộc tính đặc biệt mà bạn có thể áp dụng cho Frame. Khi kích hoạt, Frame đó sẽ tự động sắp xếp các phần tử con bên trong theo quy tắc bạn đặt ra (Hàng ngang hoặc Hàng dọc) và tự động thay đổi kích thước dựa trên nội dung.
Tại sao Auto Layout là bắt buộc phải biết?
Tự động hóa: Nút bấm (Button) tự dài ra khi bạn gõ text dài hơn.
Nhất quán: Đảm bảo khoảng cách giữa các phần tử luôn chính xác từng pixel.
Dễ dàng chỉnh sửa: Kéo thả để thay đổi vị trí các phần tử mà không cần căn chỉnh lại từ đầu.
Hỗ trợ Developer: Giúp lập trình viên nhìn thấy logic của Padding và Margin rõ ràng, giảm thiểu sai sót khi code.
1.2. Các thuộc tính cốt lõi của Auto Layout
Để kích hoạt, chọn Frame và nhấn phím tắt Shift + A. Bảng điều khiển bên phải sẽ hiện ra các thông số:
A. Direction (Hướng sắp xếp)
Vertical (↓): Xếp các phần tử từ trên xuống dưới (Ví dụ: Danh sách bài viết, Form điền thông tin).
Horizontal (→): Xếp các phần tử từ trái sang phải (Ví dụ: Thanh menu, Hàng nút bấm).
Wrap (↵): (Tính năng mới) Tự động xuống dòng khi hết chỗ. Cực kỳ hữu ích cho việc thiết kế Tag list hoặc Gallery ảnh.
B. Spacing (Khoảng cách)
Gap between items: Khoảng cách giữa các phần tử con. Bạn có thể nhập số cố định (ví dụ: 16px) hoặc nhập
Autođể chúng tự động chia đều khoảng trống (tương tựjustify-content: space-between).Padding: Khoảng cách từ nội dung đến viền của Frame (Trên, Dưới, Trái, Phải).
C. Alignment (Căn chỉnh)
Một bảng 9 ô vuông cho phép bạn quyết định các phần tử con sẽ nằm ở đâu trong Frame cha (Góc trái trên, Chính giữa, Góc phải dưới...).
1.3. Resizing: Hug, Fixed và Fill (Rất Quan Trọng)
Đây là phần khiến nhiều người mới học "đau đầu" nhất, nhưng lại quan trọng nhất để làm Responsive.
- Mẹo nâng cao: Để thiết kế một Card hoàn hảo: Frame tổng set là Fixed (hoặc Fill nếu nằm trong grid), Ảnh là Fill container, Text tiêu đề là Fill container, Nút bấm là Hug contents.
1.4. Absolute Position trong Auto Layout
Đôi khi bạn muốn một phần tử "phá vỡ" quy tắc xếp hàng của Auto Layout (ví dụ: dấu chấm đỏ thông báo trên icon).
Cách làm: Chọn phần tử con, nhấn vào icon "Absolute position" (hình vuông có dấu cộng ở góc) trên thanh công cụ.
Lúc này, bạn có thể đặt nó ở bất kỳ đâu trong Frame cha mà không ảnh hưởng đến dòng chảy của các phần tử khác.
II. Components – Trái Tim Của Design System
Nếu Auto Layout giúp bạn quản lý bố cục, thì Components giúp bạn quản lý sự đồng bộ và tái sử dụng. Hãy tưởng tượng bạn thiết kế 50 màn hình App, và khách hàng muốn đổi màu nút bấm từ Xanh sang Đỏ. Nếu không dùng Component, bạn phải sửa 50 lần. Nếu dùng Component, bạn chỉ cần sửa 1 lần.
2.1. Main Component và Instance
Main Component (Component Gốc): Được đánh dấu bằng icon 4 hình thoi ♦️. Đây là "khuôn mẫu". Mọi thay đổi trên Main Component sẽ cập nhật xuống tất cả các bản sao.
Instance (Bản sao): Được đánh dấu bằng icon hình thoi rỗng ◊. Bạn copy từ Main Component ra. Bạn có thể thay đổi nội dung (text, ảnh) của Instance nhưng cấu trúc và style sẽ phụ thuộc vào Component gốc.
Tham khảo thêm về hệ thống Component của Material Design để hiểu cách Google tổ chức các thành phần UI.
2.2. Naming Convention (Quy tắc đặt tên)
Figma sử dụng dấu gạch chéo / để phân cấp thư mục Component.
Ví dụ: Bạn đặt tên các nút bấm là
Button/Primary,Button/Secondary,Button/Danger.Figma sẽ tự động nhóm chúng vào thư mục "Button" trong bảng Assets, giúp bạn tìm kiếm dễ dàng.
2.3. Component Properties (Tính năng nâng cao)
Figma đã nâng cấp Component lên một tầm cao mới với Properties, giúp giảm số lượng biến thể (Variants) cần tạo.
Text Property: Cho phép sửa text trực tiếp từ bảng điều khiển bên phải mà không cần double-click vào layer text.
Boolean Property: Tạo công tắc Bật/Tắt (Toggle) để ẩn hiện layer. Ví dụ: Ẩn hiện icon trong nút bấm.
Instance Swap Property: Cho phép thay đổi nhanh icon bên trong component bằng một menu thả xuống.
2.4. Variants (Biến thể)
Variants cho phép gom nhóm các Component có liên quan lại thành một "Component Set".
Ví dụ: Một nút bấm có các trạng thái: Default, Hover, Pressed, Disabled.
Thay vì tạo 4 component rời rạc, bạn tạo 1 Component Set có property là "State". Khi thiết kế, bạn chỉ cần chọn nút và đổi State trên thanh công cụ.
III. Thực Hành - Xây Dựng Card Sản Phẩm
Chúng ta sẽ kết hợp kiến thức từ bài Frame và Constraints cùng với Auto Layout & Component để tạo một thẻ sản phẩm (Product Card) hoàn chỉnh.
Nút "Mua ngay":
Gõ text "Mua ngay".
Shift + Ađể tạo Auto Layout.Padding: 12px (trên dưới), 24px (trái phải). Background: Xanh.
Tạo Component, đặt tên
Button/Primary.
Tag giá tiền:
Gõ text "$99".
Shift + A.Styling border, màu sắc.
Vẽ một Frame chứa ảnh sản phẩm.
Gõ tên sản phẩm (Text).
Kéo Instance của nút "Mua ngay" và Tag giá tiền vào.
Chọn tất cả (Ảnh, Tên, Giá, Nút). Nhấn
Shift + A.Đặt Direction: Vertical (↓).
Khoảng cách (Gap): 16px.
Padding: 16px xung quanh.
Thêm màu nền trắng, đổ bóng (Drop shadow).
Để Card co giãn tốt trên Mobile và Desktop:
Chọn Frame Card tổng: Set width là Fixed (ví dụ 300px), Height là Hug contents.
Chọn Ảnh sản phẩm: Set width là Fill container, Height là Fixed (ví dụ 200px).
Chọn Tên sản phẩm: Set width là Fill container.
=> Kết quả: Khi bạn kéo chiều ngang của Card rộng ra, ảnh và tên sản phẩm sẽ tự giãn theo, nhưng nút bấm vẫn giữ nguyên kích thước đẹp mắt.
IV. Kết Luận và Lời Khuyên
Auto Layout và Components là ranh giới phân biệt giữa một người vẽ giao diện nghiệp dư và một Product Designer chuyên nghiệp.
Auto Layout rèn luyện cho bạn tư duy về cấu trúc, không gian và tính thích ứng (Responsive).
Components rèn luyện tư duy về hệ thống, tính kế thừa và tối ưu hóa quy trình (Scalability).
Để thành thạo, không có cách nào khác ngoài việc thực hành. Hãy thử thách bản thân bằng cách "clone" lại giao diện của Facebook hoặc Instagram bằng Auto Layout, bạn sẽ vỡ vạc ra rất nhiều điều.
Chúc các bạn thành công trên con đường chinh phục Figma!
