Mar 25, 2021

Hướng dẫn cách sử dụng Figma (cơ bản)

Ở 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é.

Đầ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 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:

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

Đố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é!

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC cò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:

Nguyên lý cơ bản trong UX/UX
Product Design

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

Các bài viết liên quan Power BI:

Các bài viết liên quan:

Các công cụ dành cho UI/UX - click vào đây
Top 10 blogs mà UX Designers nên theo dõi - click vào đây
Lộ trình trở thành UX/UI Designer (phần 1) - click vào đây

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

Click để đọc tiếp

Các Business Analyst cần trau dồi những công nghệ gì trong năm 2025

Đối với sự phát triển nhanh chóng của công nghệ ngày này, việc không ngừng trau dồi và học hỏi là điều bắt buộc mà các Business Analyst phải làm để phát triển hơn trong lĩnh vực phân tích nghiệp vụ. Trong bài viết này, các bạn hãy cùng BAC tìm hiểu các xu hướng và các kỹ năng mới để làm hành trang trên sự nghiệp Business Analyst nhé!
Sự khác biệt giữa UAT và Usability Testing Business Analyst cần lưu ý

UAT và Usability Testing thường được mang lên bàn cân để so sánh nhưng, đây là 2 phương pháp kiểm thử khác nhau. Trong khi Usability Testing đảm bảo sự hài lòng của người dùng thì UAT lại giúp các Business Analyst xác thực chức năng. Cả hai đều là một phần không thể thiếu để cung cấp một sản phẩm chất lượng cao. Hãy cùng BAC tìm hiểu ngay nhé!
API là gì? Khám phá cầu nối giữa các ứng dụng

API là nền tảng quan trọng kết nối các ứng dụng và dịch vụ trong kỷ nguyên số, tạo ra sự linh hoạt, hiệu quả và mở rộng cho các hệ thống. Bài viết sau giới thiệu API, cách hoạt động, các kiểu kiến trúc phổ biến cùng các công cụ kiểm thử API như Postman.
Meta AI là gì và cách sử dụng Meta AI hiệu quả 2025

Meta AI là một công cụ Trí Tuệ Nhân Tạo do chính công ty mẹ của Facebook, Instagram, WhatsApp ra mắt. Đây được xem là một cuộc cách mạng sẽ làm thay đổi cách mà các doanh nghiệp và người dùng sử dụng mạng xã hội.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +