Khóa Học Figma Từ Căn Bản Đến Thực Chiến

Nội dung khóa học

Phần 1: Các yếu tố cơ bản (Hiểu về Figma, các thành phần và công cụ cơ bản) (8 bài giảng - 0 giờ 59 phút)

Bài 1 : Giới thiệu khóa học Figma (00:01:41)

Bài 2 : Giới thiệu Figma (00:02:22)

Bài 3 : Cách cài đặt (00:03:44)

Bài 4 : Giao diện chính Figma (00:04:08)

Bài 5 : Các section thuộc tính đối tượng (00:15:22)

Bài 6 : Các công cụ cơ bản nhất (00:14:30)

Bài 7 : Vẽ vector trong Figma (00:10:58)

Bài 8 : Tổng kết phần mở đầu và bài tập (00:06:36)

Phần 2: Các yếu tố về frame (Frame là thành phần nền tảng và cốt lõi trong figma, chương này giúp bạn hiểu về frame) (5 bài giảng - 0 giờ 27 phút)

Bài 9 : Giới thiệu frame (00:02:58)

Bài 10 : Tạo và làm việc với frame (00:03:04)

Bài 11 : So sánh frame và group (00:05:39)

Bài 12 : Constraints của frame - siêu công cụ cho responsive (00:10:51)

Bài 13 : Tổng kết chương và bài tập (00:04:41)

Phần 3: Autolayout (Autolayout là một công cụ rất hiểu quả để thực hiện dàn trải các thiết mang tính bố cục thứ tự) (8 bài giảng - 1 giờ 00 phút)

Bài 14 : Giới thiệu autolayout (00:03:55)

Bài 15 : Autolayout và text (00:02:59)

Bài 16 : Tạo autolayout (00:04:00)

Bài 17 : Thuộc tính chính của autolayout (00:06:15)

Bài 18 : Resizing với autolayout (00:12:21)

Bài 19 : Autolayout lồng ghép phức tạp (00:15:45)

Bài 20 : Các demo và công dụng (00:10:06)

Bài 21 : Bài tập autolayout: tạo chatbox (00:04:47)

Phần 4: Component/Instance/Variants (Công cụ nền tảng hỗ trợ cho sự tự động hóa trong figma) (8 bài giảng - 0 giờ 56 phút)

Bài 22 : Giới thiệu về component/instance (00:07:12)

Bài 23 : Bộ luật component (00:14:30)

Bài 24 : Sử dụng component và instance như thế nào (00:11:09)

Bài 25 : Variants - bản nâng cấp nâng tầm component (00:05:08)

Bài 26 : Các thuộc tính của variants (00:09:33)

Bài 27 : Một vài ví dụ của việc dùng variants (00:04:32)

Bài 28 : Bài tập component: làm lịch với component (00:03:09)

Bài 29 : Bài tập kết hợp: tạo responsive table (00:01:38)

Phần 5: Hệ thống hóa (Trong chương này chúng ta sẽ học cách để tạo ra các cấu trúc hệ thống cho file figma của bạn) (7 bài giảng - 0 giờ 37 phút)

Bài 30 : Style là gì? (00:03:04)

Bài 31 : Làm việc với color style (00:06:12)

Bài 32 : Làm việc với text style (00:05:08)

Bài 33 : Ứng dụng trong thực tế (00:05:28)

Bài 34 : Các loại style khác (00:03:23)

Bài 35 : Lưới trong Figma (00:10:28)

Bài 36 : Bài tập: hệ thống icon (00:03:24)

Phần 6: Thực chiến (Đem kiến thức đã học ở các chương vừa rồi vào việc thực hiện một website/app) (5 bài giảng - 0 giờ 58 phút)

Bài 37 : Làm web/app thì quy trình thế nào (00:09:34)

Bài 38 : Vẽ sitemap bằng FigJam (00:04:15)

Bài 39 : Dùng Figma dựng wireframe (00:20:16)

Bài 40 : Stylish cho giao diện (00:10:13)

Bài 41 : Dùng figma biến wireframe thành giao diện (00:14:19)

Phần 7: Prototype và trình diễn (Trình diễn trong figma giúp bạn làm rõ hơn về quy trình vận hành của web/app) (13 bài giảng - 1 giờ 05 phút)

Bài 42 : Giới thiệu về prototype trong Figma (00:02:10)

Bài 43 : Cách tạo interaction (00:04:02)

Bài 44 : Setup prototype (00:05:07)

Bài 45 : Các thuộc tính của interaction (00:02:58)

Bài 46 : Overlay và các tính chất của overlay (00:07:17)

Bài 47 : Animation trong Figma prototype (00:06:43)

Bài 48 : Smart animate (00:04:14)

Bài 49 : Đặc tính của smart animate (00:05:14)

Bài 50 : Trình diễn thành phần và scrolling (00:13:02)

Bài 51 : Interactive component (00:06:00)

Bài 52 : Bài tập smart animate: loading screen (00:04:59)

Bài 53 : Bài tập smart animate: one page menu (00:01:53)

Bài 54 : Bài tập smart animate: header scroll-down menu (00:02:19)

Phần 8: Tổng kết (Tóm tắt các kiến thức đã học và sự nhắc nhở chung) (2 bài giảng - 0 giờ 14 phút)

Bài 55 : Tổng kết khóa và tóm tắt kiến thức (00:07:56)

Bài 56 : Một vài lời gợi ý và nhắn nhủ (00:06:45)