Hi mọi người, mình chia sẻ tới mọi người tài liệu sử dụng Figma cho người mới bắt đầu. Mình ứng dụng những bài học cơ bản trên Figma vào thiết kế, quản lý và sử dụng IconButton để các bạn có thể hiểu hơn về các công cụ trên Figma. Mình chọn IconButton để hướng dẫn sử dụng Figma vì đây là hai đối tượng được sử dụng rất nhiều trong quá trình thiết kế UIUX đồng thời hai đối tượng này cần sử dụng linh hoạt gần như tất cả các công cụ thiết kế trên Figma nên có thể giúp các bạn luyện tập hiệu quả hơn. Nếu các bạn muốn mình chia sẻ thêm về thiết kế UIUX và nói nhiều hơn về Figma hoặc các công cụ thiết kế khác thì hãy ủng hộ mình nha Camsamitaaa~
TÀI LIỆU THIẾT KẾ, QUẢN LÝ VÀ SỬ DỤNG ICON/BUTTON TRONG QUÁ TRÌNH THIẾT KẾ UI/UX TRÊN FIGMA CHO NGƯỜI MỚI BẮT ĐẦU MỤC LỤC Tổng quan tài liệu .3 1.1 Thông tin chung 1.1.1 Mục đích 1.1.2 Đối tượng sử dụng 1.1.3 Phạm vi .3 1.1.4 Cấu trúc tài liệu 1.2 Các khái niệm 1.2.1 Icon 1.2.2 Button .5 1.2.3 Công cụ thiết kế FIGMA Thiết kế Icon/Button 2.1 Các công cụ Figma hỗ trợ để thiết kế .8 2.1.1 Các công cụ thiết kế .8 2.1.2 Các công cụ hỗ trợ 15 2.1.3 Các công cụ thiết kế mở rộng 19 2.2 Thiết kế Icon Figma .22 2.2.1 Giới thiệu Icon template – Cơng cụ giúp người thiết kế thiết kế Icon hiệu 22 2.2.2 Các bước thiết kế Icon Figma 26 2.2.3 Một số trường hợp thiết kế chi tiết Icon đặc biệt phổ biến 28 2.2.4 Một số lưu ý thiết kế Icon .31 2.3 Thiết kế Button Figma 33 2.3.1 Các thành phần trạng thái Button 33 2.3.2 Cách thiết kế Button 33 Quản lý sử dụng Icon/Button figma 35 3.1 Tổ chức, Sắp xếp lưu trữ Icon/Button Figma 35 3.1.1 Công cụ sử dụng để tổ chức, xếp lưu trữ Icon/Button Figma 35 3.1.2 Tổ chức Icon 37 3.1.3 Sắp xếp lưu trữ Icon/Button .38 / 42 3.2 Tối ưu tái sử dụng Icon/Button Figma 39 3.3 Đồng Icon dạng Vector đưa vào Figma từ nguồn bên 40 Tài liệu tham khảo 41 / 42 TỔNG QUAN VỀ TÀI LIỆU 1.1 THÔNG TIN CHUNG 1.1.1 Mục đích - Chung: Nắm sơ lược công cụ thiết kế giao diện Figma Nắm định dạng ảnh Vector, công dụng định dạng ảnh Vector - Thiết kế: Có thể chủ động thiết kế Icon dạng vector để hạn chế phụ thuộc vào nguồn Icon có sẵn Có thể tùy biến thiết kế Icon theo ý tưởng - Tối ưu thiết kế Button Quản lý: Có thể quản lý Icon/Button hiệu để dễ dàng tìm kiếm, sử dụng Quản lý để tối ưu tái sử dụng Icon/Button Đồng Icon Import từ nguồn khác quản lý Figma - Sử dụng: Sử dụng Icon Button làm thành phần thiết kế giao diện cách tối ưu dựa việc quản lý có khoa học 1.1.2 Đối tượng sử dụng - Đối tượng sử dụng tài liệu: Người muốn học Figma bản, tập ứng dụng vào việc thiết kế quản lý Icon/Button trình thiết kế UI/UX 1.1.3 Phạm vi - Phạm vi nội dung tài liệu: Đối tượng thiết kế: Icon, Button dạng nút bấm Tài liệu tập trung vào việc vẽ Icon/Button, không đề cập sâu phần màu sắc - Phạm vi sử dụng công cụ thiết kế: Cơng cụ thiết kế đồng thời để quản lý sử dụng trực tiếp Icon/Button: Figma / 42 1.1.4 Cấu trúc tài liệu Tài liệu thực với phần lớn: - Phần 1: Tổng quan tài liệu Giới thiệu chung mục đích, đối tượng sử dụng tài liệu, phạm vi cấu trúc tài liệu Đưa khái niệm cho đối tượng xuất tài liệu - Phần 2: Thiết kế Icon/Button Giới thiệu thành phần thiết kế Figma hỗ trợ thiết kế Icon/Button Đi vào chi tiết cách thiết kế Icon/Button Figma - Phần 3: Quản lý sử dụng Icon/Button Khai thác công cụ Figma hỗ trợ để xếp lưu trữ Icon/Button hiêu Cách quản lý để tối ưu tái sử dụng Icon/Button 1.2 CÁC KHÁI NIỆM 1.2.1 Icon - Khái niệm: Là tập hợp chi tiết, hình vẽ ghép với tạo thành biểu tượng giúp cho người nhìn vào liên tưởng tới hành động/một kiện/công việc/thông tin v.v… - Phân loại: Dựa vào tính chất minh họa Icon mà phân thành loại Icon khơng giống với hình dạng thực tế lại sử dụng thói quen người dùng: Icon mơ lại theo hình ảnh thực tế như: - Công dụng Icon: / 42 Nhìn chung Icon có mục đích đem lại cho người dùng nhìn trực quan đối tượng mà Icon muốn trỏ tới Minh họa cho hành động/sự kiện/công việc/thông tin v.v… Làm cho người nhìn vào dễ dàng liên tưởng tới hành động/sự kiện/cơng việc/thông tin v.v… mà người sử dụng Icon muốn truyền tải 1.2.2 Button - Khái niệm: Button hay gọi “Nút chức năng/Nút điều hướng”, thành phần thường xuyên sử dụng thiết kế UI - Vai trò: Hỗ trợ người dùng tương tác trải nghiệm ứng dụng/website cách dễ dàng - Phân loại: Dựa hình thái thể Button, chia Button thành dạng Dạng 1: Button dạng nút bấm chức năng/điều hướng – Đây dạng Button phổ biến thiết kế UI/UX Thông thường, Button dạng bao gồm thành phần khung, text Icon, thành phần kết hợp với đứng riêng lẻ Button dạng thơng thường có trạng thái như: Default, hover, Enable, On Click Một số ví dụ Button dạng nút bấm chức năng/điều hướng sau: Dạng 2: Button dạng mở rộng (Expanding Button) Đây Button dạng động luôn phải kèm trạng thái: Thu gọn mở rộng nên thiết kế, người thiết kế cần phải thiết kế đồng thời trạng thái trên, ngồi thiết kế trạng thái khác Button người dùng thao tác Button dạng Ví dụ: / 42 Dạng 3: Button dạng công tắc (Toggle Button), Button dạng động, thông thường Button sử dụng với mục đích bật/tắt chức chương trình Ví dụ như: - Với phạm vi tài liệu này, tài liệu hướng dẫn thiết kế quản lý Button dạng 1: Button dạng nút bấm chức năng/điều hướng Các Button dạng thực chất biến thể Button dạng 1, khác chút chúng luôn có trạng thái để thể tính động Tài liệu dù nói đến thiết kế Button dạng từ suy cách thiết kế quản lý dạng Button cịn lại 1.2.3 Cơng cụ thiết kế FIGMA - FIGMA công cụ thiết kế Vector ứng dụng nhiều việc thiết kế UI/UX - Nền tảng sử dụng: Website, Appication Desktop, Mobile App - Hệ điều hành hỗ trợ Application Dekstop: Window MACOS Linux / 42 - Ưu điểm bật: Có thể làm việc đội nhóm Figma phét triển dựa điện toán đám mây phát triển mạnh việc hỗ trợ người dùng hoạt động đối nhóm như: Tạo Project gán người tham gia vào project, hiển thị trỏ chuột người thao tác file, có phần comment trực tiếp FIGMA Là cơng cụ có phiên miễn phí, phù hợp cho người muốn tiếp cận cơng cụ thiết kế để học tập, luyện tập trước định mua phiên cao cho công việc Có cộng đồng thiết kế, giúp người dùng tham khảo ý tưởng thiết kế từ nhiều nguồn khác cộng đồng Kho plugin (chương trình mở rộng) đa dạng Tích hợp prototyping giúp hiển thị giao diện mẫu phần mềm - Nhược điểm FIGMA: Với WEB, phải phụ thuộc vào chất lượng internet, internet bị gián đoạn làm công việc thiết kế gián đoạn theo server FIGMA gặp vấn đề làm ảnh hưởng tới việc thiết kế Với miễn phí có nhiều hạn chế như: Một file thiết kế tạo page thiết kế, xem lịch sử file 30 ngày gần Chỉ chạy hệ thống có RAM 4G trở lên / 42 THIẾT KẾ ICON/BUTTON 2.1 - CÁC CÔNG CỤ FIGMA HỖ TRỢ ĐỂ THIẾT KẾ Figma cung cấp cho người thiết kế nhiều công cụ để thiết kế, với phạm vi tài liệu này, công cụ sử dụng trình bày 2.1.1 Các công cụ thiết kế FIGMA cung cấp cho người dùng công cụ thiết kế phần mềm thiết kế Vector Move Tools, Region Tools, Shape Tools, Drawing Tools, Text Chi tiết trình bày 2.1.1.1 - Move Tools Ý nghĩa: Move Tools công cụ giúp chọn, di chuyển, phóng to/thu nhỏ, xoay thành phần thiết kế FIGMA - Các công cụ Move Tools: Move, Scale - Move (Phím tắt để gọi Move: V): Là cơng cụ giúp chọn/di chuyển/phóng to thu nhỏ thành phần cách tự Người dùng phóng to/thu nhỏ thành phần có hệ thống Move qua việc kéo chuột đồng thời nhấn phím Shift bàn phím - Scale (Phím tắt đề gọi Scale: K): Là công cụ giúp người dùng phóng to/thu nhỏ đối tượng thiết kế có hệ thống, đồng thời thông số chi tiết đối tượng thay đổi theo trình phóng to/thu nhỏ / 42 - So sánh Move Scale: STT Chức tương tự Chức khác - Có thể chọn, xoay, thu Move: phóng đối tượng + Thu/phóng đối tượng theo kích thước tự do, muốn thu phóng theo hệ thống cần đồng thời nhấn thêm phím Shift bàn phím + Không làm thay đổi thông số đối tượng thu phóng (nếu đối tượng khơng dùng chức outline stroke) Scale: + Thu/phóng đối tượng có hệ thống + Làm thay đổi thông số đối tượng thu phóng tùy theo tỉ lệ thu phóng 2.1.1.2 - Region Tools Ý nghĩa: Là nhóm cơng cụ giúp khoanh vùng khu vực cho đối tượng ví dụ khoanh vùng thiết kế (Frame), khoanh vùng cần cắt để Export (Slice), tạo vùng làm việc (Section) - Các cơng cụ nhóm Region Tools: Frame, Slice, Section / 42