Chào mừng bạn đến với thế giới của Figma – công cụ thiết kế giao diện (UI/UX) và đồ họa đang ngày càng phổ biến! Nếu bạn mới nghe đến Figma hoặc đang tìm hiểu những bước chân đầu tiên để khám phá ứng dụng tuyệt vời này, thì đây chính là bài viết dành cho bạn. Figma không chỉ mạnh mẽ mà còn rất dễ tiếp cận, đặc biệt với khả năng làm việc trực tuyến và cộng tác thời gian thực. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về những công cụ và đặc trưng cơ bản nhất của Figma, giúp bạn nhanh chóng làm quen và bắt đầu hành trình thiết kế của mình.
Khi mở Figma lần đầu tiên, bạn sẽ thấy giao diện chính, nơi quản lý các dự án của mình.
Trên màn hình Dashboard, bạn có thể dễ dàng xem lại các tệp đã làm gần đây bằng cách chọn “Recent”. Nếu bạn đã quen thuộc với Sketch và muốn chuyển đổi, Figma cho phép bạn import các tệp Sketch files một cách thuận tiện. Để bắt đầu một dự án mới, bạn chỉ cần nhấp vào biểu tượng dấu “+” nằm ngay cạnh mục “Drafts”.
Để tạo một không gian làm việc trống, bạn chọn “Blank Canvas” và sau đó nhấn “Create file”. Tại bước này, Figma cũng cho phép bạn tùy chọn thư mục để lưu trữ tệp mới, giúp bạn sắp xếp công việc một cách gọn gàng ngay từ đầu.
Đây chính là giao diện làm việc chính mà bạn sẽ dành phần lớn thời gian để thiết kế. Trên thanh công cụ phía trên, bạn có thể tìm thấy nhiều tùy chọn hữu ích. Chế độ chia sẻ (“Share”) cho phép bạn thêm thành viên vào dự án, điều chỉnh quyền truy cập (chỉ xem hay chỉnh sửa), hoặc sao chép đường dẫn để đưa vào portfolio hay gửi cho đồng nghiệp. Bạn cũng có thể dễ dàng phóng to/thu nhỏ (Zoom In/Zoom Out) giống như các phần mềm thiết kế khác. Chế độ “Present” rất tiện lợi khi bạn muốn trình chiếu bản thiết kế của mình. Ngoài ra, chức năng “Libraries” giúp bạn tìm kiếm và quản lý các component, style đã lưu trữ. Với những người mới tìm hiểu design là gì, Figma là một khởi đầu tuyệt vời để thực hành.
Để dễ dàng quản lý và tìm kiếm sau này, việc đổi tên tệp tin là cần thiết. Bạn chỉ cần nhấp trực tiếp vào tên mặc định của tệp ở góc trên bên trái và nhập tên mới theo ý muốn.
Giờ đây, khi quay lại Dashboard, bạn sẽ thấy dự án mới của mình với tên đã đổi, giúp bạn dễ dàng nhận diện và tiếp tục công việc.
Tùy theo nhu cầu cá nhân, bạn có thể lưu trữ tệp Figma dưới nhiều dạng khác nhau thông qua menu chính. Chọn biểu tượng Figma (hình tròn 3 chấm) ở góc trên bên trái, bạn sẽ có các tùy chọn như “Save local copy” để lưu tệp về máy tính hoặc “Save to version history” để lưu lại các phiên bản thiết kế. Menu này còn chứa rất nhiều lựa chọn khác liên quan đến chỉnh sửa (“Edit”), xem (“View”), đối tượng (“Object”), vector (“Vector”),… cung cấp cho bạn toàn quyền kiểm soát bản thiết kế của mình.
Để bắt đầu đặt các yếu tố thiết kế lên bản vẽ, trước hết bạn cần tạo một khung làm việc, gọi là “Frame”. Bạn có thể chọn công cụ “Frame” trên Thanh Công cụ hoặc sử dụng phím tắt nhanh gọn hơn là phím “F”. Sau khi chọn công cụ Frame, một danh sách các kích thước mẫu phổ biến (cho điện thoại, máy tính bảng, desktop,…) sẽ hiện ra ở bảng Properties bên phải màn hình.
Hãy thử chọn một kích thước mẫu, ví dụ như thiết kế giao diện cho iPhone 11 Pro Max. Khi bạn chọn kích thước, Figma sẽ tự động tạo một Frame với kích thước đó và đặt tên mặc định. Để di chuyển Frame này hoặc bất kỳ đối tượng nào khác, bạn chọn công cụ “Move” hoặc phím tắt “V”. Bạn có thể tạo nhiều Frame cùng lúc để thiết kế các màn hình khác nhau và sắp xếp chúng trên Canvas. Đây là bước đầu tiên quan trọng trong quá trình thiết kế 2d trên Figma.
Tiếp theo, bạn có thể thêm các hình dạng cơ bản vào Frame của mình. Tất cả các hình dạng như hình chữ nhật (Rectangle – phím tắt R), hình tròn (Ellipse), tam giác (Polygon), ngôi sao (Star), hay thậm chí là chèn một hình ảnh bất kỳ (Place image – Ctrl + Shift + K) đều nằm trong công cụ “Shapes” trên thanh công cụ. Bạn chỉ cần chọn hình mong muốn và kéo thả vào Frame.
Ngoài ra, Figma còn cung cấp các công cụ vẽ tự do như “Pen” (phím tắt P) và “Pencil” (phím tắt Shift + P) để bạn thỏa sức sáng tạo. Công cụ “Text” (phím tắt T) cho phép bạn thêm chữ vào bản thiết kế, còn công cụ “Comment” rất hữu ích cho việc ghi chú và trao đổi ý kiến trong quá trình cộng tác. Việc sử dụng linh hoạt các công cụ này là nền tảng của mỹ thuật số hiện đại.
Đối với các đối tượng hình dạng hoặc đường vẽ, bạn có thể tùy chỉnh chúng một cách dễ dàng. Chọn đối tượng và bạn sẽ thấy các tùy chọn chỉnh sửa ở bảng Properties bên phải. Công cụ “Bend” (giữ Ctrl khi chỉnh sửa vector) giúp bạn uốn cong các đường. Công cụ “Paint Bucket” (phím tắt B) cho phép bạn nhanh chóng tô màu cho các hình khép kín. Ngoài ra, khi chọn đối tượng, bạn có thể nhấp vào “Edit Object” để đi sâu vào chỉnh sửa chi tiết.
Để bật hoặc tắt thước kẻ (Rulers) giúp căn chỉnh chính xác, bạn có thể sử dụng phím tắt tiện lợi Shift + R.
Một trong những tính năng mạnh mẽ nhất của Figma, đặc biệt quan trọng đối với UI/UX Designer, là “Component”. Component là những yếu tố thiết kế có thể tái sử dụng nhiều lần, giúp bạn duy trì tính nhất quán và tiết kiệm thời gian. Bạn có thể tạo một Component từ bất kỳ đối tượng hoặc nhóm đối tượng nào. Ví dụ, bạn vẽ một hình chữ nhật, sau đó click chuột phải vào nó và chọn “Create Component” (hoặc sử dụng phím tắt Ctrl + Alt + K).
Sau khi tạo Component, bạn sẽ thấy các thành phần ban đầu (ví dụ: hình chữ nhật) được gộp lại thành một đối tượng duy nhất. Đối tượng gốc bạn vừa tạo sẽ trở thành “Main Component”, được biểu thị bằng biểu tượng hình thoi màu tím với bốn lá vuông nhỏ. Bạn có thể đổi tên Component này. Từ Main Component, bạn có thể tạo ra các “Instance” (bản sao) bằng cách kéo thả hoặc copy/paste. Instance được biểu thị bằng biểu tượng hình thoi rỗng màu tím. Khi bạn thay đổi thuộc tính của Main Component (ví dụ: màu sắc, kích thước), tất cả các Instance của nó sẽ tự động cập nhật theo. Tuy nhiên, nếu bạn thay đổi một thuộc tính cụ thể trên một Instance (ví dụ: đổi màu riêng cho Instance đó), sự thay đổi đó sẽ ghi đè lên thuộc tính từ Main Component, và sau đó, việc thay đổi thuộc tính tương ứng trên Main Component sẽ không còn ảnh hưởng đến Instance đó nữa. Nguyên tắc này rất hữu ích để tạo ra các biến thể của một thành phần, ví dụ như các trạng thái khác nhau của một nút (normal, hover, pressed, disabled). Đây là một khía cạnh nâng cao của digital art là gì trong thiết kế giao diện.
Bên cạnh các công cụ hình dạng và vẽ, Figma còn cung cấp các thao tác boolean mạnh mẽ để kết hợp hoặc cắt các hình dạng với nhau: “Mask”, “Union Selection” (hợp nhất), “Subtract Selection” (loại bỏ), “Intersect Selection” (giao nhau), “Exclude Selection” (loại trừ), và “Flatten Selection” (làm phẳng). Các công cụ này rất “nice” và hữu ích tùy thuộc vào mục đích thiết kế cụ thể của bạn.
Việc sử dụng và cài đặt Figma khá đơn giản. Figma có thể hoạt động trực tiếp trên hầu hết các trình duyệt web hiện đại mà không cần cài đặt. Tuy nhiên, để có trải nghiệm tốt nhất và làm việc ngoại tuyến, bạn có thể tải ứng dụng Figma về máy tính cá nhân của mình.
Kết luận
Qua bài viết này, chúng ta đã cùng nhau khám phá những bước cơ bản nhất để bắt đầu sử dụng Figma, từ làm quen với giao diện, quản lý file, sử dụng các công cụ vẽ hình, văn bản cho đến hiểu về khái niệm Components mạnh mẽ. Figma là một công cụ linh hoạt và hiệu quả, phù hợp cho cả người mới bắt đầu lẫn các nhà thiết kế chuyên nghiệp. Việc làm chủ các công cụ cơ bản này sẽ mở ra cánh cửa để bạn sáng tạo ra những bản thiết kế giao diện đẹp mắt và chuyên nghiệp. Hãy dành thời gian thực hành để làm quen với các phím tắt và luồng làm việc trong Figma nhé!