Thiết kế responsive Figma bằng Auto Layout và Constraints

Trong Figma, bạn có thể xử lý phần lớn vấn đề này bằng hai công cụ nền tảng là Constraints và Auto Layout. Constraints quyết định phần tử bám vào đâu khi khung thay đổi kích thước, còn Auto Layout giúp các phần tử giữ được thứ tự và khoảng cách một cách linh hoạt.

Vì sao chỉ kéo giãn Frame vẫn chưa tạo ra responsive design?

Hãy bắt đầu với một Frame desktop rộng 1440 pixel. Nếu bạn thu hẹp chiều rộng Frame mà chưa đặt Constraints, các phần tử bên trong gần như giữ nguyên tọa độ cũ. Kết quả là giao diện không thích nghi với màn hình mới.

Responsive design không có nghĩa là mọi thứ cùng phóng to hoặc thu nhỏ. Mỗi thành phần cần có một quy tắc hành xử riêng: logo bám góc trái, nút hành động bám góc phải, menu ở giữa, nền kéo rộng theo khung và nội dung chữ điều chỉnh theo không gian sẵn có.

Thành phần	Hành vi cần có	Thiết lập phù hợp
Logo	Giữ ở góc trên bên trái	Top và Left
Menu điều hướng	Luôn nằm giữa thanh điều hướng	Top và Center
Nút hành động	Giữ ở góc trên bên phải	Top và Right
Nền của hero section	Co giãn theo chiều ngang	Left và Right
Nội dung hero section	Thay đổi kích thước có kiểm soát	Scale kết hợp Auto Layout

Thiết lập thanh điều hướng bằng Constraints

Thanh điều hướng thường gồm ba cụm độc lập: logo, nhóm menu ở giữa và nhóm nút ở bên phải. Trước hết, hãy tách nhóm điều hướng thành các thành phần riêng biệt thay vì để tất cả trong một Group.

1.1. Neo từng cụm vào đúng vị trí

1. Đặt logo ở góc trái trên.
   • Chọn logo trong Frame chính.
   • Đặt Constraints theo chiều dọc là Top và chiều ngang là Left.
   • Khi Frame thu hẹp hoặc mở rộng, logo sẽ giữ nguyên khoảng cách với góc trái trên.
2. Giữ menu ở trung tâm.
   • Chọn nhóm các mục menu.
   • Đặt Constraints là Top và Center.
   • Cách này giúp menu không lệch sang trái hoặc phải khi chiều rộng màn hình thay đổi.
3. Neo các nút hành động sang phải.
   • Chọn Frame Auto Layout chứa các nút.
   • Đặt Constraints là Top và Right.
   • Nhóm nút sẽ luôn giữ khoảng cách với mép phải thay vì chạy theo logo hoặc menu.

Khi ba cụm đã được neo đúng cách, hãy thử kéo chiều rộng của Frame. Nếu logo, menu và nút vẫn duy trì vai trò vị trí của chúng, thanh điều hướng đã có nền tảng responsive tốt.

Xử lý hero section bằng Auto Layout thay vì chỉ dùng Scale

Phần hero thường có nền, tiêu đề, đoạn mô tả, nút bấm và hình minh họa. Một sai lầm phổ biến là chọn toàn bộ nhóm nội dung rồi đặt Scale. Cách này có thể làm nút bấm bị phóng to, chữ bị kéo giãn và nội dung không tự đẩy xuống khi tiêu đề xuống dòng.

Vấn đề nằm ở chỗ Group không hiểu quan hệ khoảng cách giữa các phần tử. Khi tiêu đề cao hơn do màn hình hẹp, các thành phần phía dưới không tự dịch chuyển hợp lý. Auto Layout giải quyết chính xác điểm yếu này.

2.1. Tạo khung nội dung có thể thích nghi

1. Tách các phần tử trong nội dung hero.
   • Bỏ Group cũ để tiêu đề, mô tả và nút trở thành các layer riêng.
   • Chọn các phần tử này cùng lúc bằng phím Shift.
   • Không nên đặt Scale trực tiếp lên Group chứa nhiều nội dung có thứ tự dọc.
2. Áp dụng Auto Layout theo chiều dọc.
   • Dùng phím tắt Shift và A để tạo Auto Layout.
   • Đặt khoảng cách giữa các phần tử, ví dụ 32 pixel.
   • Khi tiêu đề thay đổi chiều cao, mô tả và nút sẽ tự dịch chuyển xuống dưới.
3. Điều chỉnh chế độ thay đổi kích thước.
   • Đổi chiều rộng của Frame nội dung từ Hug sang Fixed width nếu bạn cần dùng Constraints dạng Scale.
   • Đặt Constraints của Frame nội dung là Scale và Top.
   • Với layer tiêu đề bên trong, dùng Fill container để tiêu đề chiếm đúng không gian của khung chứa.
4. Căn chỉnh đoạn mô tả phù hợp với bố cục.
   • Nếu phần mô tả cần nằm giữa, đặt Constraints theo Center.
   • Kiểm tra lại khi thu hẹp Frame để bảo đảm tiêu đề, mô tả và nút vẫn có nhịp điệu rõ ràng.

Làm hình minh họa co giãn mà không bị méo

Hình minh họa trong hero section cần thích nghi với kích thước khung, nhưng không phải mọi layer bên trong đều được phép co giãn. Nếu đặt Scale cho hình minh họa mà không chuẩn bị cấu trúc bên trong, ảnh có thể bị kéo méo, các nút kiểu trình duyệt bị giãn và nút phát ở giữa bị lệch.

Điểm quan trọng là Constraints của phần tử con luôn dựa trên phần tử cha gần nhất. Nếu minh họa vẫn là Group, các layer con có thể đang lấy Frame desktop làm mốc. Điều đó khiến chúng hành xử sai khi minh họa thay đổi kích thước.

3.1. Biến Group thành Frame trước khi đặt Constraints

1. Tạo Frame cho minh họa.
   • Chọn Group minh họa.
   • Dùng lệnh Frame selection để biến Group thành Frame.
   • Frame mới tạo ra một hệ quy chiếu riêng cho các thành phần bên trong.
2. Thiết lập lại các phần tử cố định.
   • Chọn nhóm nút ở góc trên của giao diện minh họa.
   • Đặt Constraints là Top và Left để chúng không bị kéo giãn.
   • Chọn nút phát ở giữa và đặt Constraints là Center theo cả hai chiều.
3. Đặt chế độ hiển thị ảnh đúng cách.
   • Nếu ảnh đang dùng Crop và bị biến dạng khi khung đổi kích thước, chuyển sang Fill.
   • Fill giúp ảnh lấp đầy diện tích có sẵn thay vì bị kéo giãn theo cách không tự nhiên.
   • Sau đó, đặt Frame minh họa theo Scale để toàn bộ phần này co giãn cùng bố cục.

Tạo breakpoint cho máy tính bảng và điện thoại

Sau khi bản desktop hoạt động ổn định, bạn có thể nhân bản Frame để xây dựng các breakpoint riêng. Cách làm này thực tế hơn việc cố ép một bố cục desktop phù hợp với mọi chiều rộng.

Trong ví dụ này, Frame desktop giữ chiều rộng 1440 pixel. Từ đó, tạo một bản tablet khoảng 770 pixel và một bản mobile khoảng 480 pixel. Các kích thước này là điểm khởi đầu để bạn đánh giá bố cục, không phải một quy tắc cố định cho mọi dự án.

Máy tính bảng: giảm bớt điều hướng để tránh chồng chéo

Ở chiều rộng tablet, menu và các nút hành động có thể chồng lên nhau. Thay vì cố thu nhỏ mọi thứ, hãy bỏ các mục menu và nút hành động khỏi thanh điều hướng, sau đó thay bằng biểu tượng hamburger menu.

Biểu tượng này cần được căn thẳng hàng với logo và đặt Constraints là Top và Right. Khi đó, logo vẫn ở bên trái, hamburger menu ở bên phải và thanh điều hướng giữ được sự rõ ràng.

Phần nội dung và hình minh họa có thể cần điều chỉnh chiều rộng thủ công. Giữ phím Alt hoặc Option khi kéo để mở rộng khung nội dung và khung minh họa đến kích thước hợp lý, chẳng hạn gần 620 pixel.

Điện thoại: tận dụng không gian nhưng giữ lề an toàn

Ở mobile, không gian ngang ít hơn nên bạn cần tận dụng diện tích có sẵn mà không để nội dung dính sát mép. Đưa logo về lề trái 32 pixel và hamburger menu về lề phải 32 pixel để tạo khoảng thở cân bằng.

Hãy mở rộng Frame nội dung hợp lý, sau đó kiểm tra lại khi giảm chiều rộng. Nếu phần mô tả không giữ được lề hai bên, thay chế độ chữ từ Auto height sang Auto width và đặt Constraints là Left và Right.

Cuối cùng, điều chỉnh khoảng cách dọc giữa nội dung và hình minh họa. Chỉ cần dịch hình xuống một chút cũng có thể giúp bố cục mobile bớt chật chội và dễ quét hơn.

Những lỗi cần tránh khi làm responsive trong Figma

• Dùng Scale cho toàn bộ Group nội dung: Cách này dễ làm nút, chữ và khoảng cách bị biến dạng thay vì tự sắp xếp lại.
• Không dùng Auto Layout cho các phần tử xếp dọc: Khi tiêu đề xuống dòng, các thành phần sau sẽ không tự dịch chuyển đúng vị trí.
• Đặt Constraints khi phần tử cha vẫn là Group: Các layer con có thể lấy Frame lớn làm mốc, khiến chúng lệch khi khung con thay đổi.
• Giữ nguyên menu desktop trên tablet: Khi không đủ chiều rộng, giao diện sẽ rối và các mục dễ chồng lên nhau.
• Không kiểm tra từng breakpoint sau khi chỉnh sửa: Một thay đổi ở nội dung hoặc hình minh họa có thể làm hỏng bố cục ở kích thước khác.

FAQ

Constraints và Auto Layout khác nhau như thế nào?

Constraints xác định cách một phần tử bám vào các cạnh hoặc tâm của Frame cha khi kích thước thay đổi. Auto Layout quản lý cách các phần tử bên trong một khung xếp hàng, giữ khoảng cách và tự dịch chuyển theo nội dung.

Khi nào nên dùng Scale trong Figma?

Bạn nên dùng Scale cho những khối cần thu phóng theo tỷ lệ, như Frame nội dung hoặc Frame minh họa đã được chuẩn bị cấu trúc đúng. Không nên dùng nó cho một Group chứa văn bản, nút bấm và các thành phần cần tự đẩy vị trí cho nhau.

Vì sao văn bản trên mobile không giữ được lề hai bên?

Nguyên nhân thường là layer chữ đang dùng chế độ thay đổi kích thước không phù hợp hoặc chỉ được căn giữa. Hãy chuyển sang Auto width và đặt Constraints là Left và Right để phần chữ duy trì khoảng cách với hai cạnh của Frame.

Nếu bạn cần biến bản thiết kế responsive thành một website vận hành ổn định, dịch vụ thiết kế website và tối ưu SEO của MintStack có thể giúp bạn kết nối UX, giao diện và hiệu năng thực tế.