[TELOS] Khóa học Figma từ căn bản đến thực chiến

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.

Đến với Khóa học Figma từ căn bản đến thực chiến, bạn sẽ được tiếp nhận kiến thức thực chiến từ đội ngũ TELOS, 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 3 năm, bao gồm: Cách thực thi một dự án thiết kế giao diện UI/UX; 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 ý.

Đây là khóa học tập trung vào việc giúp người học có thể tận dụng tối đa khả năng của Figma, từ đó làm việc hiệu quả nhất.
Figma là một công cụ dễ học, dễ sử dụng. Thậm chí Figma còn có thể sử dụng trực tiếp được trên web. Tuy nhiên, nếu bạn có thêm một người hướng dẫn, giúp bạn tổng hợp lại những thông tin, kiến thức, các công cụ cơ bản nhất, nền tảng nhất, hướng dẫn bạn cách sử dụng chúng một cách hiệu quả nhất thì nó có thể tiết kiệm cho bạn được nhiều thời gian.
Giảng viên là một người đã sử dụng Figma từ những năm 2018, cho đến giờ cũng có hơn 3 năm làm việc cùng với Figma. Với kinh nghiệm 3 năm trong nghề, giảng viên sẽ hỗ trợ các bạn làm việc với Figma một cách nhanh chóng, hiệu quả. Khóa học sẽ hướng dẫn cho các bạn từng công cụ từng công cụ. Từ cách để dàn ra một cái frame cho tới Autolayout và tái sử dụng, tự động hóa Figma…

Video

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)

Bài 1-Giới thiệu khóa học

Bài 2-Giới thiệu Figma

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)

Bài 3-Cách cài đặt

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ự)

Bài 4-Giao diện chính Figma

Phần 4-Component/Instance/Variants (Công cụ nền tảng hỗ trợ cho sự tự động hóa trong figma)

Bài 5-Các section thuộc tính đối tượng

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)

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)

Bài 6-Các công cụ cơ bản nhất

Bài 7-Vẽ vector trong Figma

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)

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)

Bài 8-Tổng kết phần mở đầu và bài tập

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

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

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-Bài tập component: làm lịch với component

Bài 29-Bài tập kết hợp: tạo responsive table

Bài 30-Style là gì?

Bài 31-Làm việc với color style

Bài 32-Làm việc với text style

Bài 33-Ứng dụng trong thực tế

Bài 34-Các loại style khác

Bài 35-Lưới trong Figma

Bài 36-Bài tập: hệ thống icon

Bài 37-Làm web/app thì quy trình thế nào

Bài 38-Vẽ sitemap bằng FigJam

Bài 39-Dùng Figma dựng wireframe

Bài 40-Stylish cho giao diện

Bài 41-Dùng figma biến wireframe thành giao diện

Bài 42-Giới thiệu về prototype trong Figma

Bài 43-Cách tạo interaction

Bài 44-Setup prototype

Bài 45-Các thuộc tính của interaction

Bài 46-Overlay và các tính chất của overlay

Bài 47-Animation trong Figma prototype

Bài 48-Smart animate

Bài 49-Đặc tính của smart animate

Bài 50-Trình diễn thành phần và scrolling

Bài 51-Interactive component

Bài 52-Bài tập smart animate: loading screen

Bài 53-Bài tập smart animate: one page menu

Bài 54-Bài tập smart animate: header scroll-down menu

Bài 55-Tổng kết khóa và tóm tắt kiến thức

Bài 56-Một vài lời gợi ý và nhắn nhủ