Chia Sẻ Khóa Học Facebook Design System Với Figma Variable - UX/UI Nâng Cao [Khóa 5398 A]
Trở thành một Senior Designer và Làm chủ Token, Responsive và Atomic Design thông qua phương pháp học tập dựa trên dự án.
Những điều bạn sẽ học:
- ✓ Bạn sẽ học cách Design giống như Facebook.
- ✓ Trở thành một chuyên gia về Design System.
- ✓ Bạn sẽ tìm hiểu về Theme và Branded House.
- ✓ Design như một Senior Experience Designer.
- ✓ Tìm hiểu cách Setup và cấu trúc một Three Tier Architecture Variables Library.
- ✓ Tìm hiểu sự khác biệt giữa một Block và Component.
- ✓ Cách sử dụng Instance Swap trong các Component của bạn.
- ✓ Làm chủ Auto Layout & Nested Component.
- ✓ Bạn sẽ xây dựng Design System của Facebook.
- ✓ Gây ấn tượng với Manager & Experience Director tương lai của bạn.
- ✓ Chuẩn bị sẵn sàng cho công việc với những kỹ năng cần thiết ngay từ ngày đầu tiên.
- ✓ Bạn sẽ hiểu cách thức tạo ra các Design System.
- ✓ Tìm hiểu cách tạo Responsive Design.
- ✓ Bạn có thể chuyển đổi giữa Light Mode và Dark Mode chỉ với một Click.
- ✓ Tìm hiểu Slot là gì và cách sử dụng chúng.
- ✓ Tìm hiểu cách cấu trúc các File Figma của bạn.
- ✓ Cách đặt tên cho các Token và Variable của bạn.
- ✓ Bạn sẽ tạo một Top-Tier Design System chuyên nghiệp.
- ✓ Get Facebook Design System File.
- ✓ Bạn sẽ học được các Workflow và phím tắt chuyên nghiệp nhất.
Chào mọi người! Tôi là một Senior Designer với hơn 6 năm kinh nghiệm làm việc với các công ty công nghệ, ngân hàng và các Agency với vai trò Design Systems Architect.
Đây không phải là một hướng dẫn "Cách sử dụng Figma" thông thường. Khóa học này sẽ đi sâu vào Design Systems Architecture, sử dụng giao diện mạng xã hội phức tạp nhất hành tinh - Facebook - làm case study chính của chúng ta. Chúng ta đang vượt qua giai đoạn chỉnh sửa từng pixel và tiến vào lĩnh vực cơ sở hạ tầng, logic và khả năng mở rộng.
Triết lý cốt lõi:
Mục tiêu của chúng tôi là giúp bạn chuyển từ "Designer" sang "Architect". Chúng tôi coi mọi yếu tố UI là một phần của hệ sinh thái sống động. Nếu một component không thể vượt qua bài test tải nội dung hoặc device breakpoint, nó sẽ bị loại bỏ. Chúng tôi xây dựng theo phương pháp "Atomic", đảm bảo rằng mọi thay đổi nhỏ ở nền tảng đều lan tỏa hoàn hảo đến toàn bộ hệ thống.
Những gì bạn sẽ xây dựng:
✓ Một Multi-Tier Variable Library: Bạn sẽ học cách kiến trúc một thư viện vượt xa những màu sắc đơn giản. Chúng tôi triển khai các Primal, Semantic & Component-Level Token để bạn có thể thay đổi chủ đề toàn bộ hệ thống chỉ trong vài giây.
✓ "Slot" Component Method: Nắm vững kỹ thuật nâng cao sử dụng các placeholder slot để tạo ra các container linh hoạt như Drawer, Tooltip & Card. Điều này loại bỏ nhu cầu tách rời các component và giữ cho hệ thống của bạn "được liên kết" vĩnh viễn.
✓ Các Functional Organism phức tạp: Chúng tôi không chỉ tạo ra các button. Chúng tôi xây dựng các high-logic block như Facebook Feed Post và Marketplace Buy Box, hoàn chỉnh với các responsive Auto Layout behavior và các conditional state.
Phân tích chương trình giảng dạy:
Module 1: Bắt đầu: Đây là nơi bạn được truy cập vào các tài nguyên khóa học, phần giới thiệu về khóa học và lời giải thích ngắn gọn về cốt lõi của "Atomic Design".
Module 2: File Setup: Tại đây, chúng ta sẽ setup file figma mà chúng ta sẽ sử dụng để xây dựng design system. Chúng ta sẽ cấu trúc file bằng cách sử dụng Atomic Design, xây dựng từ đầu. Chúng ta cũng sẽ thiết lập variables library của mình.
Module 3: Foundation: Thiết lập các sub-atomic particle là nền tảng của Facebook design system, bao gồm color, typography, iconography, spacing, grid và effect.
Module 4: Component: Kết hợp các atom thành các unit có thể tái sử dụng như các List Item (Avatar + Slot), các Rating Component và các Button chuyên dụng.
Module 5: Section: Đây là nơi chúng ta xây dựng những phần quan trọng. Chúng ta sẽ lắp ráp các "Section" phức tạp như Global Navigation, Facebook Feed và Marketplace Buybox. Chúng ta tập trung mạnh vào "Responsive Design" ở đây.
Module 6: Template & Page Logic: Chúng ta sẽ ghép các section lại với nhau thành các responsive template hoàn chỉnh. Chúng ta sẽ test độ bền của các template này với nhiều loại nội dung khác nhau để đảm bảo chúng hoạt động hoàn hảo.
Module 7: Kết thúc khóa học: Chúng ta sẽ cùng nhìn lại những điều đã học và đưa ra lời khuyên cho các bước tiếp theo.
Mục lục:
- ✓ 1. Bắt đầu.
- ✓ 2. Setup File.
- ✓ 3. Foundation (Sub-Atomic).
- ✓ 4. Component (Atom & Molecule).
- ✓ 5. Section (Organism).
- ✓ 6. Template.
- ✓ 7. Kết thúc khóa học.
Khóa học này dành cho ai:
- ✓ Experience Designer.
- ✓ UI Designer.
- ✓ Graphic Designer.
- ✓ Experience Director.
- ✓ Những người yêu thích Figma.
- ✓ Những người đam mê công nghệ.
NHẬN GET EBOOK TRÊN AMAZON THEO YÊU CẦU