Khóa Học Này Có Gì
- Khóa học thiết kế giao diện bằng Figma dành cho những bạn có đam mê với ngành nghề UI/UX design. Khóa học tập trung vào những kỹ năng căn bản nhất, đồng thời cung cấp một cái nhìn tổng quát giúp học viên có thể tạo ra sản phẩm cụ thể sau khóa học.
- Khoá này đã được xuất bản vào năm 2021, và sau những cập nhật lớn của Figma, mình đã bổ sung thêm một lượng lớn kiến thức và thiết kế lại khoá theo hướng cập nhất vào đầu 2025!
Đối Tượng Tham Gia:
- Người đang bước chân vào lĩnh vực thiết kế UI/UX
- Người đã sử dụng figma và muốn nâng cao hiệu quả sử dụng công cụ
Khóa Học Sẽ Dạy Những Gì?
Bạn sẽ được tiếp kiến thức thực chiến từ đội ngũ TELOS Academy, bao gồm các Developer và Designer cùng quản lý công việc và trao đổi trên một file làm việc Figma hơn 8 năm, bao gồm:
- Cách một dự án thiết kế giao diện UI/UX được thực thi
- Kiến thức căn bản về cách tận dụng Figma
- Các mẹo vặt để làm việc khoa học và tư duy theo lối lập trình
- Phương pháp nghiên cứu để luôn tìm ra câu trả lời cho cái mình chưa biết trong Figma
- Vun đắp mối quan hệ Designer – Developer với những sản phẩm ăn ý
Lợi Ích Sau Khóa Học:
- Thuần thục cách sử dụng công cụ; hiểu rõ ngôn ngữ thiết kế; thấu hiểu tư duy bài bản
- Tự tin thực hiện hoá ý tưởng của mình trên các thiết kế
- Biết cách dùng phần mềm như một người làm UI/UX với lối tư duy hệ thống, nắm vững nền tảng cơ bản; sắp xếp và quản lý các công việc một cách khoa học
- Giảm đến hơn 60% thời gian cho các thao tác lặp đi lặp lại bằng việc tạo ra các hệ thống giao diện với component, style và autolayout
- Tự tạo ra những thiết kế Website/App cực chất, với nền tảng tư duy công cụ để sẵn sàng cho công việc UI/UX Design
- Đặc biệt, danh sách các bài tập trải dài và cực nhiều những hỗ trợ từ các cộng đồng của giảng viên, các kiến thức mở rộng và liên tục cập nhật.
Nội Dung Khóa Học
▶️ Chương 1: Các yếu tố cơ bản
Bài 1: Giới thiệu khóa học
Bài 2: Giới thiệu Figma
Bài 3: Cách cài đặt
Bài 4: Giao diện chính Figma
Bài 5: Các section thuộc tính đối tượng
Bài 6: Các công cụ cơ bản nhất
Bài 7: Vẽ vector trong Figma
Bài 8: Tổng kết phần mở đầu và bài tập
—–
▶️ Chương 2: Các yếu tố về Frame
Bài 9: Giới thiệu frame
Bài 10: Tạo và làm việc với frame
Bài 11: So sánh frame và group
Bài 12: Constraints của frame – siêu công cụ cho responsive
Bài 13: Tổng kết chương và bài tập
—–
▶️ Chương 3: Autolayout
Bài 14: Giới thiệu autolayout
Bài 15: Autolayout và text
Bài 16: Tạo autolayout
Bài 17: Thuộc tính chính của autolayout
Bài 18: Resizing với autolayout
Bài 19: Autolayout lồng ghép phức tạp
Bài 20: Các demo và công dụng
Bài 21: Bài tập autolayout: tạo chatbox
—–
▶️ Chương 4: Component/Instance/Variants
Bài 22: Giới thiệu về component/instance
Bài 23: Bộ luật component
Bài 24: Sử dụng component và instance như thế nào
Bài 25: Variants – bản nâng cấp nâng tầm component
Bài 26: Các thuộc tính của variants
Bài 27: Một vài ví dụ của việc dùng variants
Bài 28: Updated: Component’s properties
Bài 29: Bài tập component: làm lịch với component
Bài 30: Bài tập kết hợp: tạo responsive table
Bài 31: Bài tập properties: làm product card
—–
▶️ Chương 5: Hệ thống hóa
Bài 32: Style là gì?
Bài 33: Làm việc với color style
Bài 34: Làm việc với text style
Bài 35: Effect Style
Bài 36: Các plugin khi làm việc với style
Bài 37: Các yếu tố style khác
Bài 38: Update: Giới thiệu Variable
Bài 39: Lưới trong Figma
Bài 40: Bài xem thêm: hệ thống icon
Bài 41: Bài tập light/dark mode
—–
▶️ Chương 6: Thực chiến
Bài 42: Làm web/app thì quy trình thế nào
Bài 43: Vẽ sitemap bằng FigJam
Bài 44: Dùng Figma dựng wireframe
Bài 45: Stylish cho giao diện
Bài 46: Dùng Figma biến wireframe thành giao diện
—–
▶️ Chương 7: Prototype và trình diễn
Bài 47: Giới thiệu về prototype trong Figma
Bài 48: Setup cơ sở và tạo Interaction
Bài 49: Các hình thức preview
Bài 50: Các thuộc tính của interaction
Bài 51: Overlay và các tính chất của overlay
Bài 52: Updated: Scroll trong Figma
Bài 53: Animation trong Figma prototype
Bài 54: Smart animate
Bài 55: Thử nghiệm ứng dụng Smart Animation
Bài 56: Interactive component
Bài 57: Interaction dựa trên variables
Bài 58: Bài tập smart animate: loading screen
Bài 59: Bài tập Smart Animate: Đĩa xoay
Bài 60: Bài tập Smart Animate: Scroll trong Figma
—–
▶️ Chương 8: Tổng kết
Bài 61: Tổng kết khoá và tóm tắt kiến thức
Bài 62: Một vài lời gợi ý và nhắn nhủ

Framer: căn bản đến thực chiến, tự xây dựng portfolio xịn - TELOS Academy 

