vieclamhochiminh hân hoan chào đón quý cô chú anh chị Thành Phố Hồ Chí Minh cùng đến cẩm nang tuyển dụng của chúng tôi, Học Figma là một lựa chọn sáng suốt để thiết kế UI/UX và cộng tác. Dưới đây là một lộ trình chi tiết để bạn học Figma và cách tận dụng nó để viết mô tả chi tiết cho thiết kế của mình:
I. Học Figma:
1. Nắm vững các khái niệm cơ bản:
Giao diện Figma:
Làm quen với các phần chính của giao diện, bao gồm thanh công cụ, bảng Layers, bảng Properties, Canvas, thanh tìm kiếm và thanh trạng thái.
Hình dạng và vector:
Học cách tạo và chỉnh sửa các hình dạng cơ bản (hình chữ nhật, hình tròn, đường thẳng, đa giác) và làm việc với vector path.
Text:
Học cách thêm, định dạng và tùy chỉnh văn bản. Tìm hiểu về các thuộc tính như font chữ, kích thước, độ đậm, khoảng cách dòng, và căn chỉnh.
Màu sắc và gradients:
Học cách chọn màu, tạo gradients và áp dụng chúng cho các đối tượng.
Layers:
Hiểu rõ cách quản lý các layer, nhóm layer, đổi tên layer và sắp xếp chúng theo thứ tự.
Constraints:
Tìm hiểu cách sử dụng constraints để đảm bảo các đối tượng tự động điều chỉnh kích thước và vị trí khi thay đổi kích thước của frame.
Auto Layout:
Nắm vững cách sử dụng Auto Layout để tạo các bố cục responsive, tự động điều chỉnh kích thước và khoảng cách giữa các thành phần.
Components và Instances:
Tìm hiểu cách tạo components để tái sử dụng các thành phần UI và tạo instances để sử dụng các component đã tạo.
Styles (Text Styles, Color Styles, Effect Styles, Grid Styles):
Học cách tạo và sử dụng styles để đảm bảo tính nhất quán trong thiết kế.
Assets:
Tìm hiểu cách quản lý và sử dụng assets (hình ảnh, biểu tượng,…) trong Figma.
Prototyping:
Học cách tạo prototype để mô phỏng luồng tương tác của ứng dụng hoặc website.
Tài nguyên học tập:
Figma Learn:
Khóa học chính thức của Figma (hoàn toàn miễn phí và rất hữu ích): [https://www.figma.com/learn/](https://www.figma.com/learn/)
YouTube:
Figmas Official Channel: [https://www.youtube.com/@Figma](https://www.youtube.com/@Figma) (Các video hướng dẫn chính thức)
DesignCourse: [https://www.youtube.com/@DesignCourse](https://www.youtube.com/@DesignCourse) (Kênh học thiết kế tổng quan, có nhiều video về Figma)
Flux: [https://www.youtube.com/@FluxWithRanSegall](https://www.youtube.com/@FluxWithRanSegall) (Kênh chuyên về thiết kế UI/UX, có nhiều tips hay về Figma)
Blog Figma:
[https://www.figma.com/blog/](https://www.figma.com/blog/) (Bài viết, case studies, và cập nhật về Figma)
Figma Community:
[https://www.figma.com/community](https://www.figma.com/community) (Nguồn tài nguyên vô tận, bao gồm các file thiết kế mẫu, plugin, và tiện ích mở rộng)
UI Kits:
Tìm kiếm và sử dụng các UI kit miễn phí hoặc trả phí để học hỏi và tăng tốc quá trình thiết kế. Ví dụ: Material Design UI Kit, iOS UI Kit.
2. Thực hành:
Bắt đầu với các dự án nhỏ:
Thiết kế lại một trang web hoặc ứng dụng hiện có.
Tham gia các thử thách thiết kế:
Tham gia các thử thách thiết kế UI hàng ngày hoặc hàng tuần để rèn luyện kỹ năng.
Tạo các dự án cá nhân:
Thiết kế một ứng dụng hoặc website theo ý tưởng của riêng bạn.
Sao chép thiết kế:
Tìm kiếm các thiết kế đẹp trên Dribbble hoặc Behance và cố gắng tái tạo chúng trong Figma.
3. Tìm hiểu các tính năng nâng cao:
Variables:
Tìm hiểu cách sử dụng Variables để quản lý các giá trị thay đổi trong thiết kế (ví dụ: màu sắc, kích thước, khoảng cách).
Advanced Prototyping:
Khám phá các tính năng nâng cao của Prototyping, như biến, conditional logic, và expressions.
Plugins:
Cài đặt và sử dụng các plugin để mở rộng chức năng của Figma. Ví dụ: Unsplash (chèn ảnh miễn phí), Iconify (chèn icon), Anima (tạo animation).
II. Cộng tác và Viết Mô tả Chi Tiết:
Figma là một công cụ tuyệt vời để cộng tác và viết mô tả chi tiết cho thiết kế. Dưới đây là cách tận dụng nó:
1. Cộng tác:
Chia sẻ file:
Chia sẻ file Figma với đồng nghiệp hoặc khách hàng bằng cách cấp quyền truy cập (View, Edit).
Comment:
Sử dụng tính năng comment để thu thập phản hồi và thảo luận về thiết kế trực tiếp trên file Figma. Gắn thẻ (@) để thông báo cho những người liên quan.
Multiplayer editing:
Làm việc cùng lúc với nhiều người trên cùng một file Figma.
Version History:
Figma tự động lưu lại lịch sử các phiên bản của file, giúp bạn dễ dàng quay lại các phiên bản trước đó nếu cần.
2. Viết Mô tả Chi Tiết:
Component Descriptions:
Thêm mô tả chi tiết cho từng component để giải thích mục đích, cách sử dụng và các thuộc tính của component đó. Điều này đặc biệt quan trọng khi xây dựng Design System.
Page/Frame Notes:
Sử dụng chức năng “Notes” cho từng page hoặc frame để cung cấp thông tin tổng quan về trang/frame đó, ví dụ: mục đích của trang, luồng người dùng, các yêu cầu đặc biệt.
Naming Conventions:
Áp dụng một quy tắc đặt tên nhất quán cho các layer, component, và style. Điều này giúp cho việc tìm kiếm và hiểu cấu trúc của file dễ dàng hơn. Ví dụ: `Button/Primary/Default`, `Text/H1`, `Color/Primary`.
Design Specifications (Specs):
Figma cho phép bạn tạo các thông số kỹ thuật (specs) cho thiết kế, bao gồm kích thước, màu sắc, font chữ, khoảng cách, và các thuộc tính khác. Điều này giúp cho các nhà phát triển hiểu rõ hơn về thiết kế và triển khai nó một cách chính xác.
Sử dụng plugin như “Zeplin” hoặc “Avocode” để tạo các specs chi tiết và dễ dàng chia sẻ với các nhà phát triển. Tuy nhiên, Figma cũng có khả năng tạo các specs cơ bản trực tiếp trong file.
User Flows:
Sử dụng prototype để mô phỏng luồng người dùng và ghi lại các bước tương tác. Thêm mô tả cho từng bước để giải thích hành động của người dùng và kết quả mong muốn.
Accessibility Annotations:
Thêm các ghi chú về khả năng truy cập (accessibility) để đảm bảo thiết kế của bạn thân thiện với người khuyết tật. Ví dụ: chú thích về contrast ratio, alt text cho hình ảnh, và sử dụng ARIA attributes.
Mẫu Mô Tả Chi Tiết (Ví dụ cho một nút bấm):
“`
Component Name:
Button/Primary/Default
Description:
Nút bấm chính để thực hiện hành động quan trọng nhất trên trang.
Purpose:
Kêu gọi hành động chính của người dùng.
States:
Default:
Trạng thái mặc định của nút.
Hover:
Trạng thái khi người dùng di chuột vào nút.
Pressed:
Trạng thái khi người dùng nhấn vào nút.
Disabled:
Trạng thái khi nút không thể tương tác.
Properties:
Text:
Văn bản hiển thị trên nút.
Icon (Optional):
Biểu tượng hiển thị bên cạnh văn bản.
Size:
Kích thước của nút (Small, Medium, Large).
Style:
Background Color:
007BFF (Primary Blue)
Text Color:
FFFFFF (White)
Font:
Roboto, 16px, Bold
Border Radius:
4px
Padding:
12px 24px
Interaction:
Khi được nhấn, nút sẽ thực hiện hành động được chỉ định.
Accessibility:
Contrast Ratio: 4.5:1 (Đáp ứng WCAG AA)
Focus State: Viền rõ ràng khi nút được focus.
Notes:
Đảm bảo văn bản trên nút ngắn gọn và dễ hiểu.
Sử dụng nút này cho các hành động quan trọng nhất trên trang.
“`
Lời Khuyên:
Sử dụng các plugin:
Có rất nhiều plugin Figma hỗ trợ bạn trong việc viết mô tả chi tiết và tạo documentation.
Tạo một template:
Tạo một template cho các component và trang để đảm bảo tính nhất quán trong việc viết mô tả.
Đừng ngại sử dụng emojis:
Emojis có thể giúp làm cho các mô tả trở nên dễ đọc và thú vị hơn.
Luôn cập nhật mô tả:
Đảm bảo rằng mô tả luôn phản ánh chính xác thiết kế hiện tại.
Giao tiếp rõ ràng:
Sử dụng ngôn ngữ rõ ràng và dễ hiểu để mọi người trong nhóm đều có thể hiểu được.
Bằng cách kết hợp kiến thức Figma với kỹ năng viết mô tả chi tiết và tận dụng các tính năng cộng tác, bạn sẽ tạo ra những thiết kế UI/UX chất lượng cao và dễ dàng triển khai. Chúc bạn thành công!