Cách tạo thiết kế động với “bố cục tự động” trong Figma (Phần 1)

Một trong những trải nghiệm khó hiểu của tôi khi làm quen với Figma là không biết cách sử dụng “Auto layout” – bố cục tự động.

Khi bạn muốn chỉnh sửa hoặc thay đổi bất kỳ đối tượng nào, làm cho nó lớn hơn hoặc nhỏ hơn, “trang chiếu mới” như tôi làm điều đó theo cách thủ công. 😭 Việc chỉnh sửa từng chi tiết như vậy “ngốn” rất nhiều thời gian của tôi. Chưa kể tình trạng kéo tới đây lui, nhất là trên các giao diện có nhiều đối tượng và bố cục phức tạp, khiến việc sắp xếp lại các yếu tố trên bản vẽ khá mệt mỏi. 😢 Auto layout chính là “vũ khí” giúp tôi giải quyết các vấn đề trên, tiết kiệm được ít nhất một nửa thời gian, không còn tình trạng kéo lộn xộn, giao diện sử dụng auto layout rất khó “vỡ”. “hơn là một giao diện mà các thành phần của nó không bị ràng buộc với nhau. Tính năng này sẽ hỗ trợ đắc lực khi bạn cần thiết kế giao diện cho các màn hình với nhiều kích thước khác nhau.

Vậy Auto layout là gì?

Bố cục tự động là một thuộc tính bạn có thể thêm vào khung và 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ỏ để vừa vặn và chỉnh sửa. khi nội dung của thiết kế thay đổi. Thuộc tính này hữu ích khi bạn cần thêm các 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 phát triển.

Bạn có thể áp dụng bố cục tự động trong nhiều trường hợp, ví dụ:

• Làm cho các nút (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 để xây dựng các giao diện hoàn chỉnh.

Bố cục tự động là một tính năng thông minh và mạnh mẽ của Figma. Trong bài viết này, tôi sẽ giới thiệu bố cục tự động và cách hoạt động của một số thuộc tính của nó.

Làm cách nào để tạo “bố cục tự động”?

Bạn có thể thêm bố cục tự động vào bất kỳ khung nào hoặc một nhóm đối tượng nào bạn đã chọn, có nghĩa là bạn có thể áp dụng tính năng này cho:

• Khung mới, khung trống
• Khung đã có sẵn nội dung
• Các thành phần và bộ thành phần
• Nhóm lớp hoặc nhóm đối tượng

Ghi chú: Bố cục tự động chỉ được hỗ trợ trên khung. Nếu bạn chọn các đối tượng không có trong khung, Figma sẽ tạo một khung bố cục tự động xung quanh chúng.

Bạn có thể tạo bố cục tự động cho khung, phần tử hoặc tập hợp phần tử đã chọn theo một trong những cách sau:

• Sử dụng phím tắt Shift + A.
• Sau khi bạn đã chọn khung cụ thể mà bạn muốn tạo bố cục tự động, trong thanh bên (sidebar) ở phía bên phải, hãy nhấp vào dấu (+) bên cạnh từ “Bố cục tự động”.
• Nhấp chuột phải vào khung hoặc đối tượng và chọn “Thêm bố cục tự động”.

Gợi ý: Bạn có thể thêm bố cục tự động cho các thành phần. Bạn cần thêm bố cục tự động cho từng phần tử độc lập.

Thuộc tính bố cục tự động

Khung bố cục tự động có các thuộc tính khác với khung thông thường. Khi áp dụng bố cục tự động, bạn sẽ thấy một số thay đổi trong thanh bên phải.

Bạn không thể làm như sau trên các khung bố cục tự động:

🚫 Thêm lưới bố cục vào khung đó

🚫 Áp dụng các ràng buộc cho bất kỳ đối tượng nào trong bố cục tự động

🚫 Sử dụng lựa chọn thông minh trên bất kỳ đối tượng nào trong khung

Phần Bố cục Tự động của tab Thiết kế ở thanh bên phải

1. Định hướng bố cục tự động

Hướng mô tả cách hoạt động của khung bố cục tự động. Ở thanh bên phải, bạn sẽ thấy 2 tùy chọn hướng dọc / ngang để đặt khung:

• Chọn dọc để thêm, xóa và sắp xếp lại các đối tượng dọc theo trục y (dọc). Ví dụ: các đối tượng trong danh sách hoặc bài đăng trong nguồn cấp tin tức hoặc dòng thời gian.
• Chọn ngang (ngang) để thêm, xóa và sắp xếp lại các đối tượng dọc theo trục x (theo chiều ngang). Ví dụ: một hàng nút hoặc biểu tượng trong menu điều hướng trên thiết bị di động.

Figma hiện chỉ hỗ trợ một hướng tại một thời điểm, ngang hoặc dọc. Để xây dựng các thiết kế sử dụng cả hai hướng, chúng ta có thể kết hợp hoặc lồng các khung bố cục tự động.

Trong ví dụ bên dưới, khung bố cục tự động ngang được lồng trong khung bố cục tự động dọc để tạo thẻ có tiêu đề, mô tả và thời gian:

Khung đa hướng bố cục tự động

2. Khoảng cách giữa các mục

Bạn có thể điều chỉnh khoảng cách giữa các mục trong ngăn bố cục tự động.

Không giống như “lựa chọn thông minh”, bạn sẽ không có cách nào để điều chỉnh khoảng cách trên bản vẽ. Thay vào đó, hãy sử dụng các trường khoảng cách trong phần Bố cục tự động ở thanh bên bên phải (ngay bên cạnh hướng Bố cục tự động.):

• Khoảng cách ngang (Ngang)
• Khoảng cách dọc (Dọc)

Nhập số (khoảng cách bạn muốn) vào trường, tăng / giảm giá trị bằng các phím mũi tên hoặc di chuyển trường bằng con trỏ.

Khoảng cách giữa các mục trong ngăn bố cục tự động

3. Khoảng cách đệm

Ở bên phải của trường khoảng cách mục (được mô tả ở trên), bạn sẽ thấy một trường đệm.

Padding điều chỉnh không gian (hoặc khoảng trắng) giữa các đối tượng con với ranh giới (cạnh) của khung bố cục tự động. Bạn có thể đặt phần đệm là đồng nhất hoặc đặt các giá trị khác nhau cho phần đệm trên cùng, bên phải, dưới cùng và bên trái.

• Nhập một giá trị duy nhất vào trường để đặt khoảng đệm bằng nhau ở tất cả các bên hoặc sử dụng CSS để đặt các giá trị riêng lẻ. Ví dụ: nhập 1,2,3,4 để đặt các giá trị là trên cùng: 1, phải: 2, dưới cùng: 3 và trái: 4. Hoặc nhập 1,2 đặt giá trị thành trên / dưới: 1 và trái / phải: 2.
• Để đặt thủ công phần đệm duy nhất cho mỗi bên, hãy nhấp vào biểu tượng Căn chỉnh và phần đệm ở bên phải, sau đó điều chỉnh từng giá trị riêng lẻ.

Ghi chú: Giá trị âm không được hỗ trợ

Khoảng cách đệm trong khung bố cục tự động

Gợi ý: Bạn có thể sử dụng phím Tab để điều hướng giữa các trường nhập trên cùng, phải, dưới cùng, bên trái

4. Căn chỉnh

Bạn có thể chọn cách căn chỉnh các đối tượng con trong ngăn bố cục tự động. Hướng của bố cục tự động và phân bổ sẽ xác định những tùy chọn căn chỉnh nào bạn có thể sử dụng.

Không giống như các đối tượng trong canvas thông thường, bạn sẽ không thể căn chỉnh các đối tượng một cách riêng lẻ. Do đó, bạn sẽ cần đặt căn chỉnh của các đối tượng con trên ngăn bố cục tự động chính.

Sử dụng lưới tương tác để chọn 1 trong 9 bố cục cho các đối tượng phụ trong khung.

Công cụ căn chỉnh bố cục tự động

Nếu bạn chọn phân bổ “Khoảng cách giữa”, bạn có 3 tùy chọn cho mỗi hướng:

• Bố cục tự động dọc: Trái, Giữa, Phải
• Bố cục tự động theo chiều ngang: Trên cùng, Chính giữa, Dưới cùng

Nếu bạn chọn phân bổ “Đóng gói”, bạn có 9 tùy chọn giống nhau cho mỗi hướng:

• Trên cùng bên trái
• Trên cùng ở giữa
• Trên cùng bên phải
• Bên trái
• Trung tâm
• Bên phải
• Dưới cùng bên trái
• Dưới cùng ở giữa
• Góc phải ở phía dưới

Ghi chú: Khi một hoặc nhiều thuộc tính thay đổi kích thước được đặt thành “Nội dung ôm”, một số tùy chọn sẽ không tạo ra các bố cục khác nhau về mặt trực quan trên bản vẽ. Nội dung ôm “đã loại bỏ bất kỳ khoảng trống thừa nào xung quanh các đối tượng con.

Nguồn tham khảo:

Tạo thiết kế động với bố cục tự động – Trung tâm trợ giúp Figma

Vì nội dung về Auto layout khá dài nên phần này mình giới thiệu cách tạo layout tự động và hoạt động của một số thuộc tính cơ bản để các bạn làm quen trước. Trong phần tiếp theo, tôi sẽ giới thiệu các thuộc tính còn lại, thao tác với các đối tượng trong khung và cách loại bỏ bố cục tự động.