Khóa học Figma UI Design

• Giới thiệu lộ trình học
• Giới thiệu các sách về sáng tạo và UI/UX
• Khái niệm về UI và UX
• Công việc thiết kế UI Design
• Các nguồn tham khảo tin cậy về UI/UX
• Định luật Jacob và sự quen thuộc trong thiết kế UI/UX
• Vai trò của Figma trong dự án thực tế
• Đăng ký Figma Education Plan
• Figjam
• Community của Figma
• Thực hành
• Đề tài cá nhân

• Phương pháp Squint test
• Hướng dẫn vẽ viên kim cương bằng Vector network.
• Plugin: Color Scheme
• Vẽ icon new document.
• Ứng dụng Component vẽ huy hiệu
• Mask
• Plugin Figmotion
• Hướng dẫn vẽ và diễn hoạt mẫu switcher
• Bài tập

• Thực hành vẽ nâng cao
• Hướng dẫn ứng dụng component vẽ viên gạch
• Hướng dẫn vẽ căn phòng isometric
• Plugin Easometric
• Bài tập

• Cách tìm cảm hứng màu sắc
• Hướng dẫn tạo hệ thống màu
• Plugin Color Scheme
• Tạo theo mẫu của Material Design
• Tạo hệ thống chữ cho đề tài cá nhân
• Plugin Styler
• Thực hành generate, extract style
• Bài tập

• Hướng dẫn tạo grid
• Constraint
• 8-point grid
• Hướng dẫn tạo hệ thống Icon
• Hướng dẫn tạo hệ thống Button
• Hướng dẫn vẽ mẫu Modal
• Bài tập

• Hướng dẫn variant component Text field
• Hướng dẫn vẽ UI trang Login
• Bài tập

• Hướng dẫn vẽ giao diện trang Contact
• Hướng dẫn tạo prototype

• Hướng dẫn vẽ UI App nhắn tin

• Hướng dẫn vẽ UI App nhắn tin (Cont)
• Responsive cho tablet và mobile
• Tạo prototype
• Hướng dẫn vẽ UI mạng xã hội
• Ứng dụng đối tượng chứa hình giữ đúng tỉ lệ

• Hướng dẫn vẽ giao diện app thương mại điện tử
• Hướng dẫn tạo component chip chọn thuộc tính sản phẩm
• Hướng dẫn tạo component nhãn răng cưa chọn mã giảm giá
• Hướng dẫn tạo component stepper
• Hướng dẫn tạo component milestone giao hàng

• Hướng dẫn vẽ giao diện CMS quản lý sản phẩm
• Hướng dẫn tạo component cấu trúc dòng của bảng
• Bài tập

• Thực hành tạo Prototype Splash screen
• Các kiểu chuyển động nhanh chậm dần
• Ứng dụng After Delay
• Carousel
• Ứng dụng Interactive component
• Ứng dụng After Delay, Drag to, Scroll to
• Giao diện app bản đồ
• Plugin Mapsicle
• Ứng dụng Scroll to

• Hiểu về độ phân giải
• Các định dạng file svg, png, jpeg, pdf
• Hướng dẫn quy hoạch, đặt tên, sắp xếp, ghi chú cho các thành phần trong file thiết kế.
• Hướng dẫn xuất PDF nhiều trang
• Hướng dẫn tạo webfont bằng icomoon

• Trình bày đồ án
• Tổng kết khóa học
• Chia sẻ hướng đi, apply Job, Freelancer

• Tổng quan về Figma, vai trò của Figma trong công việc thực tế.
• Quy trình làm việc của 1 công ty Product.
• Quy trình từ A-Z để tạo dựng 1 bản thiết kế UI/UX
• Hướng dẫn Cài đặt Figma và Figma Mirror
• Cách tạo tài khoản, tạo file, cấp quyền, chia sẻ, comment.
• Plugin và các tool hỗ trợ công việc nhanh hơn
• Các hướng để nghiên cứu nghiệp vụ, tính năng, UX

Thực hành tại lớp.

• Phân biệt: fixed, fluid, adaptive, responsive
• Layers vs. Page.
• Frame vs. Group.
• Các tính năng chuyên sâu của Frame.
• Giới thiệu Auto layout
  
  

Thực hành tại lớp

• Components
• Auto layout (Cont)
• Atomic Design
• Variants & Properties
• Lý thuyết về vector nói chung và vector network của Figma. Sự tiện lợi của vector network trong Figma so với Adobe Illustrator.
• Cách tạo các mẫu element quen thuộc.
• Giới thiệu một số chuẩn Design Google Material, Human Design Guideline.

Thực hành tại lớp

• Hệ thống style là gì (Design System)
• Text & các Plugin: Find and replace, Lorem Ipsum, Text .
• Color, Effects, Layout Grid & hệ kích thước bội số của 8 khi thiết kế.
• Làm việc với Asset và Team Library.
• Mẹo giữ ratio của image khi thay đổi kích thước screen. Các tính năng của Image.
• Raterize

Thực hành tại lớp

• Thực hành nâng cao kết hợp kiến thức 4 buổi đầu.
• Hỗ trợ, giải đáp thắc mắc.

• Tất tần tật về các thao tác tạo prototype trong Figma (Interactive, Interactive component, Animation).
• Hướng dẫn kết nối, diễn hoạt để tạo ra prototype & trình diễn trực quan thiết kế.
• Bonus: Sử dụng Tool Overflow để trình diễn.

Thực hành tại lớp

• Cách đặt tên, sắp xếp, ghi chú cho các thành phần trong file thiết kế.
• Đặc tính của các định dạng file svg, png, jpeg, pdf… khi export.
• Lưu ý về kích thước file khi export.
• Cách tạo Webfont cho Icon bằng Iconmoon.
• Hướng dẫn Slice tool.
• Hướng dẫn tạo Portfolio.

• Thực hành tại lớp

• Thực hành nâng cao
• Triển khai đồ án cuối khóa.
• Hỗ trợ đồ án cuối khóa.

• Hỗ trợ dự án cuối khóa (Cont)
• Hướng dẫn giải quyết các vấn đề còn vướng mắc - gặp khó khăn trên từng đề bài cụ thể.

• Trình bày đồ án
• Tổng kết khóa học
• Chia sẻ hướng đi, Apply Job, Freelancer