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

Giới thiệu về khóa học và các kiến thức mà bạn sẽ được học trong khóa này

Giới thiệu về phần mềm Figma sẽ được sử dụng trong khóa học này

Hưỡng dẫn sơ về cách đăng ký/cài đặt figma trên các nền tảng web browser, MacOS hoặc Windows

Giới thiệu về giao diện chính của Figma và những thành phần cơ bản

Các công cụ cơ bản nhất của Figma

Cách để vào vector mode và vẽ trong Figma

Tổng kết chương và phần bài tập về hiệu ứng Glassmorphism

Frame là gì và tại sao nó lại là công cụ quan trọng?

Tạo một frame như thế nào? và làm việc với nó ra sao?

Điểm khác biệt giữa Frame và Group?

Ưu tiên chọn Frame khi thiết kế các element là do đâu?

So sánh để thấy rõ những điểm cần lưu ý

Làm quen với Constraint và các loại hình Constraint.

Bước đầu chuẩn bị cho kiểu tư duy hệ thống lấy constraint và frame làm cốt lõi

Ôn tập chương và làm một bài tập để tạo ra 1 cái Article Card

Autolayout là gì và có những tác dụng ra sao?

Nền tảng cơ bản nhất trong autolayout là text, hãy xem text được autolayout ra sao

Cách để setup một autolayout cho frame thiết kế của bạn

Các thuộc tính mà một autolayout có và cách tận dụng nó cho thiết kế

resizing trong autolayout và cách mà một frame autolayout có thể hoạt động mượt mà với các thành phần bên trong nó

Sau khi đã hiểu cách resizing hoạt động rồi, chúng ta nâng độ khó lên bằng cách lồng ghép các autolayout vào nhau để tạo thành các cấu trúc frame phức tạp

Ứng dụng trong thực tế cách mà autolayout vận hành

Ôn tập chương và thực hành bài tập tạo một giao diện chat với autolayout

Các khái niệm căn bản về khái niệm component, instance và sự tái sử dụng trong thiết kế giao diện

Các luật của component và variants giúp việc làm việc với các loại đối tượng này có những giới hạn và quy chuẩn để tuân theo

Sử dụng các component trong thực tế thế nào?

Bổ sung thêm kiến thức về plugin và cách dùng plugin trong bài và trong link resource để mọi người hiểu sâu hơn.

Giới thiệu về Variants, một công cụ giúp bạn định nghĩa các trường hợp thuộc tính của một element trong thiết kế

Các đặc tính của variant giúp bạn có thể hiểu và sử dụng nó

Các tình huống chúng ta có thể dùng Variants trong thực tế thiết kế

Tận dụng component để có thể setup một thiết kế dạng lịch trên figma

Kết hợp kiến thức về autolayout và component vào trong một thiết kế responsive table

Giới thiệu về một hệ thống quản lý hiệu quả trong figma gọi là Style

Colorstyle giúp quản lý hệ thống màu sắc của toàn bộ thiết kế web/app

Text style quản lý hệ thống font chữ và cách thức setup một bộ text style khoa học

Các chúng ta vận dụng 2 loại style chính vào trong thiết kế. Bổ sung thêm plugin Batch Styler giúp quản lý text style hiệu quả hơn.

Các style về effect, grid... giúp hỗ trợ thêm trong việc quản lý thiết kế

Các dạng lưới, Cách setup lưới, cách để dùng lưới trong Figma

Tạo một hệ thống icon với kiến thức bổ sung về icon

Quy trình căn bản về làm một thiết kế web/app và vai trò của designer trong quy trình đó

Sử dụng figJam để vẽ sitemap một cách đơn giản

Vẽ hệ thống wireframe và ứng dụng các kiến thức của những buổi đã học vào để có thể tái sử dụng về sau

Setup và dàn dựng hệ thống style cho website trước khi triển khai chuyển hóa hệ thống thành giao diện

Edit các thành phần bằng cách sử dụng component, quản lý hệ thống để nhanh chóng có 1 thiết kế giao diện từ hệ thống wireframe

Prototype là gì? Tại sao một thiết kế web/app thì lại cần prototype?

Interaction là đơn vị cơ bản nhất của prototype, cách để tạo lập 1 interaction

Setup các settings cơ bản trong 1 file prototype

Tìm hiểu về các thuộc tính đã có trong 1 interaction

Hình thức overlay trong figma và các tính chất, cách dùng nó

Bước đầu đến vơi các loại hình animate trong figma

Loại hình quan trọng và có nhiều biến đổi, chuyển biến nhất trong figma - Smart Animate

Tìm hiểu về các yếu tố bản chất của smart animate để vận dụng tốt hơn

Các kiểu scroll trong figma và các loại trình diễn figma mirror

Một bản nâng cấp từ kiến thức variant để giúp thiết kế có thể mô phỏng tốt các yếu tố liên quan đến chuyển đổi trạng thái

Ôn tập và làm hiệu ứng loading với after delay

Làm 1 trang menu sống động với hiệu ứng smart animate

Nâng cao tư duy với smart animate bằng cách thiết kế hiệu ứng scrolldown menu