Chia Sẻ Khóa Học Làm Chủ Responsive Layout Trong Figma [Khóa 6293nA]
Tạo responsive layout là kỹ năng bắt buộc phải có đối với bất kỳ UI/UX designer nào. Với rất nhiều thiết bị và kích thước màn hình khác nhau, việc thiết kế giao diện trông tuyệt vời và hoạt động tốt trên mọi nền tảng là điều cần thiết. Thành thạo kỹ năng này sẽ giúp bạn nổi bật trong lĩnh vực này. Trong khóa học này, chúng ta sẽ bắt đầu từ con số 0 để tạo ra thiết kế tuyệt đẹp này bằng Figma. Bạn sẽ học cách tạo các layout dễ sử dụng và hoạt động tốt trên mọi thiết bị. Chúng tôi sẽ đề cập đến các khái niệm và công cụ chính để giúp bạn thành thạo responsive design trong Figma.
Nội dung khóa học:
1. Giới thiệu về Responsive Layouts: Làm chủ các kỹ thuật Figma để thiết kế linh hoạt và thích ứng trên nhiều thiết bị khác nhau.
2. Resizing, Spacing và Alignment: Tìm hiểu những kiến thức cơ bản về Auto Layout, resizing, alignment, spacing và padding để tạo ra những thiết kế có khả năng thích ứng và responsive.
3. Wrap, Min & Max Width và Padding: Hiểu về Auto Layout Directions, Wrap, Min & Max Width và padding để Design một Responsive Landing Page.
4. Absolute Position & Constraints: Tạo các card phức tạp bằng cách sử dụng absolute position và constraints với các nested frame, sau đó thêm các nét hoàn thiện vào landing page của bạn.
5. Adaptive Design, Breakpoints và Grid Systems: Tạo các adaptive design và khám phá cách tạo các grid system, set breakpoint và đảm bảo thiết kế của bạn trông tuyệt vời trên mọi kích thước màn hình.
6. Giới thiệu về Figma Handoff: Nền tảng cho một Design-to-Development Workflow hiệu quả.
7. Responsiveness: Chuyển đổi các Static Design thành các Dynamic Layout.
8. Tạo một Responsive Desktop Design: Chuyển đổi các Static Layout thành các Responsive Interface.
9. Dark Mode: Triển khai Dark Mode: Hướng dẫn về Figma Color Variables.
10. Tablet & Mobile version: Responsive Interfaces: Thiết kế Tablet & Mobile Version trong Figma.
11. Giới thiệu Locofy: Phần này sẽ hướng dẫn bạn cách lấy thiết kế của mình và biến nó thành production-ready code. Bạn sẽ có được các kỹ năng để sử dụng Locofy plugin một cách hiệu quả, từ thiết lập và tổ chứa các file Figma của mình đến chuyển đổi thiết kế thành nhiều định dạng code khác nhau và tùy chỉnh output.
12. Conversion với Locofy Classic: Hướng dẫn từng bước sử dụng Locofy Classic.
13. Lightning: One-Click Design to Code: Chuyển đổi dễ dàng từ Design sang Code.
14. Locofy Responsiveness: Sử dụng Media Queries cho Responsive Styling.
15. Export Project của bạn sang Code: Sync, Export hoặc Deploy project của bạn.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU