CHƯƠNG 2. HƯỚNG DẪN HỌC CÔNG CỤ FIGMA

CHƯƠNG 2. HƯỚNG DẪN HỌC CÔNG CỤ FIGMA

2.1. Mục tiêu của chương

Chương này hướng dẫn thực tập sinh Business Analyst học và sử dụng công cụ Figma theo hướng phục vụ công việc phân tích nghiệp vụ, mô tả giao diện và hỗ trợ trao đổi triển khai. Nội dung chương tập trung vào các phần cốt lõi của Figma mà intern BA cần nắm, từ thao tác cơ bản đến các tính năng nâng cao hơn như Auto Layout, Component và Variant.

Mục tiêu của chương không phải để đào tạo thực tập sinh trở thành chuyên viên thiết kế UI/UX chuyên sâu, mà nhằm giúp người học:

• làm quen với môi trường làm việc của Figma;
• sử dụng được các tính năng cơ bản để dựng màn hình;
• biết tổ chức file thiết kế một cách rõ ràng;
• biết áp dụng các tính năng nâng cao ở mức phù hợp để giao diện dễ chỉnh sửa, đồng bộ và có tính tái sử dụng.

2.2. Nguyên tắc học Figma đối với intern BA

Thực tập sinh Business Analyst cần học Figma theo nguyên tắc:

• học để phục vụ công việc BA, không học lan man theo hướng mỹ thuật thuần túy;
• học đến đâu thực hành đến đó;
• ưu tiên nắm chắc phần cơ bản trước khi học các tính năng nâng cao;
• tập trung vào tính rõ ràng, logic và khả năng tái sử dụng trong thiết kế;
• không chỉ biết thao tác mà cần hiểu khi nào nên dùng từng tính năng.

Việc học Figma cần đi theo lộ trình từ dễ đến khó, từ dựng màn hình đơn lẻ đến tổ chức thành bộ màn hình có tính nhất quán.

2.3. Học các phần cơ bản của Figma

2.3.1. Làm quen với giao diện làm việc của Figma

Thực tập sinh cần làm quen với các thành phần chính trong Figma, bao gồm:

• khu vực canvas;
• thanh công cụ;
• panel bên trái để quản lý page, layer và cấu trúc file;
• panel bên phải để chỉnh thuộc tính của đối tượng;
• chế độ thiết kế, prototype và inspect nếu có sử dụng.

Mục tiêu cần đạt:

• hiểu được bố cục giao diện của Figma;
• biết vị trí các khu vực thao tác chính;
• không bị lúng túng khi mở, chỉnh sửa và quản lý file thiết kế.

2.3.2. Học cách tạo và tổ chức file

Thực tập sinh cần học:

• tạo file mới;
• tạo page;
• đặt tên page;
• tạo frame;
• phân biệt frame, section và group;
• tổ chức màn hình theo page và theo luồng nghiệp vụ.

Mục tiêu cần đạt:

• tạo được file thiết kế có cấu trúc rõ ràng;
• biết phân nhóm các màn hình thay vì để toàn bộ nội dung lộn xộn trên cùng một khu vực;
• biết đặt tên các page và frame sao cho dễ đọc, dễ review.

2.3.3. Học các thao tác vẽ và chỉnh sửa cơ bản

Thực tập sinh cần học các thao tác nền tảng như:

• tạo shape cơ bản;
• tạo text;
• chèn line, rectangle, icon, image nếu cần;
• di chuyển, sao chép, nhân bản đối tượng;
• group và ungroup;
• chỉnh kích thước, màu sắc, bo góc, viền;
• căn chỉnh trái, phải, giữa, trên, dưới;
• căn khoảng cách đều giữa các phần tử.

Mục tiêu cần đạt:

• dựng được một màn hình tĩnh cơ bản;
• biết sử dụng các công cụ đơn giản để thể hiện form, bảng, popup, button và các vùng nội dung;
• biết căn chỉnh để giao diện không bị lệch, rối hoặc thiếu nhất quán.

2.3.4. Học quản lý layer và đối tượng

Thực tập sinh cần học:

• layer là gì;
• thứ tự chồng lớp;
• đổi tên layer;
• ẩn/hiện layer;
• khóa layer;
• chọn đúng đối tượng trong trường hợp nhiều lớp chồng lên nhau.

Mục tiêu cần đạt:

• biết quản lý đối tượng trong file;
• tránh tình trạng file rối, khó sửa, khó review;
• tạo thói quen đặt tên rõ ràng cho những đối tượng quan trọng.

2.3.5. Học cách chia sẻ và comment trên Figma

Thực tập sinh cần học:

• share file;
• cấp quyền xem hoặc chỉnh sửa;
• comment trên màn hình;
• phản hồi comment;
• export ảnh hoặc file ở mức cơ bản.

Mục tiêu cần đạt:

• biết sử dụng Figma như công cụ trao đổi nội bộ;
• biết comment đúng vị trí, đúng nội dung;
• hỗ trợ quá trình review thuận tiện hơn.

2.4. Học dựng các thành phần giao diện cơ bản bằng Figma

Sau khi nắm được thao tác cơ bản, thực tập sinh cần học cách dựng các thành phần thường gặp trên màn hình phần mềm nghiệp vụ, bao gồm:

• button;
• input;
• textarea;
• combobox/select;
• checkbox;
• radio button;
• date field;
• tab;
• table cơ bản;
• thẻ trạng thái;
• popup;
• thông báo.

Mục tiêu cần đạt:

• biết sử dụng Figma để dựng ra những thành phần phục vụ trực tiếp cho công việc BA;
• không chỉ biết thao tác rời rạc mà biết ghép các đối tượng thành thành phần giao diện có ý nghĩa;
• có nền tảng để thiết kế các màn hình danh sách, thêm mới, chỉnh sửa, chi tiết và popup.

2.5. Học Auto Layout

2.5.1. Khái niệm Auto Layout

Auto Layout là tính năng cho phép sắp xếp các đối tượng theo hàng hoặc cột, đồng thời kiểm soát khoảng cách, padding và khả năng co giãn của phần tử. Đây là một tính năng rất quan trọng trong Figma vì giúp thiết kế có cấu trúc ổn định, dễ sửa và nhất quán hơn.

Đối với intern BA, Auto Layout không chỉ là nội dung nâng cao mà là tính năng cần được học tương đối sớm sau phần cơ bản.

2.5.2. Nội dung cần học về Auto Layout

Thực tập sinh cần học:

• cách áp dụng Auto Layout cho một khối đối tượng;
• chiều sắp xếp dọc và ngang;
• khoảng cách giữa các phần tử;
• padding trong một khối;
• cách canh lề trong Auto Layout;
• sự khác nhau giữa căn chỉnh thủ công và dùng Auto Layout;
• co giãn kích thước theo nội dung hoặc theo container;
• cách dùng Auto Layout cho button, form row, nhóm nút, popup, card và danh sách đơn giản.

2.5.3. Mục tiêu cần đạt đối với Auto Layout

Sau khi học xong Auto Layout, thực tập sinh cần:

• biết khi nào nên dùng Auto Layout;
• tạo được button và nhóm button bằng Auto Layout;
• tạo được form đơn giản có căn chỉnh đều;
• tạo được popup có bố cục ổn định;
• giảm phụ thuộc vào căn chỉnh thủ công;
• biết sửa một khối giao diện mà không bị vỡ bố cục.

2.5.4. Ý nghĩa của Auto Layout trong công việc BA

Việc học Auto Layout giúp thực tập sinh:

• thiết kế nhanh hơn;
• chỉnh sửa ít lỗi hơn;
• giữ tính nhất quán giữa các màn hình;
• thuận tiện hơn khi một màn hình có nhiều phần tử lặp lại hoặc thay đổi nội dung.

2.6. Học Component

2.6.1. Khái niệm Component

Component là thành phần giao diện có thể tái sử dụng nhiều lần trong file thiết kế, ví dụ như button, input, popup, tag trạng thái hoặc item trong danh sách. Khi dùng Component, người thiết kế có thể tạo một phiên bản chuẩn và dùng lại ở nhiều nơi, giúp giao diện đồng bộ và dễ chỉnh sửa hơn.

2.6.2. Nội dung cần học về Component

Thực tập sinh cần học:

• component là gì;
• tạo component từ một đối tượng;
• tạo instance từ component;
• phân biệt component gốc và instance;
• chỉnh sửa component gốc và ảnh hưởng đến các instance;
• override nội dung ở instance;
• tổ chức component trong file;
• áp dụng component vào các thành phần hay dùng.

2.6.3. Những component cơ bản intern BA cần biết tạo

Thực tập sinh cần tập trung vào các component đơn giản và thiết thực như:

• button;
• input field;
• select field;
• textarea;
• checkbox;
• radio;
• tag trạng thái;
• modal/popup;
• table header;
• item card hoặc khối thông tin đơn giản.

2.6.4. Mục tiêu cần đạt đối với Component

Sau khi học xong Component, thực tập sinh cần:

• biết tạo và sử dụng component cơ bản;
• biết tái sử dụng thành phần thay vì vẽ lại nhiều lần;
• biết chỉnh sửa giao diện đồng bộ hơn;
• bước đầu hình thành tư duy chuẩn hóa thiết kế.

2.6.5. Ý nghĩa của Component trong công việc BA

Component giúp:

• tiết kiệm thời gian dựng màn hình;
• tăng tính nhất quán;
• dễ thay đổi khi yêu cầu chỉnh sửa;
• thuận lợi cho việc chuẩn hóa bộ màn hình trong nội bộ công ty.

2.7. Học Variant

2.7.1. Khái niệm Variant

Variant là cách tổ chức nhiều trạng thái hoặc nhiều phiên bản khác nhau của cùng một component trong một nhóm thống nhất. Ví dụ, một button có thể có các trạng thái mặc định, hover, disabled; hoặc một tag trạng thái có thể có các loại chờ duyệt, đã duyệt, từ chối.

Đối với intern BA, Variant là nội dung nâng cao hơn so với Component, nhưng rất cần học ở mức cơ bản để quản lý các trạng thái giao diện rõ ràng hơn.

2.7.2. Nội dung cần học về Variant

Thực tập sinh cần học:

• variant là gì;
• tạo nhiều biến thể cho một component;
• nhóm các biến thể vào một component set;
• đặt tên thuộc tính cho variant;
• sử dụng variant để thể hiện trạng thái khác nhau;
• áp dụng variant cho button, input, tag trạng thái, tab, checkbox hoặc popup đơn giản.

2.7.3. Ví dụ các trường hợp nên dùng Variant

Thực tập sinh cần biết dùng variant cho các trường hợp như:

• button: mặc định, hover, disabled;
• input: bình thường, focus, lỗi, readonly;
• tag trạng thái: khởi tạo, chờ duyệt, phê duyệt, từ chối;
• tab: đang chọn, chưa chọn;
• checkbox: checked, unchecked, disabled.

2.7.4. Mục tiêu cần đạt đối với Variant

Sau khi học xong Variant, thực tập sinh cần:

• hiểu được lợi ích của việc gom nhiều trạng thái vào một nhóm component;
• biết tạo các biến thể đơn giản;
• biết dùng variant để mô tả trạng thái màn hình rõ hơn;
• tránh việc tạo quá nhiều component rời rạc, khó quản lý.

2.7.5. Ý nghĩa của Variant trong công việc BA

Variant giúp thực tập sinh:

• mô tả rõ các trạng thái của giao diện;
• quản lý file tốt hơn;
• dễ trình bày các trường hợp nghiệp vụ khác nhau;
• thuận tiện hơn khi trao đổi với dev và tester về trạng thái hiển thị.

2.8. Học các nội dung nâng cao khác ở mức cần thiết

Ngoài Auto Layout, Component và Variant, thực tập sinh có thể tiếp cận thêm một số nội dung khác của Figma ở mức phù hợp, bao gồm:

• styles cơ bản cho màu sắc và text;
• prototype ở mức mô phỏng luồng đơn giản;
• thư viện dùng chung trong nội bộ;
• cách duplicate page để làm nhiều phương án;
• cách dùng plugin ở mức an toàn và hợp lý.

Mục tiêu cần đạt:

• hiểu thêm các công cụ hỗ trợ cho việc thiết kế và review;
• không lạm dụng tính năng nâng cao khi chưa nắm chắc phần cơ bản;
• biết chọn công cụ phù hợp với mục đích công việc BA.

2.9. Lộ trình học Figma đề xuất cho intern BA

Để tránh học rời rạc, thực tập sinh nên học theo thứ tự sau:

Giai đoạn 1. Làm quen công cụ

• giao diện Figma;
• file, page, frame;
• shape, text, line;
• căn chỉnh và chỉnh sửa cơ bản;
• layer;
• share và comment.

Giai đoạn 2. Dựng giao diện cơ bản

• button, input, textarea, checkbox, radio;
• popup;
• bảng dữ liệu đơn giản;
• form cơ bản;
• màn hình danh sách và chi tiết đơn giản.

Giai đoạn 3. Học Auto Layout

• padding, spacing;
• bố trí dọc/ngang;
• nhóm button;
• form row;
• popup và card đơn giản.

Giai đoạn 4. Học Component

• tạo component;
• instance;
• tái sử dụng thành phần;
• chỉnh sửa đồng bộ.

Giai đoạn 5. Học Variant

• tạo các trạng thái của button;
• trạng thái input;
• trạng thái tag;
• nhóm component set.

Giai đoạn 6. Áp dụng tổng hợp

• dựng một bộ màn hình hoàn chỉnh;
• dùng Auto Layout cho các khối chính;
• dùng Component cho thành phần lặp lại;
• dùng Variant cho các trạng thái cần thiết.

2.10. Mức độ cần đạt sau khi học Chương 2

Sau khi hoàn thành nội dung của chương này, thực tập sinh cần đạt được các mức sau:

Mức cơ bản

• sử dụng được các thao tác chính của Figma;
• tạo được file, page, frame;
• dựng được màn hình đơn giản;
• biết căn chỉnh và tổ chức đối tượng.

Mức khá

• dựng được các thành phần giao diện thường gặp;
• biết dùng Auto Layout cho các nhóm nội dung cơ bản;
• biết tạo và sử dụng Component.

Mức tốt

• biết dùng Variant để quản lý trạng thái đơn giản;
• biết tổ chức file thiết kế logic, rõ ràng;
• biết áp dụng Figma để dựng bộ màn hình có tính nhất quán và dễ chỉnh sửa.

2.11. Yêu cầu tự học trong quá trình học Figma

Thực tập sinh không chỉ đọc tài liệu mà cần chủ động:

• tự thao tác lại từng tính năng;
• tự dựng lại các ví dụ mẫu;
• thử nhiều cách bố trí khác nhau;
• sửa lại màn hình cũ bằng Auto Layout;
• chuyển các đối tượng lặp lại thành Component;
• tạo Variant cho các trạng thái phổ biến;
• xin review và chỉnh sửa nhiều vòng.