Hướng dẫn sử dụng figma

      79
Ở bài viết này, BAC sẽ hướng dẫn các bạn 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 BAC đón chờ những bài viết nâng cao hơn về Figma trong thời gian sắp tới nhé.

Bạn đang xem: Hướng dẫn 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 chính là tệp trống mà bạn vừa tạo. Bạn có thể kiểm tra hoặc tùy chỉnh chế độ chia sẻ (Share) tùy theo mong muốn: thêm thành viên, chỉnh sửa quyền truy cập, sao chép đường dẫn,... để đưa vào portfolio hoặc theo từng mục đích cá nhân. Bên cạnh đó, bạn có thể Zoom In/ Zoom Out như các phần mềm khác, sử dụng chế độ trình chiếu “Present”, tìm kiếm mọi thứ 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:
*

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 11 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”.

Xem thêm: Giày Đá Bóng Sân Cỏ Nhân Tạo Chính Hãng, Giày Đá Bóng Cổ Cao Giá Tốt Tháng 1, 2022


Đố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ạ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),...
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ư RectangleText đượ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é!


BAClà đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức củaIIBAquốc tế. Ngoài các khóa học public,BACcòn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

Các chương trình đào tạo liên quan:

Tham khảo chương trình đào tạo:

Ban biên tập nội dung - BAC


CÔNG TY CỔ PHẦN ĐÀO TẠO VÀ TƯ VẤN BAC