Tuy nhiên, đừng lo lắng! Thực tế, cách bố trí của Figma cực kỳ logic và khoa học. Một khi bạn hiểu được tư duy sắp xếp của nó, bạn sẽ thấy mọi thứ đều nằm đúng nơi bạn cần. Trong bài học này, chúng ta sẽ cùng nhau "giải phẫu" giao diện này để bạn có thể làm chủ không gian làm việc của mình.
II. Dạo quanh trình biên tập Figma Design
Để dễ hình dung, hãy tưởng tượng màn hình Figma là một bàn làm việc của kiến trúc sư. Chúng ta có thể chia giao diện Figma thành 4 khu vực chính, mỗi khu vực đảm nhiệm một vai trò riêng biệt:
- Khu vực 1 - Dưới cùng nằm giữa (The Toolbar): Thanh công cụ là nơi bạn tìm thấy các công cụ cho phép bạn di chuyển quanh canvas, tạo các lớp (layers) như khung (frames), hình dạng (shapes), văn bản, và để lại bình luận cho cộng tác viên.
- Khu vực 2 - Bên trái (Left Sidebar): Thanh bên trái, hay còn gọi là bảng điều hướng, cho phép bạn truy cập vào các lớp (layers), trang (pages) và thành phần (components) trong tập tin của mình, cũng như Menu chính và Menu tập tin.
- Khu vực 3 - Ở giữa (The Canvas): Canvas là nơi bạn tạo, tinh chỉnh và tổ chức các thiết kế của mình.
- Khu vực 4 - Bên phải (Right Sidebar): Thanh bên phải, hay còn gọi là bảng thuộc tính, là nơi bạn có thể truy cập thông tin về thiết kế của mình.
III. Khám phá thanh công cụ ( The toolbar)
3.1. Move Tools (Công cụ Di chuyển)
Đây là nhóm công cụ mặc định và được sử dụng tần suất cao nhất trong quá trình thiết kế.
- Move (Phím tắt: V): Công cụ cơ bản nhất dùng để chọn (select) và di chuyển các đối tượng đi khắp màn hình.
-
Hand tool (Phím tắt: H): Giúp bạn nắm và kéo vùng làm việc (Canvas) để thay đổi góc nhìn mà không vô tình chọn hay làm xê dịch các đối tượng thiết kế.
(💡 Mẹo chuyên gia: Thay vì bấm phím H, bạn có thể giữ phím Space (Phím cách) để kích hoạt nhanh công cụ này bất cứ lúc nào). - Scale (Phím tắt: K): Dùng để thay đổi kích thước đối tượng (phóng to/thu nhỏ) mà vẫn giữ nguyên tỷ lệ thiết kế, đảm bảo hình ảnh hoặc font chữ không bị méo hay vỡ.
3.2. Region Tools (Công cụ Vùng & Khung)
Đây là bộ công cụ dùng để tạo ra các "container" (vật chứa) cho thiết kế của bạn.
- Frame (Phím tắt: F): Giống như một tờ giấy vẽ hoặc màn hình điện thoại/máy tính. Trong Figma, mọi thiết kế chuẩn đều phải nằm trong Frame.
- Section (Phím tắt: Shift + S): Một tính năng mới dùng để nhóm các Frame lại với nhau. Nó giúp tổ chức file gọn gàng hơn và rất hữu ích khi bạn thiết kế luồng người dùng (User Flow) hoặc đánh dấu trạng thái dự án (ví dụ: "Ready for Dev").
- Slice: Dùng để khoanh vùng và xuất (export) một phần cụ thể của thiết kế ra file ảnh (PNG/JPG) mà không cần xuất cả màn hình.
3.3. Shape Tools (Công cụ Hình khối)
Đây là những viên gạch nền tảng để xây dựng nên mọi giao diện phức tạp.
- Bao gồm các hình cơ bản: Rectangle (Hình chữ nhật - R), Ellipse (Hình tròn - O), Polygon (Đa giác), Star (Ngôi sao) và Arrow/Line (Mũi tên/Đường kẻ - L).
- Bạn có thể kết hợp các hình khối này (Boolean Operations) để tạo ra các nút bấm, biểu tượng (icon), hoặc bố cục trang web.
3.4. Draw & Creation Tools (Vẽ và Sáng tạo)
Nơi bạn thể hiện sự tự do và sáng tạo với các đường nét Vector.
- Pen (P): "Vũ khí" mạnh nhất của Designer. Dùng để vẽ các đường Vector chính xác, tạo logo hoặc icon tùy chỉnh theo ý muốn.
- Paint Bucket (B): Dùng để đổ màu vào các vùng khép kín của Vector (thường dùng sau khi vẽ bằng Pen tool). Lưu ý: Phím B trong Figma là Paint Bucket, không phải Brush vẽ cọ.
- Pencil (Shift + P): Dùng để vẽ tự do (freehand) giống như cầm bút chì vẽ lên giấy, thích hợp để phác thảo ý tưởng nhanh hoặc tạo chữ ký tay.
3.5. Text & Comment (Văn bản và Trao đổi)
- Text (Phím tắt: T): Công cụ soạn thảo văn bản. Bạn dùng nó để thêm tiêu đề, nội dung mô tả vào thiết kế.
- Comment (Phím tắt: C): Biểu tượng hình tin nhắn. Đây là tính năng cộng tác "thần thánh" giúp bạn, khách hàng và đồng đội có thể ghim ghi chú, góp ý trực tiếp ngay tại vị trí cụ thể trên bản thiết kế.
3.6. Actions (Hành động - Quick Actions)
Khu vực này (thường kích hoạt bằng Ctrl + / hoặc icon Resources) giúp tìm kiếm mọi thứ trong Figma. Nó chia làm 3 thẻ chính:
-
Thẻ All (Tất cả): Đóng vai trò là bộ lọc tổng hợp, tìm kiếm Assets, Plugins và các lệnh cùng lúc. Tại đây hiển thị:
- Recents (Gần đây): Liệt kê các file, plugin hoặc lệnh bạn vừa sử dụng để truy cập lại nhanh chóng.
- Suggestions (Gợi ý): Figma tự động đề xuất các công cụ phù hợp dựa trên những gì bạn đang chọn trên màn hình.
- Common Settings (Cài đặt chung): Các lệnh điều khiển giao diện phổ biến:
- Minimize UI: Ẩn các thanh công cụ để mở rộng vùng vẽ.
- Show rulers (Shift + R): Bật tắt thước kẻ đo đạc.
- Snap to pixel grid: Tự động dính đối tượng vào lưới pixel cho thẳng hàng.
- Multiplayer cursors: Ẩn/Hiện con trỏ chuột của người khác đang xem file.
- Thẻ Assets (Tài nguyên): Thư viện chứa các Components (thành phần mẫu) của dự án. Bạn chỉ cần kéo và thả chúng từ đây ra màn hình để sử dụng.
- Thẻ Plugins & Widgets: Kho tiện ích mở rộng. "Plugins" giúp tự động hóa tác vụ (ví dụ: tách nền ảnh), còn "Widgets" là các công cụ tương tác nhỏ (ví dụ: giấy ghi chú, đồng hồ bấm giờ).
3.7. Dev Mode (Chế độ nhà phát triển)
Đây là tính năng đặc biệt dành cho giai đoạn chuyển giao thiết kế (Handoff).
-
Chức năng: Khi bật công tắc này (biểu tượng
</>), giao diện chuyển sang dạng tối ưu cho Lập trình viên (Developer). - Lợi ích: Ẩn các công cụ vẽ để tránh vô tình làm hỏng thiết kế, đồng thời hiển thị mã code (CSS, iOS, Android) và thông số kỹ thuật chi tiết để lập trình viên copy và xây dựng sản phẩm thực tế.
