Mở đầu — vì sao bài này quan trọng
Cho đến bài này, bạn đã đi qua một chặng đường khá dài về lý thuyết thiết kế: visual hierarchy, color, typography, layout grid, responsive. Tất cả những kiến thức đó nằm trong đầu bạn, hoặc nằm trên giấy nháp. Nhưng từ bài này trở đi, chúng ta bắt đầu một giai đoạn mới: biến ý tưởng thành thiết kế thật, có thể nhìn thấy, chia sẻ, và bàn giao cho lập trình viên. Và công cụ chúng ta dùng để làm việc đó là Figma.
Hãy hình dung thế này. Một designer biết lý thuyết nhưng không thành thạo công cụ giống như một đầu bếp biết công thức nhưng không biết dùng dao. Bạn có thể có gu thẩm mỹ tuyệt vời, nhưng nếu mỗi lần muốn thử một ý tưởng layout bạn lại mất 30 phút loay hoay với phần mềm, bạn sẽ chẳng bao giờ kịp thử đủ phương án để tìm ra cái tốt nhất. Tốc độ và sự trôi chảy khi dùng công cụ chính là thứ phân biệt một designer nghiệp dư với một người làm chuyên nghiệp.
Figma không phải là công cụ duy nhất trên thị trường — vẫn còn Sketch, Adobe XD, Penpot — nhưng tính đến năm 2026, nó là tiêu chuẩn de facto của ngành thiết kế giao diện. Khi bạn đi xin việc ở một công ty công nghệ tại TP.HCM, Hà Nội, hay bất kỳ startup nào ở Đông Nam Á, gần như chắc chắn họ sẽ hỏi: "Bạn dùng Figma thành thạo chứ?" Bài học hôm nay sẽ giúp bạn trả lời câu đó một cách tự tin. Chúng ta sẽ làm quen với không gian làm việc (workspace) và bộ công cụ (tools) cốt lõi — nền móng cho tất cả những bài Figma tiếp theo (Auto Layout, Components, Prototyping).
Khái niệm cốt lõi
Tại sao lại là Figma?
Trước khi mở phần mềm, bạn cần hiểu vì sao cả ngành lại chọn Figma. Có ba lý do then chốt:
Miễn phí cho cá nhân và nhóm nhỏ. Figma có gói Starter hoàn toàn miễn phí, đủ dùng cho một người học hoặc freelancer. Bạn được tạo không giới hạn file cá nhân (draft), 3 file trong mỗi project chia sẻ, và đầy đủ tính năng thiết kế lẫn prototype. Với một bạn sinh viên ở Việt Nam chưa có thu nhập, đây là điều cực kỳ quý — bạn không cần bỏ một đồng nào để bắt đầu sự nghiệp.
Chạy trên đám mây (cloud-based). Đây là điểm cách mạng. Figma chạy ngay trong trình duyệt — không cần cài đặt nặng nề, không cần máy cấu hình khủng, và quan trọng nhất: không cần bấm Save. File của bạn tự động lưu liên tục lên cloud. Bạn mở máy ở văn phòng làm dở, về nhà mở laptop khác đăng nhập là thấy đúng trạng thái cũ. Nhiều người có thể cùng mở một file và chỉnh sửa real-time, y như Google Docs — bạn thấy con trỏ của đồng nghiệp di chuyển trên màn hình. Điều này thay đổi hoàn toàn cách các nhóm thiết kế cộng tác.
Tiêu chuẩn ngành. Vì hai lý do trên, Figma đã trở thành ngôn ngữ chung. Designer, product manager, lập trình viên, thậm chí cả khách hàng đều mở chung một link Figma để xem và góp ý. Khi bạn thạo Figma, bạn nói cùng ngôn ngữ với cả thị trường lao động.
Bốn loại file trong Figma
Khi mới vào, nhiều người bối rối vì Figma có nhiều "loại" file. Bạn chỉ cần nhớ:
- Design file — file thiết kế chính, nơi bạn vẽ giao diện. Đây là thứ ta dùng 90% thời gian.
- FigJam — bảng trắng (whiteboard) để brainstorm, vẽ sơ đồ, dán sticky note. Dùng cho giai đoạn ý tưởng.
- Slides — công cụ làm slide trình bày, ra mắt gần đây.
- Dev Mode — chế độ dành cho lập trình viên đọc thông số (ta sẽ học kỹ ở Bài 55).
Giải phẫu Workspace
Khi mở một design file, màn hình Figma chia thành các vùng cố định. Hãy thuộc tên chúng như thuộc bố cục căn bếp của mình:
- Toolbar (thanh công cụ trên cùng): chứa menu chính, công cụ chọn, công cụ vẽ, và nút Share. Ở giữa là tên file.
- Layers panel (panel trái): liệt kê mọi thành phần trong trang dưới dạng cây phân cấp, giống như cấu trúc thư mục. Tab Assets bên cạnh chứa components.
- Canvas (vùng giữa): không gian làm việc vô hạn, nơi bạn đặt các frame và vẽ. Bạn có thể zoom, pan thoải mái.
- Properties panel (panel phải): hiển thị mọi thuộc tính của đối tượng đang chọn — vị trí, kích thước, màu fill, stroke, hiệu ứng. Đây là nơi bạn tinh chỉnh.
Frame — viên gạch nền tảng
Khái niệm quan trọng nhất bạn phải nắm trong bài này là Frame. Frame là một khung chứa — bạn có thể hình dung nó như một tờ giấy hoặc một màn hình thiết bị. Mọi thiết kế giao diện đều bắt đầu bằng việc tạo một Frame.
Điểm hay là Figma có sẵn các preset frame theo kích thước thiết bị thật: iPhone 16, iPad, Desktop 1440px, Android... Khi bạn chọn công cụ Frame (phím tắt F), panel phải hiện danh sách preset để bạn chọn đúng khổ màn hình cần thiết kế. Frame cũng là nền tảng cho responsive và Auto Layout ở các bài sau.
Nhiều người nhầm Frame với Group. Khác biệt cốt lõi: Group chỉ gom các đối tượng lại để di chuyển cùng nhau; còn Frame là một container thật sự, có thể có kích thước cố định, có thể clip nội dung tràn ra ngoài, có thể áp layout. Quy tắc vàng: dùng Frame, hạn chế dùng Group.
Bộ công cụ vẽ cốt lõi
Trên toolbar (hoặc bằng phím tắt), bạn có:
- Move (V) — chọn và di chuyển. Công cụ mặc định.
- Frame (F) — tạo khung.
- Rectangle (R), Ellipse (O), Line (L) — các hình cơ bản.
- Pen (P) — vẽ vector tự do.
- Text (T) — thêm chữ.
- Hand (H hoặc giữ phím cách) — kéo di chuyển canvas.
Tình huống thực tế
Ví dụ 1 — Startup Tiki và bài toán cộng tác từ xa
Hãy tưởng tượng một nhóm sản phẩm 4 người tại một công ty thương mại điện tử kiểu Tiki ở TP.HCM: một product designer, một product manager, và hai lập trình viên. Trước đây họ dùng một công cụ thiết kế cài trên máy, mỗi lần designer sửa xong phải export ảnh PNG gửi qua Slack, lập trình viên xem ảnh rồi tự đoán khoảng cách, màu sắc. Một vòng phản hồi mất nửa ngày.
Khi chuyển sang Figma, mọi thứ gói gọn trong một link. Designer đặt frame "Trang chi tiết sản phẩm" trên canvas. PM mở link, để lại comment ngay tại nút "Thêm vào giỏ": "Nút này nên to hơn cho dễ bấm trên mobile." Lập trình viên mở cùng file, bật Dev Mode, đọc thẳng mã màu #FF424E và padding 16px mà không cần hỏi. Vòng phản hồi rút từ nửa ngày xuống còn 10 phút.
Bài học: Sức mạnh thật sự của Figma không nằm ở việc vẽ đẹp hơn, mà ở việc xóa bỏ ma sát trong giao tiếp giữa các vai trò. Một workspace duy nhất, một nguồn sự thật duy nhất (single source of truth).
Ví dụ 2 — Bạn Minh và 200MB file thiết kế trên máy yếu
Minh là sinh viên năm 3 ngành Thiết kế đồ họa ở Đà Nẵng, dùng một chiếc laptop văn phòng RAM 8GB. Khi học designer, bạn lo lắng vì phần mềm thiết kế thường rất nặng. Nhưng vì Figma chạy trên trình duyệt, Minh chỉ cần mở Chrome là làm việc được. File 200MB với hàng trăm layer được xử lý phần lớn trên server của Figma, máy của Minh không bị treo.
Quan trọng hơn: Minh từng có thói quen xấu là quên Save và mất nguyên buổi làm việc khi máy sập nguồn. Với Figma, điều đó không bao giờ xảy ra nữa — mọi thay đổi tự lưu lên cloud theo thời gian thực, và còn có Version History để quay lại bất kỳ phiên bản nào trong quá khứ.
Bài học: Rào cản phần cứng và nỗi sợ mất dữ liệu — hai thứ từng cản trở người mới — gần như biến mất với mô hình cloud. Đây là lý do Figma đặc biệt phù hợp với người học ở Việt Nam.
Ví dụ 3 — Lan và sự hỗn loạn của Layers panel
Lan, một junior designer tại một agency ở Hà Nội, được giao file thiết kế từ người tiền nhiệm để chỉnh sửa. Khi mở Layers panel, cô thấy một mớ hỗn độn: "Rectangle 47", "Group 12", "Frame 3 copy copy", lồng nhau mười mấy tầng. Lan mất hơn một giờ chỉ để tìm xem cái nút màu cam nằm ở layer nào.
Sau lần đó, Lan rút ra nguyên tắc cho chính mình: luôn đặt tên layer rõ ràng ngay khi tạo ("btn-primary", "card-product", "header-nav"), và gom các thành phần liên quan vào frame có tên đàng hoàng. Khi cô bàn giao file cho đồng nghiệp, không ai phải mất một giờ như cô từng trải qua.
Bài học: Workspace gọn gàng không phải chuyện làm màu — nó là khoản đầu tư cho chính bạn và đồng đội trong tương lai. File Figma sạch sẽ là dấu hiệu của một designer chuyên nghiệp.
Hướng dẫn từng bước
Hãy mở [figma.com](https://figma.com) và làm theo. Học công cụ phải bằng tay, không bằng mắt.
- Tạo tài khoản và file đầu tiên. Đăng ký miễn phí bằng email hoặc Google. Vào giao diện chính, bấm nút + hoặc "Design file" để tạo file thiết kế mới. Đặt tên file (góc trên cùng) là "Bai 32 - Lam quen Figma".
- Làm quen với di chuyển canvas. Giữ phím Space rồi kéo chuột để pan. Cuộn chuột để di chuyển dọc, giữ Ctrl/Cmd + cuộn để zoom. Nhấn Shift + 1 để zoom vừa khít toàn bộ nội dung, Shift + 2 để zoom vào vùng đang chọn. Tập cho đến khi việc di chuyển trở thành phản xạ.
- Tạo Frame đầu tiên. Nhấn phím F. Panel phải hiện danh sách preset — chọn "Desktop (1440 × 1024)". Một frame trắng xuất hiện trên canvas. Để ý nó được đặt tên tự động và hiện trong Layers panel bên trái.
- Vẽ một hình chữ nhật. Nhấn R, kéo chuột trong frame để vẽ một khối. Sang panel phải, đổi màu Fill sang một màu bạn thích. Thử thêm Stroke (viền) và bo góc bằng thông số Corner radius.
- Thêm chữ. Nhấn T, click vào frame, gõ "Xin chào Figma". Ở panel phải, đổi font, size, weight, màu. Đây chính là nơi kiến thức typography ở các bài trước được áp dụng.
- Đặt tên layer. Trong Layers panel, double-click vào tên từng đối tượng và đổi thành tên có nghĩa: "khoi-mau", "tieu-de". Tập thói quen này ngay từ bài đầu.
- Chia sẻ file. Bấm nút Share màu xanh góc phải trên. Chọn quyền "Anyone with the link can view", copy link. Đó là cách bạn gửi thiết kế cho người khác xem.
- Xem lại lịch sử. Vào menu chính (icon Figma góc trái) → File → "Show version history" để thấy Figma đã âm thầm lưu mọi thay đổi của bạn.
Lỗi thường gặp & mẹo
Lỗi: Dùng Group thay vì Frame. Người mới hay nhấn Ctrl/Cmd + G để gom nhóm. Hãy đổi sang nhấn Ctrl/Cmd + Alt + G để tạo Frame. Frame mở ra cánh cửa tới Auto Layout, responsive, và clip nội dung — Group thì không.
Lỗi: Vẽ trực tiếp trên canvas trống, không có frame bao quanh. Mọi thứ nên nằm trong một frame đại diện cho màn hình. Vẽ ngoài frame khiến bạn không thể export gọn gàng và không dùng được tính năng responsive.
Lỗi: Bỏ mặc Layers panel hỗn loạn. Như câu chuyện của Lan, đặt tên cẩu thả sẽ trả giá sau. Đặt tên ngay khi tạo, đừng để dồn.
Mẹo: Học phím tắt từng cái một. Đừng cố nhớ hết. Mỗi ngày chọn một phím tắt và ép mình dùng nó suốt buổi: hôm nay là F, mai là R, mốt là T. Sau hai tuần, tay bạn sẽ tự bay.
Mẹo: Bấm Ctrl/Cmd + / để mở thanh tìm kiếm lệnh. Quên công cụ nằm đâu? Gõ tên nó vào đây, Figma sẽ tìm và thực thi giúp bạn. Đây là chiếc phao cứu sinh cho người mới.
Mẹo: Giữ Alt khi di chuyển để xem khoảng cách. Khi kéo một đối tượng và giữ Alt, Figma hiện số đo khoảng cách tới các đối tượng xung quanh — cực kỳ hữu ích để căn chỉnh chính xác.
Mẹo: Nhân bản nhanh bằng Ctrl/Cmd + D hoặc giữ Alt rồi kéo đối tượng để tạo bản sao.
Bài tập thực hành
Hãy hoàn thành bài tập sau để biến lý thuyết thành phản xạ tay:
- Tạo một file Figma mới tên "Bai tap 32".
- Tạo một frame Desktop 1440px.
- Trong frame đó, dựng một "thẻ giới thiệu bản thân" đơn giản gồm: một hình chữ nhật bo góc làm nền thẻ, một hình tròn làm avatar, một dòng tiêu đề là tên bạn (size lớn, đậm), một dòng mô tả nghề nghiệp (size nhỏ hơn, nhạt màu hơn), và một nút bấm "Liên hệ" có màu fill và bo góc.
- Đặt tên cho TẤT CẢ layer một cách rõ ràng và có nghĩa (ví dụ: "card-bg", "avatar", "ten", "mo-ta", "btn-lien-he").
- Tạo một link Share quyền "view" và lưu lại — bạn có thể dán vào phần Community của khóa học để nhận góp ý.
Tóm tắt
Figma là tiêu chuẩn ngành vì ba lý do: miễn phí cho cá nhân, chạy trên đám mây với cộng tác real-time và tự lưu, và được cả thị trường lao động sử dụng. Trong bài này, bạn đã làm quen với giải phẫu workspace gồm bốn vùng chính — Toolbar, Layers panel, Canvas, Properties panel — và nắm khái niệm nền tảng nhất: Frame, viên gạch xây nên mọi thiết kế giao diện, khác biệt hẳn với Group.
Bạn cũng đã thực hành bộ công cụ vẽ cốt lõi (Move, Frame, Rectangle, Text) cùng các phím tắt V, F, R, O, T, và học cách chia sẻ file bằng một link duy nhất. Ba câu chuyện thực tế — đội ngũ sản phẩm rút ngắn vòng phản hồi, bạn sinh viên thoát nỗi sợ máy yếu và mất dữ liệu, và bài học về Layers panel gọn gàng — cho thấy giá trị thật của Figma nằm ở sự trôi chảy và khả năng cộng tác, chứ không chỉ ở việc vẽ.
Hãy nhớ: thành thạo công cụ là chuyện của cơ bắp tay, không phải của trí nhớ. Càng dùng nhiều, càng nhanh. Ở bài tiếp theo, chúng ta sẽ bước lên một bậc với Auto Layout — tính năng biến Frame tĩnh thành những component co giãn thông minh, nền tảng của thiết kế hiện đại.