Chào mừng bạn trở lại với chuỗi bài học. Hôm nay, chúng ta sẽ bước vào "trái tim" của Figma, nơi phân biệt một người biết dùng công cụ và một UI Designer chuyên nghiệp: Frames (Khung) và Constraints (Ràng buộc).
Figma hiểu rằng Designer không thể nhớ hết kích thước của hàng trăm thiết bị trên thị trường. Vì vậy, công cụ Frame (Phím tắt: F) cung cấp sẵn một thư viện kích thước chuẩn.
- Nhấn phím F hoặc chọn công cụ Frame trên thanh công cụ.
- Nhìn sang cột Properties bên phải (Design Panel).
- Bạn sẽ thấy danh sách các nhóm thiết bị.
Các nhóm Presets quan trọng cần nhớ
Để tối ưu hóa quy trình làm việc và đảm bảo thiết kế chuẩn SEO (thân thiện với thiết bị di động), bạn cần nắm rõ các nhóm này:
1.1. Phone (Điện thoại)
- Ví dụ: iPhone 14, iPhone 14 Pro Max, Android Large (360x800), Android Small.
- Mẹo: Nếu bạn thiết kế App, hãy bắt đầu với kích thước màn hình nhỏ nhất trong phân khúc mục tiêu (ví dụ: iPhone 13 mini hoặc Android Small). Việc scale thiết kế từ nhỏ lên lớn dễ xử lý hơn là cố nhồi nhét thiết kế từ lớn vào màn hình nhỏ.
1.2. Tablet (Máy tính bảng)
iPad Pro, iPad Mini, Surface Pro.
Dùng cho các thiết kế lai giữa Mobile và Desktop.
1.3. Desktop (Máy tính để bàn)
Desktop (1440x1024): Kích thước tiêu chuẩn vàng cho thiết kế Web hiện đại.
MacBook Pro: Dành cho các giao diện cần hiển thị trên màn hình Laptop 14-16 inch.
MacBook Air: Kích thước nhỏ gọn hơn.
1.4. Social Media (Mạng xã hội)
Đây là "cứu cánh" cho các Content Creator. Figma cung cấp sẵn kích thước chuẩn cho:
Instagram Post / Story.
Facebook Cover / Post.
Twitter Header.
LinkedIn Cover.
Lợi ích: Bạn không cần Google tìm kiếm "Kích thước cover Facebook 2024 là bao nhiêu?" mỗi lần thiết kế.
1.5. Paper (In ấn)
A4, A5, Letter... Dù Figma là công cụ UI, nhưng nó vẫn hỗ trợ tốt cho việc dàn trang tài liệu PDF đơn giản.
II. Giải mã Constraints: Chìa khóa của Responsive Design
Constraints cho phép bạn quy định cách một layer con (Child) phản ứng khi kích thước của Frame cha (Parent) thay đổi.
- Nó sẽ dính chặt vào bên trái?
- Nó sẽ giãn ra theo chiều ngang?
- Hay nó sẽ luôn nằm giữa?
Nếu không có Constraints, khi bạn kéo rộng màn hình thiết kế từ Mobile sang Tablet, các nút bấm và hình ảnh sẽ đứng yên một chỗ, tạo ra khoảng trắng vô duyên.
Vị trí của Constraints
Khi bạn chọn một Layer nằm bên trong một Frame, bảng điều khiển Constraints sẽ hiện ra ở cột bên phải. Nó được biểu diễn bằng một hình vuông với các đường kẻ xanh dương tượng trưng cho các mối neo (anchor).
III. Phân tích chi tiết các thuộc tính Constraints
3.1. Horizontal Constraints (Trục Ngang)
- Left (Trái - Mặc định):
- Đối tượng giữ nguyên khoảng cách với cạnh trái của Frame cha.
- Ứng dụng: Logo, Avatar ở góc trái.
- Right (Phải):
- Đối tượng giữ nguyên khoảng cách với cạnh phải.
- Ứng dụng: Icon menu, nút đóng (X), nút "Next" ở góc phải.
- Left and Right (Trái và Phải):
- Đây là tùy chọn quan trọng nhất cho Responsive.
- Đối tượng sẽ giữ khoảng cách cố định với cả hai cạnh. Điều này đồng nghĩa với việc chiều rộng (Width) của đối tượng sẽ thay đổi khi Frame cha thay đổi.
- Ứng dụng: Thanh tìm kiếm, Button full-width, thẻ Card trải dài màn hình.
- Center (Giữa):
- Đối tượng luôn duy trì vị trí trung tâm theo trục ngang. Kích thước đối tượng không đổi.
- Ứng dụng: Tiêu đề bài viết, Modal popup, Loading spinner.
- Scale (Tỷ lệ):
- Đối tượng thay đổi kích thước và vị trí theo tỷ lệ phần trăm (%) của Frame cha.
- Ví dụ: Nếu Frame cha tăng gấp đôi chiều rộng, đối tượng cũng tăng gấp đôi chiều rộng và khoảng cách.
- Ứng dụng: Các thành phần đồ họa trang trí, Background image phức tạp.
3.2. Vertical Constraints (Trục Dọc)
- Top (Trên – Mặc định):
- Ghim chặt vào cạnh trên.
- Ứng dụng: Thanh trạng thái (Status bar), Header, Menu.
- Bottom (Dưới):
- Ghim chặt vào cạnh dưới.
- Ứng dụng: Thanh Tab bar (trên Mobile), Footer, Pagination (phân trang).
- Top and Bottom (Trên và Dưới):
- Giữ khoảng cách với cả cạnh trên và dưới. Chiều cao (Height) của đối tượng sẽ thay đổi.
- Ứng dụng: Sidebar menu chạy dọc hết chiều cao màn hình, hình nền background.
- Center (Giữa):
- Luôn nằm giữa theo chiều dọc.
- Ứng dụng: Nội dung trong một ô thông báo (Alert dialog).
- Scale:
- Tương tự như trục ngang, thay đổi theo tỷ lệ phần trăm chiều cao.
IV. Thực hành: Xây dựng Navigation Bar đa kích thước
- Bước 1: Tạo Frame nền
- Nhấn F, chọn Preset Desktop (1440px).
- Vẽ một hình chữ nhật bằng R làm nền cho Header, kích thước 1440x80px.
- Tuy nhiên, thay vì dùng hình chữ nhật, hãy biến chính cái Header đó thành một Frame con.
- (Cách tốt nhất: Vẽ Frame kích thước 1440x80px, đặt tên là "Header").
- Bước 2: Thêm nội dung
- Thêm Text "LOGO" vào bên trái.
- Thêm một nút "Sign Up" (Tạo bằng Frame + Text) vào bên phải.
- Thêm một thanh tìm kiếm (Rectangle + Icon) ở giữa.
- Bước 3: Thiết lập Constraints (Phần quan trọng)
- Với logo:
- Chọn LOGO.
- Chỉnh Constraints: Left & Center (Vertical).
- Lý do: Logo luôn nằm bên trái và căn giữa chiều cao của Header.
- Với nút Sign Up:
- Chọn nút Sign Up.
- Chỉnh Constraints: Right & Center (Vertical).
- Lý do: Nút đăng ký luôn dính sang phải dù màn hình rộng hay hẹp.
- Với thanh tìm kiếm (Search Bar):
- Chọn thanh Search Bar.
- Chỉnh Constraints: Left and Right & Center (Vertical).(Hoặc dùng Center nếu bạn muốn nó có kích thước cố định).
- Lý do: Nếu chọn "Left and Right", khi màn hình to ra, thanh tìm kiếm sẽ dài ra. Đây là trải nghiệm UX tốt.
- Với Frame Header tổng:
- Đặt Constraints cho Frame Header (nếu nó nằm trong Frame Desktop): Left and Right & Top.
- Lý do: Header luôn trải dài hết chiều rộng màn hình và dính lên đỉnh.
- Với logo:
- Bước 4: Kiểm tra kết quả
- Chọn Frame Desktop.
- Kéo cạnh phải của Frame để thay đổi chiều rộng.
- Quan sát: Logo dính trái, Nút Sign up dính phải, Thanh tìm kiếm co giãn linh hoạt ở giữa. Bạn vừa tạo ra một thiết kế Responsive!
V. Tổng kết bài học
Trong Bài 4 này, chúng ta đã đi sâu vào cơ chế hoạt động của Frame và Constraints. Đây là nền tảng của tư duy System Design và Responsive Design.
Những điểm cốt lõi cần ghi nhớ:
Luôn ưu tiên dùng Frame thay vì Group cho các thành phần UI.
Sử dụng Frame Presets để đảm bảo thiết kế đúng chuẩn kích thước thiết bị.
Constraints giúp xác định hành vi của đối tượng con khi cha thay đổi kích thước.
Left & Right (giãn ngang) và Top & Bottom (giãn dọc) là hai vũ khí mạnh nhất để làm UI co giãn.
Hẹn gặp lại bạn ở Bài 5, nơi chúng ta sẽ khám phá Bố cục tự động (Auto Layout) và Thành phần (Components).
