Bài 3: Layer và Frame - Figma Learning

Mục lục

I. Tại sao Layer và Frame là "xương sống" của mọi thiết kế?

Trong thế giới thiết kế giao diện (UI/UX), nếu chúng ta coi một bản thiết kế hoàn chỉnh là một ngôi nhà, thì Layers (lớp) chính là những viên gạch, và Frames (khung) chính là các căn phòng, hoặc thậm chí là cấu trúc móng và tường bao quanh ngôi nhà đó.

Rất nhiều học viên khi mới tiếp cận Figma thường mắc những sai lầm cơ bản như: lạm dụng Group thay vì Frame, để tên layer lộn xộn (Rectangle 1, Vector 5...), hoặc không hiểu cơ chế xếp chồng (stacking) của các phần tử. Điều này dẫn đến một quy trình làm việc (workflow) chậm chạp, khó chỉnh sửa và gây ác mộng cho các lập trình viên khi bàn giao thiết kế (handoff).

Trong bài viết này, chúng ta sẽ đi sâu vào kỹ thuật quản lý file, cách tối ưu hóa chúng cho SEO hình ảnh và làm thế nào để kiểm soát hàng nghìn phần tử mà không bị rối. Nếu bạn chưa quen với giao diện phần mềm, hãy xem lại bài "Khám phá giao diện Figma" trước khi tiếp tục nhé.

II. Hiểu đúng về bản chất kỹ thuật

Trước khi đi vào thực hành, chúng ta cần thống nhất các khái niệm kỹ thuật. Figma hoạt động khác với Photoshop hay Illustrator ở một số điểm mấu chốt về quản lý đối tượng.

2.1. Layer là gì?

Trong Figma, Layer là đơn vị nhỏ nhất của thiết kế. Bất kỳ thứ gì bạn vẽ ra hoặc đưa vào canvas đều là một layer: một đoạn văn bản (Text layer), một hình chữ nhật (Shape layer), một đường pen (Vector layer), hay một tấm ảnh (Image layer).

Khác với Photoshop (nơi layer thường là điểm ảnh/raster), Layer trong Figma chủ yếu là Vector. Điều này có nghĩa là chúng ta có thể thay đổi kích thước thoải mái mà không lo bị vỡ hạt.

Cấu trúc Layer Panel (Bảng quản lý lớp):

Nằm ở thanh sidebar bên trái.
Hoạt động theo cơ chế "Last in, First out" về mặt hiển thị: Layer nào nằm trên cùng trong danh sách sẽ hiển thị đè lên các layer bên dưới ở ngoài Canvas (trục Z-index).

2.2. Frame không chỉ là “Artboard”

Nếu bạn chuyển từ Photoshop hay Sketch sang, bạn có thể quen với khái niệm "Artboard". Trong Figma, chúng ta sử dụng Frame.

Thực chất, đây là một vật chứa đa năng. Nó có thể bao bọc các đối tượng con, và quan trọng hơn là khả năng lồng ghép (Nesting) vô hạn. Theo định nghĩa từ Figma Help Center (Link DoFollow - Nguồn chính chủ), tính năng này chính là chìa khóa để xây dựng các giao diện phức tạp.

Đặc tính kỹ thuật:

Parent-Child relationship: Frame đóng vai trò là cha (Parent), các đối tượng bên trong là con (Child).
Coordinate System: Frame có hệ toạ độ riêng (x, y). Vị trí của layer con được tính tương đối so với góc trên bên trái của Frame cha, chứ không phải so với toàn bộ Canvas.

2.3. Group vs Frame

Đây là kiến thức quan trọng nhất trong phần cơ sở.

Group (Nhóm): Chỉ đơn thuần là gom các layer lại để di chuyển cùng nhau. Group không có thuộc tính nền (fill) hay đường viền (stroke) riêng (trừ khi bạn add vào, nhưng nó không hoạt động như một container thực thụ). Kích thước của Group phụ thuộc hoàn toàn vào tổng kích thước các con bên trong.
Frame (Khung): Là một vật chứa độc lập. Bạn có thể set kích thước Frame cố định bất kể nội dung bên trong to hay nhỏ. Frame hỗ trợ Constraints (ràng buộc), Auto Layout, Layout Grids và Prototyping.

Lời khuyên từ chuyên gia: Trong thiết kế UI hiện đại với Figma, hãy sử dụng Frame cho 95% các trường hợp. Chỉ sử dụng Group khi bạn muốn gom các hoạ tiết trang trí (illustration) đơn giản hoặc các vector path dính liền nhau.

III. Hướng dẫn chi tiết và Kỹ thuật nâng cao

3.1. Làm chủ Frame: Nơi bắt đầu của mọi thiết kế

Để bắt đầu một thiết kế, bạn không vẽ hình chữ nhật, bạn tạo một Frame.

a. Cách tạo và thiết lập Frame chuẩn

Phím tắt: Nhấn phím F hoặc A.
Chọn kích thước: Bên thanh Properties (bên phải), Figma gợi ý sẵn các kích thước chuẩn cho Phone (iPhone 14, Android...), Tablet, Desktop, và cả Social Media.

Dashboard - Frame — ***Các kích thước Frame tiêu chuẩn do Figma đề xuất***

b. Tính năng Clip Content (Cắt nội dung)

Một trong những quyền năng lớn nhất của Frame là Clip Content.

Vấn đề: Bạn có một layer hình ảnh to hơn kích thước của Frame cha. Nó bị tràn ra ngoài trông rất lộn xộn.
Giải pháp: Tích vào ô Clip Content ở thanh Properties của Frame.
Kết quả: Phần thừa sẽ bị ẩn đi (mask), nhưng vẫn tồn tại. Điều này cực kỳ hữu ích khi làm các thiết kế dạng danh sách cuộn (scrollable lists) hoặc slider trên website.

c. Constraints (Ràng buộc vị trí)

Constraints chỉ hoạt động bên trong Frame, không hoạt động trong Group. Đây là chìa khóa của thiết kế Responsive (Thích ứng).

Left & Top: Mặc định. Layer dính chặt vào góc trên trái.
Right & Bottom: Layer dính vào góc dưới phải.
Left & Right / Top & Bottom: Layer sẽ co giãn theo chiều rộng/cao của Frame cha.
Center: Layer luôn nằm giữa Frame dù bạn kéo giãn Frame ra sao.

Ví dụ thực tế: Khi thiết kế thanh Navigation Bar (Menu), logo bạn để Constraint Left, còn icon User bạn để Constraint Right. Khi kéo dài thanh Menu từ Mobile sang Desktop, Logo và Icon sẽ tự động dính vào hai cạnh màn hình mà không cần chỉnh tay.

3.2. Quản lý Layer - Nghệ thuật của sự ngăn nắp

Một file thiết kế lộn xộn sẽ dẫn đến tư duy lộn xộn. Hãy quản lý Layer như cách bạn quản lý thư mục trong máy tính.

a. Quy tắc đặt tên (Naming Convention)

Việc đặt tên layer nghe có vẻ tốn thời gian, nhưng nó là bắt buộc nếu bạn muốn làm việc chuyên nghiệp.

Cấu trúc: Category / Component / State (Dạng đặt tên này cũng hỗ trợ khi bạn làm Component sau này).
Ví dụ: Thay vì để Frame 123, hãy đặt là HomePage / Header. Thay vì Rectangle 4, hãy đặt là Btn-Background.
Lợi ích: Khi developer inspect (kiểm tra) file của bạn để code, họ sẽ biết ngay thành phần đó là gì. Trong WordPress, tên layer này thường được dùng làm tên file ảnh khi export, giúp tối ưu SEO image (ví dụ: banner-khuyen-mai.png tốt hơn nhiều so với Frame-5.png).

b. Sử dụng tính năng Search Layer

Khi dự án của bạn có hàng nghìn layers, việc tìm kiếm bằng mắt là không thể.

Thao tác: Nhấn Cmd + F (Mac) hoặc Ctrl + F (Win) trong bảng Layer.
Ứng dụng: Bạn có thể tìm tất cả các layer có tên "Icon" để thay đổi màu sắc hàng loạt. Hoặc tìm và replace tên layer để chuẩn hóa lại file.

c. Lock (Khoá) và Hide (Ẩn)

Lock (Cmd/Ctrl + Shift + L): Dùng cho các layer nền (background) hoặc các thành phần đã chốt, tránh việc lỡ tay kéo lệch.
Hide (Cmd/Ctrl + Shift + H): Dùng để ẩn các phiên bản nháp hoặc các layer ghi chú (annotations) khi xuất file ảnh cho khách hàng xem.

3.3. Kỹ thuật Nesting Frames (Frame lồng Frame)

Đây là kỹ thuật phân biệt giữa "tay mơ" và "chuyên gia". Thay vì ném tất cả layer vào một Frame to đùng, bạn hãy chia nhỏ chúng ra.

Cấu trúc phân cấp (Hierarchy) lý tưởng:

Top Level Frame: Desktop - Home Page
Second Level Frame: Header Section
Third Level Frame: Navigation
Fourth Level Frame (Auto Layout): Menu Item
Layer: Text: "Trang chủ"

Việc chia nhỏ thành các Frame lồng nhau giúp bạn dễ dàng áp dụng Auto Layout cho từng phần nhỏ, sau đó ghép chúng lại thành một khối lớn. Nếu cần di chuyển cả khối Header, bạn chỉ cần nắm Frame cấp 2 và kéo đi, mọi thứ bên trong sẽ đi theo trật tự.

3.4. Xử lý các lỗi thường gặp với Layer và Frame

Lỗi "Layer bị nhảy ra khỏi Frame":

Nguyên nhân: Bạn kéo layer nhưng con trỏ chuột vô tình đi ra ngoài phạm vi Frame cha, hoặc tính năng "Clip Content" đang tắt khiến bạn tưởng layer vẫn ở trong.
Khắc phục: Khi kéo layer, hãy giữ phím Space để ngăn Figma tự động reparent (đổi cha) cho layer đó.

Lỗi "Không chọn được Layer con":

Nguyên nhân: Bạn đang chọn vào Group hoặc Frame cha.
Khắc phục: Giữ phím Cmd (Mac) hoặc Ctrl (Win) và click trực tiếp vào đối tượng trên canvas để thực hiện "Deep Select" (chọn sâu), bỏ qua các cấp cha để chọn đúng layer con.

IV. Lợi ích thực tế và Ứng dụng

Sau khi đã nắm vững và thực hành các kiến thức về Layer và Frame trong bài viết này, bạn sẽ nhận được những kết quả cụ thể sau:

Tăng tốc độ thiết kế: Bạn không còn tốn thời gian đi tìm xem cái nút bấm (button) đang nằm ở đâu trong mớ hỗn độn. Mọi thứ đều được ngăn nắp trong các Frame định danh rõ ràng.
Dễ dàng chỉnh sửa và mở rộng: Nhờ sử dụng Frame và Constraints, khi sếp hoặc khách hàng yêu cầu đổi kích thước giao diện từ Web sang Mobile, các thành phần của bạn sẽ co giãn linh hoạt, giảm thiểu việc phải vẽ lại từ đầu.
Hỗ trợ tối đa cho Lập trình viên (Developer): Một file thiết kế với cấu trúc Layer/Frame chuẩn mực là "giấc mơ" của mọi lập trình viên. Họ có thể dễ dàng xuất tài sản, đo đạc khoảng cách và hiểu được cấu trúc HTML tương ứng (vì Frame trong Figma rất giống thẻ <div> trong HTML).
Tối ưu quy trình cho WordPress: Khi bạn xuất các assets từ Figma sang WordPress, việc đặt tên Layer đúng chuẩn giúp tên file ảnh sạch đẹp, chuẩn SEO ngay từ khâu thiết kế.

Tổng kết: Hy vọng bài viết này giúp bạn có cái nhìn sâu sắc hơn về hai khái niệm nền tảng này. Ở bài tiếp theo, chúng ta sẽ tìm hiểu về Frame presets và Constraints. Hãy đón đọc nhé!