Lý do bạn nên sử dụng Auto Layout thay vì Groups trong thiết kế UX/UI
Lý do bạn nên sử dụng Auto Layout thay vì Groups trong thiết kế UX/UI
Figma là một công cụ tuyệt vời để cộng tác trong thiết kế giao diện người dùng (UI). Là nhà thiết kế UI, chúng ta luôn phải cân bằng giữa việc tạo ra thứ dễ sử dụng, đồng thời có khả năng mở rộng và tái sử dụng. Thực tế, mục tiêu chính của một công cụ thiết kế là giúp mọi thứ trở nên đơn giản hơn. Và Figma đã làm rất tốt điều đó.
Với tính linh hoạt, dễ sử dụng và khả năng cộng tác cao, Figma đã nổi lên như một công cụ thiết kế lý tưởng. Có rất nhiều cách để chúng ta tối ưu hóa quy trình làm việc và đơn giản hóa thiết kế của mình!
Ở cái nhìn đầu tiên, groups và autolayout trong Figma có vẻ khá giống nhau. Cả hai đều giúp bạn tổ chức file bằng cách lồng các layer con vào layer cha. Tuy nhiên, một câu hỏi thường xuyên được đặt ra là: “Sự khác biệt giữa groups và auto layout là gì? Khi nào nên dùng cái nào?” Cùng Capi Demy giải mã nhé!
Vậy Auto layout là gì?
Auto layout (bố cục tự động) là một thuộc tính bạn có thể thêm vào frames (khung) và components (thành phần), cho phép bạn tạo các thiết kế mở rộng để lấp đầy hoặc thu nhỏ cho vừa vặn và chỉnh sửa lại khi nội dung của thiết kế thay đổi. Thuộc tính này rất hữu ích khi bạn cần thêm các layers (lớp) mới, chứa các chuỗi văn bản dài hơn hoặc duy trì sự liên kết khi thiết kế của bạn được cải tiến, phát triển hơn.
Bạn có thể ứng dụng bố cục tự động trong nhiều trường hợp, ví dụ như:
- Tạo các button (nút) mở rộng hoặc thu nhỏ khi bạn chỉnh sửa nhãn.
- Xây dựng danh sách thích ứng khi các mục được thêm, xóa hoặc ẩn.
- Kết hợp các khung bố cục tự động để dựng các giao diện hoàn chỉnh.
Đọc thêm: Newbie bước chân vào UI/UX, học cái gì, học như thế nào và học từ đâu.
Lý do bạn nên sử dụng Auto Layout thay vì Groups trong thiết kế UX/UI
Frames sở hữu những "siêu năng lực" mà groups không có. Trong khi frames có thể thực hiện mọi chức năng của groups, thì groups lại không thể làm được những gì mà frames có thể.
Frames không chỉ là tập hợp của các layer lồng ghép. Chúng là những đối tượng có thể chứa các layer con, được định kích thước và định kiểu, sử dụng lưới (grid) & bố cục (layout), cũng như hỗ trợ thay đổi kích thước với constraints và auto-layout.
Dưới đây là vài lý do bạn nên sử dụng frames thay vì groups để nâng cao chất lượng thiết kế của mình:
1. Groups có thể làm hỏng thiết kế của bạn, trong khi Frames hoạt động như artboard
Khi sử dụng groups trong Figma, artboard của bạn có thể trở nên phức tạp không cần thiết. Các yếu tố thiết kế trong groups có thể thay đổi thuộc tính khi được scale, nhưng nếu chúng được đặt trong một frame, chúng sẽ không bị thay đổi theo cách phá hủy như vậy.
Frames có thể hoạt động như artboard khi bạn bật tùy chọn artboard trong bảng thuộc tính. Điều này rất hữu ích khi bạn tạo hướng dẫn phong cách (style guide) với mối quan hệ tỷ lệ tuyệt vời cho đội ngũ của mình. Ví dụ, bạn có thể sử dụng frame để chứa nút header. Sau đó, bạn chỉ cần kéo và thả frame đó vào các trang khác, thêm hoặc xóa layer bên trong frame mà không cần sao chép toàn bộ nút header.
2. Auto Layout hoạt động hoàn hảo với Frames
Nếu từng sử dụng groups trong Figma, bạn hẳn đã cảm nhận được nỗi đau khi phải căn chỉnh thủ công từng layer mỗi lần thay đổi kích thước. Auto Layout của Figma sẽ giúp bạn giải quyết vấn đề này bằng cách tự động căn chỉnh, định kích thước và định vị các layer một cách tối ưu. Auto Layout còn tính đến cả các constraints, nhưng điều đáng lưu ý là nó chỉ hoạt động với frames, không phải groups.
3. Constraints sẽ cứu cánh bạn!
Constraints cho phép bạn kiểm soát cách một layer (frame hoặc group) thay đổi kích thước. Khi bật constraints trong bảng thuộc tính, bạn sẽ thấy các điểm điều chỉnh hiện lên. Bạn có thể nhấn vào các điểm xanh để tạo một mối liên kết (constraint) giữa layer đó và một layer khác.
Constraints đặc biệt hữu ích khi thiết kế nội dung responsive. Ví dụ, khi bạn thiết kế một trang đích (landing page) và biết trước chiều rộng, chiều cao của từng màn hình, bạn có thể sử dụng constraints để cố định kích thước của header và footer. Constraints cũng giúp bạn “khóa” các phần nhất định để tập trung làm việc với các yếu tố khác mà không lo chúng bị thay đổi.
Đọc thêm: Khám Phá Flat Design Qua 3 Điều Đặc Biệt Trong Poster Thor
4. Trải nghiệm thực tế sẽ là người thầy tốt nhất!
Khi mới bắt đầu, Figma có thể khiến bạn choáng ngợp. Tuy nhiên, một khi bạn hiểu cách sử dụng Auto Layout và Frames, bạn sẽ thấy chúng hữu ích đến mức nào. Đây chính là sự khác biệt giữa một thiết kế lộn xộn, không responsive và một thiết kế gọn gàng, có tổ chức.
Khi sử dụng frames và auto-layout, bạn sẽ tiết kiệm thời gian tìm kiếm layer, dễ dàng điều hướng file, và xây dựng hệ thống thiết kế (design system) nhanh chóng hơn. Ai lại không muốn điều đó chứ?
Đọc thêm: Tâm Lý Học Về Font Chữ: Hiểu và Ứng Dụng Trong Thiết Kế Thương Hiệu
Vậy khi nào nên dùng Groups?
Mặc dù Auto Layout mang lại nhiều lợi ích vượt trội, nhưng vẫn có những trường hợp sử dụng groups sẽ là lựa chọn tốt hơn:
Tổ chức nhanh các layer không yêu cầu logic phức tạp
Nếu bạn chỉ cần nhóm nhanh một số yếu tố thiết kế để dễ dàng di chuyển hoặc ẩn/hiện mà không cần căn chỉnh hoặc thay đổi kích thước, groups là cách đơn giản và hiệu quả. Ví dụ, khi tạo các mockup hoặc wireframe sơ bộ, groups giúp bạn làm việc nhanh hơn.
Giữ nguyên bố cục hiện tại của các yếu tố
Khi các layer đã được sắp xếp chính xác và bạn không muốn thêm bất kỳ logic Auto Layout nào, groups là lựa chọn lý tưởng. Chúng giữ nguyên vị trí và kích thước hiện tại của các đối tượng, không làm thay đổi cấu trúc sẵn có.
Khi không cần thiết kế linh hoạt hoặc mở rộng
Nếu thiết kế không yêu cầu khả năng thay đổi kích thước hoặc nội dung động, như các yếu tố tĩnh trong một bản trình bày, nhóm các đối tượng sẽ đơn giản và phù hợp hơn.
Dành cho các yếu tố ngắn hạn hoặc không tái sử dụng
Trong trường hợp bạn làm việc với các thành phần không cần dùng lại hoặc không nằm trong hệ thống thiết kế lâu dài, groups sẽ giúp bạn giảm bớt sự phức tạp không cần thiết so với việc dùng Auto Layout.
Kết luận
Groups và Auto Layout đều có vai trò riêng trong Figma, tùy thuộc vào yêu cầu và mục tiêu của dự án. Auto Layout là lựa chọn mạnh mẽ cho các thiết kế cần tính linh hoạt, khả năng mở rộng và tính năng động cao. Trong khi đó, groups lại phù hợp với các tác vụ đơn giản, ngắn hạn và không yêu cầu logic phức tạp.
Là nhà thiết kế, việc hiểu rõ khi nào nên dùng Auto Layout và khi nào nên dùng groups sẽ giúp bạn tổ chức file hiệu quả hơn, tiết kiệm thời gian và tối ưu hóa quy trình làm việc. Hãy chọn phương pháp phù hợp để nâng cao chất lượng sản phẩm và trải nghiệm người dùng!
Đọc thêm: Xanh và Đỏ: Bí Quyết Tạo Nên Hiệu Ứng Thị Giác Đỉnh Cao trong Thiết Kế UI
