Mở đầu — vì sao bài này quan trọng
Nếu bạn từng mở một file Figma mà người khác bàn giao và cảm thấy như đi lạc trong một mê cung — layer chồng chéo, nhóm lồng nhau vô tận, phần tử tự nhiên biến mất khi bạn chỉnh kích thước khung — thì bài học này chính là chiếc la bàn bạn cần. Frames, Groups và Constraints là ba khái niệm nền móng của Figma. Chúng nghe có vẻ đơn giản, cơ bản đến mức nhiều người mới bỏ qua, nhưng chính chúng quyết định file của bạn "sống" hay "chết" khi phải chỉnh sửa, mở rộng, hoặc bàn giao cho lập trình viên.
Tôi từng review một designer junior ở một startup fintech tại TP.HCM. Bạn ấy có gu thẩm mỹ rất tốt, màn hình nhìn đẹp long lanh. Nhưng khi lead yêu cầu đổi chiều rộng màn hình từ 375px sang 390px để hỗ trợ iPhone mới, toàn bộ layout của bạn "vỡ trận": nút bấm dính vào mép, ảnh tràn ra ngoài, khoảng cách lệch lạc. Lý do không nằm ở thẩm mỹ mà nằm ở việc bạn dùng Group thay vì Frame, và không hề đặt Constraints. Một quyết định kỹ thuật tưởng nhỏ nhưng khiến bạn mất cả buổi chiều sửa thủ công.
Hiểu vững ba khái niệm này giúp bạn xây dựng những file linh hoạt, dễ mở rộng, và quan trọng nhất là dễ bảo trì — nền tảng để bạn tiến tới Auto Layout, Components và cả quy trình handoff sau này. Hãy coi đây là ngữ pháp cơ bản của Figma: bạn phải thuộc trước khi viết được những câu văn phức tạp.
Khái niệm cốt lõi
Frame là gì?
Frame (khung) là một loại container có kích thước riêng của chính nó, độc lập với nội dung bên trong. Bạn có thể hình dung Frame như một chiếc hộp có kích thước cố định do bạn định nghĩa: rộng 375, cao 812 chẳng hạn. Dù bên trong bạn có bỏ gì vào, chiếc hộp vẫn giữ nguyên kích thước đó cho đến khi bạn chủ động thay đổi.
Đặc điểm quan trọng nhất của Frame:
- Có size cố định do bạn kiểm soát. Frame không tự co giãn theo nội dung (trừ khi bạn bật Auto Layout — chủ đề của bài sau).
- Có khả năng clip nội dung (Clip content). Nếu một phần tử con nằm tràn ra ngoài biên của Frame, Figma sẽ cắt (ẩn) phần thừa đó đi khi bạn bật tùy chọn "Clip content". Đây là điều Group không làm được.
- Có thể mang thuộc tính riêng: màu nền (fill), bo góc (corner radius), đổ bóng, và đặc biệt là hỗ trợ Constraints và Auto Layout.
- Là đơn vị đại diện cho một màn hình, một khu vực, một component. Mọi màn hình (screen) trong Figma đều là một Frame.
Group là gì?
Group (nhóm) chỉ đơn giản là một cách gom nhiều phần tử lại để di chuyển hoặc chọn chúng cùng lúc. Điểm mấu chốt: Group là một container vô hình, không có kích thước riêng của bản thân.
Kích thước của một Group luôn được tính bằng đường bao (bounding box) tổng của tất cả phần tử con. Nếu bạn có ba hình tròn nằm cách xa nhau, bounds của Group chính là hình chữ nhật nhỏ nhất bao trọn cả ba. Khi bạn xóa một phần tử, hoặc kéo một phần tử ra xa, bounds của Group tự động co giãn theo. Group không có "ranh giới" của riêng nó — nó chỉ là cái vỏ bám theo nội dung.
Hệ quả quan trọng:
- Group không clip content. Nội dung không bao giờ bị cắt.
- Group không có fill, radius, hay Auto Layout riêng. Nó không phải một khối hình thực sự.
- Khi bạn resize một Group, Figma sẽ co giãn tất cả phần tử con theo tỉ lệ — điều này thường gây méo mó ngoài ý muốn nếu bạn không cẩn thận.
So sánh trực diện Frame vs Group
Cách dễ nhớ nhất: Frame là một "cái hộp thật" có thành và đáy; Group là một "sợi dây thun" bó nội dung lại.
| Tiêu chí | Frame | Group |
|---|---|---|
| Kích thước riêng | Có, do bạn định nghĩa | Không, bằng bounds tổng của con |
| Clip nội dung tràn | Có (khi bật Clip content) | Không bao giờ |
| Fill / Radius / Shadow | Có | Không |
| Hỗ trợ Constraints | Có (đầy đủ) | Hạn chế, phụ thuộc frame cha |
| Hỗ trợ Auto Layout | Có | Không |
| Dùng làm màn hình / component | Có | Không nên |
| Mục đích chính | Cấu trúc, layout, container thật | Gom nhóm tạm để di chuyển |
Constraints là gì?
Constraints (ràng buộc) trả lời câu hỏi: "Khi Frame cha thay đổi kích thước, phần tử con sẽ hành xử ra sao?"
Mỗi phần tử con nằm trong một Frame đều có hai trục ràng buộc:
- Trục ngang (Horizontal): Left, Right, Left and Right, Center, Scale.
- Trục dọc (Vertical): Top, Bottom, Top and Bottom, Center, Scale.
- Left / Top: phần tử neo vào cạnh trái/trên, giữ nguyên khoảng cách tới cạnh đó. Đây là mặc định.
- Right / Bottom: phần tử neo vào cạnh phải/dưới. Rất hữu ích cho nút "Đóng" ở góc phải trên, hay thanh nút cố định dưới đáy màn hình.
- Left and Right (hoặc Top and Bottom): phần tử giữ khoảng cách cố định với cả hai cạnh, nên nó sẽ co giãn chiều rộng/cao khi Frame thay đổi. Đây là chìa khóa cho các phần tử full-width như thanh tìm kiếm, banner.
- Center: phần tử luôn nằm giữa Frame theo trục đó, di chuyển theo tâm.
- Scale: phần tử co giãn theo tỉ lệ phần trăm giống hệt Frame — hiếm khi dùng cho UI, hay dùng cho ảnh minh họa.
Tình huống thực tế
Tình huống 1: Startup fintech và màn hình bị "vỡ" khi đổi breakpoint
Quay lại câu chuyện mở đầu — bạn designer junior ở startup fintech tại TP.HCM. Bạn thiết kế màn hình đăng nhập trên khung 375px. Header logo canh giữa, nút "Đăng nhập" full-width ở giữa, và dòng "Quên mật khẩu?" nằm góc phải dưới. Nhưng thay vì đặt tất cả trong một Frame, bạn gom mọi thứ vào một Group vì thấy nó "gọn hơn".
Khi lead yêu cầu chuyển sang khung 390px cho iPhone 15, bạn kéo giãn Group. Vì Group không có Constraints thật, Figma co giãn mọi thứ theo tỉ lệ: logo phình to, chữ bị kéo dãn nhẹ, nút không còn full-width chuẩn mà lệch mép trái 7px, và dòng "Quên mật khẩu?" trôi khỏi góc phải.
Bài học rút ra: nếu bạn đã bọc màn hình trong một Frame 375px, đặt Constraint cho nút là "Left and Right", cho logo là "Center + Top", cho "Quên mật khẩu?" là "Right + Bottom", thì khi kéo Frame sang 390px, mọi thứ tự sắp xếp hoàn hảo trong đúng 2 giây. Constraints biến việc chỉnh breakpoint từ một buổi chiều thành một cú kéo chuột.
Tình huống 2: Nhóm design tại một sàn thương mại điện tử và chiếc card sản phẩm tràn ảnh
Một team design tại một sàn TMĐT lớn (kiểu Tiki hoặc Shopee) xây card sản phẩm: ảnh trên, tên bên dưới, giá, nút "Thêm vào giỏ". Ảnh sản phẩm do hệ thống trả về không đồng nhất tỉ lệ — có ảnh cao 400px, có ảnh 600px.
Designer ban đầu dùng Group để bọc card. Kết quả: những ảnh cao hơn tràn xuống, đè lên phần tên và giá của card bên dưới, layout lộn xộn khi xem ở chế độ lưới. Vì Group không clip content, không có cách nào ngăn ảnh tràn.
Giải pháp: đổi container card thành một Frame có kích thước cố định cho khu vực ảnh (ví dụ 160x160), và bật "Clip content". Giờ mọi ảnh dù cao bao nhiêu cũng bị cắt gọn trong khung 160x160, card đồng đều tăm tắp trên lưới.
Bài học rút ra: khi bạn cần một khung "kỷ luật" — nội dung phải nằm trong ranh giới xác định — chỉ Frame với Clip content mới làm được. Đây là tình huống kinh điển phân biệt người hiểu Figma và người chỉ dùng Figma theo cảm tính.
Tình huống 3: Agency và file bàn giao khiến dev "khóc thét"
Một agency ở Hà Nội bàn giao file cho đội dev của khách. File dùng chi chít Group lồng Group — có chỗ lồng đến 6 tầng: "Group > Group > Group > Rectangle". Dev mở Dev Mode ra không hiểu đâu là card, đâu là button, đâu là một khối trang trí, vì mọi thứ đều tên "Group 47", "Group 128".
Sau phản hồi, agency tái cấu trúc lại: mỗi khu vực có ý nghĩa (card, header, list item, button) trở thành một Frame được đặt tên rõ ràng như "Card / Product", "Button / Primary". Group chỉ giữ lại cho vài cụm icon trang trí. Kết quả: dev đọc được cấu trúc như đọc HTML, thời gian ước lượng handoff giảm rõ rệt.
Bài học rút ra: Frame không chỉ là kỹ thuật, nó còn là ngôn ngữ giao tiếp với lập trình viên. Một Frame được đặt tên tốt = một thẻ div có ý nghĩa. Group lồng nhau vô danh = mã spaghetti mà không ai muốn đọc.
Hướng dẫn từng bước
Hãy cùng thực hành tạo một màn hình responsive cơ bản.
Bước 1 — Tạo Frame màn hình. Nhấn phím tắt F (hoặc A), rồi ở panel bên phải chọn preset thiết bị, ví dụ "iPhone 13 & 14 – 390x844". Figma tạo một Frame chuẩn kích thước điện thoại. Đặt tên rõ ràng, ví dụ "Screen / Login".
Bước 2 — Thêm nội dung. Vẽ một hình chữ nhật làm nút, gõ T để thêm text "Đăng nhập". Đặt nút gần đáy màn hình, kéo rộng gần bằng chiều ngang Frame chừa lề hai bên 24px.
Bước 3 — Nhóm bằng Frame hay Group? Nếu bạn muốn nút + text đi cùng nhau như một khối có ý nghĩa, chọn cả hai rồi nhấn Ctrl/Cmd + Alt + G để tạo Frame bao quanh (Frame selection). Nếu chỉ muốn gom tạm, nhấn Ctrl/Cmd + G để tạo Group. Với nút bấm, hãy dùng Frame.
Bước 4 — Đặt Constraints. Chọn khối nút, mở panel "Constraints" bên phải. Đặt Horizontal = "Left and Right" (để nút co giãn full-width theo màn hình), Vertical = "Bottom" (để nút luôn dính đáy).
Bước 5 — Kiểm thử. Chọn Frame màn hình ngoài cùng, kéo cạnh phải cho rộng ra hoặc dùng lại preset khác. Quan sát: nút phải tự giãn theo chiều ngang và giữ nguyên khoảng cách với đáy. Nếu đúng như vậy, bạn đã làm chuẩn.
Bước 6 — Bật Clip content khi cần. Với Frame chứa ảnh có thể tràn, chọn Frame, tìm mục "Clip content" trong panel và bật lên.
Bước 7 — Đặt tên và dọn dẹp. Đặt tên mọi Frame theo quy ước dễ hiểu (Screen, Card, Button, Header...). Đây là thói quen vàng cho handoff.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng Group cho mọi thứ. Đây là lỗi phổ biến nhất của người mới. Group không clip, không giữ layout khi resize, không hỗ trợ Auto Layout. Mẹo: mặc định hãy chọn Frame; chỉ dùng Group cho cụm trang trí đơn giản.
Lỗi 2 — Quên đặt Constraints, để mặc định Left/Top. Khi đó mọi thứ neo góc trái trên và bạn tưởng "sao layout không responsive". Mẹo: sau khi vẽ xong một màn hình, dành 2 phút rà lại Constraints cho từng phần tử quan trọng (nút full-width, phần tử dính đáy, icon góc phải).
Lỗi 3 — Lồng nhóm quá sâu. "Group trong Group trong Group" khiến file nặng nề, khó chọn, khó bàn giao. Mẹo: giữ cây layer nông nhất có thể; mỗi tầng nên có lý do tồn tại.
Lỗi 4 — Resize Group làm méo nội dung. Vì Group co giãn con theo tỉ lệ, kéo Group dễ làm text và hình bị biến dạng. Mẹo: nếu cần cấu trúc giữ nguyên khi resize, chuyển Group thành Frame trước (chuột phải > Frame selection).
Mẹo phím tắt cần thuộc:
Ctrl/Cmd + G— tạo GroupCtrl/Cmd + Alt + G— tạo Frame quanh phần đã chọn (Frame selection)Ctrl/Cmd + Shift + G— bỏ nhóm (Ungroup)F— công cụ Frame- Nhấn giữ
Enterđể đi sâu vào con,Shift + Enterđể đi ra ngoài — điều hướng cây layer nhanh gọn.
Bài tập thực hành
- Tạo màn hình đăng nhập responsive. Dựng một Frame 375px chứa logo (canh giữa trên), ô nhập email và mật khẩu (full-width), nút "Đăng nhập" (dính đáy, full-width), và link "Quên mật khẩu?" (góc phải dưới). Đặt Constraints đúng cho từng phần tử, rồi kéo Frame sang 414px và xác nhận toàn bộ layout tự thích nghi hoàn hảo. Ghi lại phần tử nào cần Constraint gì.
- Bài tập phân biệt Frame vs Group. Tạo hai bản sao của cùng một card sản phẩm: một bản bọc bằng Group, một bản bọc bằng Frame có Clip content. Đặt một ảnh cao hơn khung vào cả hai. Quan sát sự khác nhau và viết 3 câu giải thích vì sao Frame kiểm soát được nội dung tràn còn Group thì không.
- Dọn file. Lấy bất kỳ file cũ nào bạn từng làm (hoặc file mẫu tải về), tìm các Group lồng sâu và tái cấu trúc chúng: chuyển những cụm có ý nghĩa thành Frame đặt tên rõ ràng, giảm độ sâu cây layer. So sánh cây layer trước và sau.
Tóm tắt
Ba khái niệm nền tảng của bài này gói gọn như sau: Frame là container thật, có kích thước riêng, biết clip nội dung, hỗ trợ Constraints và Auto Layout — hãy dùng nó cho mọi cấu trúc nghiêm túc. Group chỉ là chiếc vỏ vô hình bám theo bounds của con, dùng để gom nhóm tạm, không giữ layout, không clip. Constraints là bộ quy tắc quyết định phần tử con hành xử ra sao khi Frame cha đổi kích thước — chìa khóa cho thiết kế responsive.
Nguyên tắc vàng để ghi nhớ: khi phân vân, hãy chọn Frame; sau khi dựng màn hình, luôn kiểm tra Constraints; và đặt tên mọi thứ như thể bạn đang viết code cho người khác đọc. Nắm chắc ba khái niệm này, bạn đã có nền móng vững để bước vào Auto Layout, Components và toàn bộ hành trình xây dựng design system phía trước.