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

10 Thuật ngữ AI ai cũng nên biết

Khám phá 10 thuật ngữ quan trọng nhất trong lĩnh vực trí tuệ nhân tạo (AI) cùng BAC – từ AI, Machine Learning đến Generative AI, Copilot và hơn thế nữa. Bài viết được biên dịch từ nguồn Microsoft, giúp bạn hiểu rõ cách công nghệ này hoạt động và đang thay đổi thế giới. Một tài liệu nhập môn hoàn hảo cho người mới, chuyên viên công nghệ hay bất kỳ ai muốn bắt kịp làn sóng chuyển đổi số.
Học AI từ con số 0: Lộ trình đơn giản cho người mới bắt đầu

Khám phá lộ trình học AI đơn giản cho người mới bắt đầu cùng BAC. Bạn không cần giỏi lập trình để có thể học AI và trở thành chuyên gia. Những kiến thức này hoàn toàn có thể được tiếp thu và ứng dụng thực tế bởi tất cả mọi người.
Gemini là gì? So sánh Gemini và ChatGPT cho người mới bắt đầu

Gemini là gì? So sánh nhanh Gemini và ChatGPT một cách đơn giản, giúp người mới bắt đầu học AI chọn công cụ phù hợp để học tập, làm việc và sáng tạo nội dung. Mỗi công cụ đều có ưu và nhược điểm riêng, hãy cùng BAC khám phá chi tiết.
AI là gì? Giải thích đơn giản cho người mới bắt đầu

Bài viết này sẽ giúp các bạn tìm hiểu AI theo hướng đơn giản nhất. Bằng cách giải thích ngắn gọn, cô động, súc tích và dễ hiểu, BAC sẽ cho bạn lý giải về cụm từ “AI”. Qua đó, bạn không chỉ hiểu mà còn biết lý do vì sao mình phải học AI.

Bình luận

Lê Anh Tuấn

Chuyên viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi là nhân sự thuộc Trung tâm Phát triển CNTT – Khối Ngân hàng số, hiện đang đảm nhiệm vai trò kiểm thử phần mềm (tester). Việc tham gia khóa học Business Analyst đã mang lại cho tôi góc nhìn toàn diện và rõ ràng hơn về vai trò của BA trong lĩnh vực ngân hàng.

Khóa học Fundamental Business Analysis tại BAC không chỉ giúp tôi hiểu đúng bản chất công việc BA mà còn hỗ trợ phát triển tư duy nghiệp vụ – từ tiếp cận giải pháp kỹ thuật sang tập trung vào nhu cầu người dùng. Phương pháp giảng dạy kết hợp lý thuyết và thực hành thực tiễn, cùng các hoạt động mô phỏng, thảo luận nhóm đã giúp tôi nâng cao kỹ năng giao tiếp, phân tích và trình bày yêu cầu – những năng lực thiết yếu để phối hợp hiệu quả giữa các bên trong dự án công nghệ.

Xem chi tiết +
Huỳnh Cao Cường

Nhân viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi hiện đang công tác tại Trung tâm Phát triển CNTT – Khối CNTT, với vai trò là nhân sự chức năng phụ trách mảng Ngân hàng số, chuyên sâu về kiểm thử phần mềm (Tester). Trước khi tham gia khóa học Fundamental Business Analysis do BAC tổ chức, tôi từng hình dung BA chỉ đơn thuần là cầu nối giữa bộ phận kỹ thuật và nghiệp vụ.

Tuy nhiên, quá trình học đã giúp tôi nhận thức rõ hơn về bản chất và tầm quan trọng của vị trí này. BA không chỉ kết nối các bên liên quan, mà còn giữ vai trò định hình yêu cầu, đảm bảo giải pháp được thiết kế đúng mục tiêu và sát với nhu cầu thực tế. Khóa học đã trang bị cho tôi tư duy phân tích bài bản, khả năng diễn đạt yêu cầu rõ ràng, và kỹ năng phối hợp hiệu quả trong môi trường dự án đa chiều.

Với nền tảng công nghệ thông tin sẵn có, khóa học là bước chuyển hướng quan trọng giúp tôi phát triển tư duy nghiệp vụ vững chắc và sẵn sàng theo đuổi lộ trình nghề nghiệp chuyên sâu trong lĩnh vực Business Analysis tại Eximbank.

Xem chi tiết +
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 +

Professional Transfer Services in Batumi

Luxury Georgian Transfer Services – Tbilisi & Batumi

Airport Transfers in Georgia

10 Thuật ngữ AI ai cũng nên biết

Học AI từ con số 0: Lộ trình đơn giản cho người mới bắt đầu

Gemini là gì? So sánh Gemini và ChatGPT cho người mới bắt đầu

AI là gì? Giải thích đơn giản cho người mới bắt đầu

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