Trong bài viết này, chúng ta cùng nghiên cứu các công cụ và đặc trưng cơ bản của Figma như hợp tác dự án, tạo prototypes,… Đây chắc chắn là một bài viết hữu ích đối với những bạn đã từng hoặc mới nghe về Figma nhưng chưa có cơ hội tìm hiểu và khám phá về ứng dụng tuyệt vời này. Còn nếu đã từng tiếp xúc với Figma (hoặc Sketch), bạn hãy cùng đón chờ những bài viết nâng cao hơn về Figma trong thời gian sắp tới nhé.
Đầu tiên, đây là giao diện mà bạn sẽ gặp khi bắt đầu sử dụng Figma.
Tại Dashboard, bạn có thể chọn “Recent” để xem các tệp gần nhất, import Sketch files, hoặc bạn có thể tạo tệp mới bằng cách chọn dấu “+” kế bên “Drafts”
Để tạo một tệp trống mới, bạn chọn “Blank Canvas” và “Create” file. Tại đây, bạn có thể chỉnh sửa thư mục lưu trữ của tệp mới này.
Đây là tệp trống mà bạn đã tạo. Bạn có thể kiểm tra hoặc tùy chỉnh chế độ chia sẻ theo ý muốn: thêm thành viên, điều chỉnh quyền truy cập, sao chép liên kết,… để tích hợp vào portfolio hoặc theo từng mục đích cá nhân. Ngoài ra, bạn có thể thay đổi kích thước hiển thị, sử dụng chế độ trình bày “Present”, tìm kiếm tất cả các mục trong “Libraries”,…
Để có thể đổi tên tệp tin tiện cho việc lưu trữ và tìm kiểm, bạn click chuột trực tiếp vào tên cần đổi và nhập lại tên theo mong muốn:
Giờ đây, ở Dashboard, bạn có thể dễ dàng tìm thấy project mới của mình!
Tùy theo mục đích cá nhân, bạn có thể tạo hẳn một file riêng Figma bằng cách “save local copy” hoặc “save to version history”. Cũng tại menu này, bạn sẽ có khá nhiều lựa chọn khác nữa như “Edit”, “View”, “Object”, “Vector”,…:
Để bắt đầu thiết kế, trước hết bạn hãy tạo khung. Bạn có thể nhấp trực tiếp vào công cụ Frame trên Thanh Công cụ, hoặc để tỏ ra nguy hiểm hơn, ấn ngay phím “F”!! Sau khi chọn, danh sách các mẫu kích thước sẽ được hiện ra bên phía phải màn hình.
Giờ chúng ta sẽ thử chọn thiết kế giao diện cho iPhone 14 Pro Max nhé! Khi chọn kích thước xong, Figma sẽ tự động tạo và đặt tên. Để di chuyển, bạn có thể chọn “Move”, hoặc nhanh gọn hơn, nhấn phím “V”! Bạn có thể tạo nhiều Frame cùng một lúc và di chuyển sang các vị trí thích hợp.
Tiếp theo, tất cả những hình dạng như hình chữ nhật – Rectangle (R), hình tròn Ellipse, tam giác Polygon,… đều nằm trong tầm tay bạn và bạn có thể chọn bất cứ hình nào để thêm vào thiết kế của mình, thậm chí là một hình ảnh bất kỳ bằng Place image (Ctrl + Shift + K).
Bạn còn có thể thoải mái sử dụng các công cụ khác như “Pen” (P) hoặc “Pencil” (Shift + P), cũng như công cụ “Text” và “Comment”.
Đối với các Object như hình tròn, hình chữ nhật,… hoặc các hình được vẽ từ công cụ Pen, bạn có thể tùy chỉnh chúng với công cụ “Bend” (Ctrl) hoặc tô màu chúng (Paint Bucket – B) bằng cách click trực tiếp vào Object đó/ hoặc click vào tùy chọn “Edit Object” nhé!
Để bật/ tắt “Rulers”, Shift + R là một phím tắt hữu ích nữa mà bạn cần ghi nhớ!
Bạn có thể tạo “Component” và sắp xếp chúng một cách logic. “Component” chính là những yếu tố cơ bản có thể tái sử dụng nhiều lần và dễ dàng trên các màn hình hoặc các trang thiết kế khác nhau của bạn (tương tự như Master). Ví dụ, bạn chọn công cụ “Rectangle”, kéo ra một hình chữ nhật. Tiếp đó, bạn click chuột phải và chọn “Create Component” (Ctrl + Alt + K). Đây chính là một trong những chức năng chính mà nếu là một UI Designer, bạn sẽ rất muốn sử dụng thường xuyên đấy.
Trong trường hợp bạn muốn tạo nút (button). Bạn có thể đi theo cách: Chọn công cụ “Rectangle”, kéo thả theo kích thước mong muốn. Sau đó, bạn chọn “Text” (T) và nhấp vào hình chữ nhật vừa tạo và điền ký tự mong muốn. Tiếp theo, ở phía phải màn hình, bạn sẽ có các tùy chọn như Align (căn chỉnh vị trí bằng cách nhập số trực tiếp hoặc kéo thả), xoay, định dạng font chữ, kích thước, Fill (thay đổi màu sắc), chế độ “blending”, Effect (hiệu ứng),…
- Lưu ý: Bạn có thể tạo một button tiêu chuẩn khi chỉnh độ bo góc từ 0 thành 8.
Sau đó, bạn tạo Component theo hướng dẫn ở trên (Ctrl + Alt + K). Lúc này bạn sẽ thấy, các thành phần như Rectangle và Text được hợp lại thành 1 đối tượng duy nhất có tên “Component 1”. Bạn có thể thay đổi tên theo mong muốn. Với biểu tượng cỏ bốn lá hình vuông, Component đó là thành phần chính (main component) và bạn có thể nhân bản chúng thành nhiều phiên bản (instance) (với biểu tượng hình vuông rỗng). Bạn có thể thay đổi các yếu tố ở Main Component và điều này sẽ làm các Instance của chúng thay đổi theo. Tuy nhiên, việc thay đổi bất kỳ Instance nào thì sẽ không ảnh hưởng đến Main Component.
- Lưu ý: Khi đã thay đổi màu của Instance trước, rồi mới thay đổi màu của Main Component thì việc thay đổi màu Main Component sẽ không ảnh hưởng đến Instance đó nữa. Bạn có thể áp dụng quy tắc này để tạo các phần tử cùng một nhóm có cùng kích thước và cấu hình, nhưng mang các trạng thái khác nhau. Ví dụ, các trạng thái của một button như “disabled” / “normal” / “pressed”,…
Bên cạnh đó, bạn cũng có thể kiểm tra các tính năng khác như: “Mask”, “Union Selection”, “Subtract Selection”, “Intersect Selection”, “Exclude Selection” và “Flatten Selection”. Tất cả đều rất “nice” và hữu ích tùy theo mục đích thiết kế của bạn.
Cách sử dụng và cài đặt Figma khá đơn giản. Figma có thể chạy được từ bất kỳ trình duyệt nào. Hoặc bạn có thể tải xuống Figma về máy tính cá nhân. Nếu bạn muốn tham khảo về cách tải ứng dụng Figma, vui lòng tham khảo bài viết này nhé!
