Cách tạo lưới Layout Grid trong Figma cho người thiết kế UI/UX
Mục lục bài viết
1. Layout Grid trong Figma là gì?
Layout Grid là một hệ thống đường kẻ lưới hỗ trợ nhà thiết kế bố cục các thành phần trên màn hình một cách khoa học. Grid đảm bảo sự đồng bộ về khoảng cách giữa các phần tử khi thiết kế responsive từ Mobile lên Desktop.
2. Cách tạo lưới cột (Columns) cơ bản cho website
1. Chọn một Frame bất kỳ (phím tắt F).
2. Ở bảng bên phải (Properties), tìm mục Layout Grid, nhấn biểu tượng dấu cộng (+).
3. Nhấn vào biểu tượng grid vừa tạo, chuyển từ dạng 'Grid' sang 'Columns'.
4.
Cấu hình các thông số chuẩn cho Web: - Count: 12 (hệ thống 12 cột chuẩn bootstrap).
- Type: Center.
- Width: 70-80px.
- Gutter (khoảng cách cột): 20-24px.
3. Mẹo và lưu ý quan trọng khi áp dụng
Khi áp dụng kiến thức từ bài viết này, hãy nhớ: (1) Luôn thử nghiệm trên môi trường an toàn trước;
(2) Ghi chép lại quá trình để rút kinh nghiệm;
(3) Chia sẻ và học hỏi từ cộng đồng để cải thiện kết quả nhanh hơn.
🙋 Câu hỏi thường gặp
Khoảng cách Gutter chuẩn là bao nhiêu?
Gutter chuẩn cho máy tính để bàn thường từ 16px đến 24px, và cho điện thoại di động là 8px đến 16px để tối ưu diện tích hiển thị nội dung.
Học thiết kế có cần năng khiếu không?
Năng khiếu là lợi thế nhưng không bắt buộc. Thiết kế là kỹ năng có thể học được thông qua thực hành, nghiên cứu nguyên tắc và học từ tác phẩm của người khác.
Học thiết kế có cần năng khiếu không?
Năng khiếu là lợi thế nhưng không bắt buộc. Thiết kế là kỹ năng có thể học được thông qua thực hành, nghiên cứu nguyên tắc và học từ tác phẩm của người khác.
