Lesson10 - Components.pptx hướng dẫn làm

Lesson10 - Components.pptx hướng dẫn làm

1. COMPONENTS Lesson 10

2. Component Variant Component properties 1 2 3 Overview

3. 1. Component

4. Là các thành phần trong thiết kế giao diện. Component là gì ?

5. Khi xây dựng 1 bộ Design system, ta cần các thành phần sử dụng lặp đi lặp lại con gọi là Component. Bao gồm các thành phần cốt lõi, có khả năng tái sử dụng cho phép thiết kế có tính thống nhất như là Button, Layout text, Header, Footer, thành phần giúp đạt tính thống nhất, chuẩn h oá về mặt giao diện và có khả năng sử dụng được trên nhiều dự án khác. Đây là lý do tại sao các công ty lớn như Uber, Airbnb, Shopify và nhiều nơi khác dày công xây dựng nó. 1.1. Vì sao cần Component và Variants ?

6. Chọn layer hoặc các layer (group) Nhấn biểu tượng Phím tắt: Mac: Option+Command+K Win: Ctrl+Alt+K Hoặc nhấn chuột phải chọn chức năng “ Create Component” Tạo Component độc lập 1.2. Cách tạo Component

7. Chọn layer hoặc các layer Nhấn biểu tượng bên cạnh Chọn chức năng “Create multiple components Tạo Component hàng loạt 1.2. Cách tạo Component

8. Main Instance Kéo main component nhấn Alt để tạo ra Instance Component (Phím tắt CMD + D) Copy/Paste Instance là bản sao của main component, nó có những thuộc tính của main component. Một số thay đổi trên Instance sẽ không ảnh hưởng đến component gốc (main compoment) Sự thay đổi Component gốc sẽ thay đổi instance (bản sao) Cách tạo Instance Một instance sẽ luôn tuân theo quy tắc của main component, nhưng nó có thể được sửa đổi/ghi đè (trong mức độ hợp lý) để phù hợp với nhu cầu sử dụng cụ thể. 1.3. Main & Instance Component (bản sao)

9. Ghi đè thuộc tính Ghi đè 1 hiệu ứng lên trên Instance con, thay đổi 1 số thuộc tính Có thể ghi đè: fill, stroke, size, effect, bounding box Không thể ghi đè: size, position, constranse, layer hierarchy Các thuộc tính đã thay đổi sẽ được ghi đè lên component gốc Chỉ áp dụng với Instance được chọn Instance đã detach (tách) sẽ không bị thay đổi khi component gốc thay đổi (không phụ thuộc component gốc) 1.3. Main & Instance Component (bản sao)

10. 2. Variant

11. Variants là tập hợp 1 nhóm các component có những thành phần tương tự nhau Ví dụ button: Bình thường/ rê chuột/ đã nhấn/ không kích hoạt 2. Variant

12. Khi thiết kế giao diện , ta cần các thành phần sử dụng lặp đi lặp lại. Các thành phần này chính là Component. Component & Variant thể hiện tính thống nhất và giúp thiết kế đạt được tính thống nhất, chuẩn hoá về mặt giao diện. Có khả năng sử dụng được trên nhiều sản phẩm, dự án khác. Variants giúp tinh gọn và hỗ trợ quản lý các component có cùng 1 số thuộc tính 2.1. Vì sao cần Component và Variants ?

13. Cách 1: 2.2. Cách tạo Variant

14. Cách 2: 2.2. Cách tạo Variant

15. 3 . Component properties

16. Là các thành phần được được tùy chỉnh giúp cho công việc thiết kế component nhanh hơn và đưa ra nhiều sự lựa chọn khi sử dụng bất kỳ 1 component nào ( ví dụ trong button variants ) Lợi ích: Tối ưu công việc tạo các variants Dễ dàng biết được thành phần nào có thể được tùy chỉnh Rút ngắn khoảng cách giữa designer và coder -> coder sẽ yêu bạn lắm 3. Component properties là gì ?

17. 3.1. Các thuộc tính

18. Tối ưu công việc tạo các Variants

19. Tối ưu hóa giao tiếp giữa designer và coder Component properties cho phép bạn điều chỉnh components với các thuộc tính mà bên coder cũng sẽ có

20. Cách tạo Text property

21. Cách tạo Boolean property

22. Cách tạo Instance Swap property

23. Cách tạo List preferred values

24. Mở rộng thêm với Nested Instances Được sử dụng trong các trường hợp dùng Complex Components ( component trong component ) Link trải nghiệm: https://www.figma.com/file/UdB4dJIStLWmIbpiwe8yw5/Nested-Instances?node-id=0%3A1&t=cWpCdShYcJi0PRhg-1

25. Hiểu được khái niệ m , vai trò và tầm quan trọng của Component, Variants, Component properties Thực hành và áp dụng cho dự án cuối khóa Key takeaways

26. Thực hành Bài tập Thực hành với công cụ Component & Variants đã học Tạo ra Component Variants Có thể tạo thêm các properties cho components sử dụng trong Wireframe hoặc dự án nhóm

27. THANK YOU !