Khóa học Figma UI Design

• Community của Figma
• Các thao tác và công cụ cơ bản
• Hiểu về vai trò của Figma trong dự án thực tế
• Phân biệt công việc thực tế và làm cho vui
• Giới thiệu các nguồn tham khảo
• Hướng dẫn tạo file Figma, thêm vào Projects
• Chia sẻ, comment & lưu file
• Thực hành buổi 1

• Các bài tập ứng dụng vẽ vector
• Đưa hình ảnh vào Figma và điều chỉnh
• Tạo color style, text style
• Hiểu và tạo được effect
• Thực hành buổi 2

• Component & Variant
• Frame & Auto-layout
• Hướng dẫn tạo hệ thống nút, text field, modal
• Hướng dẫn Layout grid
• Thực hành: Contact Form
• Thực hành: Login form

• Thực hành redesign một website

• Thực hành redesign một website (tiếp theo)

• Phân tích và thể hiện rút gọn thành phần trang thông tin của website giáo dục
• Hướng dẫn Prototype

• Phân tích nhanh và thể hiện rút gọn thành phần của trang e-commerce và mạng xã hội

• Thực hành các mẫu diễn hoạt prototype nâng cao

• Kích thước, định dạng và các lưu ý khi exporting và làm việc với Developer
• Hỗ trợ đồ án cá nhân cuối khóa

• 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