Ebook Design Systems Dành Cho Developer [PDF, EPUB] [9414E]
Tìm hiểu cách code các design system có khả năng mở rộng.
Cuốn sách này cung cấp rất nhiều mẹo và thủ thuật liên quan đến design token, từ các công cụ design đến production, nhấn mạnh vào thực tế là các tool và automation chỉ hữu ích nếu có sự giao tiếp tốt giữa designer và developer ngay từ đầu.
Về cuốn sách:
Tự tin phát triển hệ một Design System toàn công ty ở quy mô lớn.
Phát triển một design system đòi hỏi nhiều thứ hơn là một UI component library và Storybook.
Là một developer làm việc trên một design system, bạn có trách nhiệm trích xuất các thông số kỹ thuật thiết kế từ các file design và dịch chúng thành code. Nếu code đó không thể mở rộng trên tất cả các ứng dụng đang sử dụng design system hoặc sẽ consume design system trong tương lai, công ty sẽ gặp khó khăn.
Bạn có thể dễ dàng bị mắc kẹt khi xây dựng các công cụ rất hẹp, như một React component library mà không có nền tảng vững chắc. Bởi vì một React component library rất tuyệt, nhưng nó có thể tốn kém nếu bạn làm quá sớm. Tại bất kỳ công ty nào, các ứng dụng có thể khác nhau tùy theo nền tảng (tức là web) và công nghệ (tức là React). Nếu tất cả những gì bạn có là một React component library, ngay khi bạn giới thiệu một ứng dụng với công nghệ khác (tức là Vue), thì bạn phải tìm cách chia sẻ các thông số kỹ thuật thiết kế giữa thư viện thành phần React và thư viện thành phần Vue. Vì vậy, bạn có thể tạo một thư viện CSS-in-JS có thể đóng gói các thông số kỹ thuật thiết kế và được các thư viện thành phần React và Vue sử dụng tương ứng.
Nhưng, điều gì xảy ra khi có yêu cầu đóng gói các thông số kỹ thuật thiết kế theo cách có thể áp dụng cho một trang web HTML thuần túy? Vâng, bạn có thể di chuyển việc đóng gói các thông số kỹ thuật thiết kế từ thư viện CSS-in-JS sang một file CSS thuần túy. Tuy nhiên, điều đó hạn chế các nhà phát triển React và Vue sử dụng các công nghệ ưa thích của họ và điều đó bị phá vỡ khi một ứng dụng không phải web được giới thiệu (tức là một Android mobile app). Thông thường, điều xảy ra là các nhà phát triển React và Vue sẽ mang theo một thư viện CSS-in-JS và các nhà phát triển HTML thuần túy mang theo một file CSS thuần túy. Vấn đề là bạn có các thông số kỹ thuật thiết kế của mình được thể hiện trong code ở nhiều nơi. Bạn không còn có thể biết được đâu là "source of truth". Bạn tạo ra rủi ro gia tăng rằng các ứng dụng khác nhau trong một công ty không đồng bộ với hệ thống thiết kế chính thức và với nhau.
Vào cuối ngày, bạn cần thể hiện các thông số kỹ thuật thiết kế của mình trong code ở một nơi duy nhất. Từ "source of truth" duy nhất đó, sau đó bạn có thể tạo ra các sản phẩm nền tảng (tức là các biến CSS, JS module, v.v.). Điều bạn không muốn làm là tạo ra các sản phẩm nền tảng mà không có một source of truth duy nhất, không có cơ chế để giữ cho tất cả người tiêu dùng của các sản phẩm đó đồng bộ với hệ thống thiết kế và với nhau.
Thực tế là nhiều công ty đã và đang nghiên cứu những vấn đề này, bao gồm Shopify, Adobe, Discovery Education, Morningstar, Orbit, Salesforce, Bloomberg, v.v.
Giải pháp là tạo các design token và quản lý từ một style dictionary.
Design Systems cho Developer đi sâu vào nhu cầu về design token, giải thích về chúng và các giải pháp thực tế để sử dụng chúng nhằm đưa các công cụ design system vào sản xuất.
Hơn nữa, tôi nhấn mạnh rằng các công cụ và tự động hóa chỉ hữu ích nếu ngay từ đầu có sự giao tiếp tốt giữa nhà thiết kế và nhà phát triển.
Trong cuốn sách này, bạn không chỉ học được các kỹ năng kỹ thuật cần có để xây dựng các công cụ design system cho production mà còn cả các kỹ năng mềm cần thiết cho sự cộng tác giữa designer và developer.
Cho dù bạn là một designer hay developer, cuốn sách này là dành cho bạn.
Tôi tin rằng sau khi đọc cuốn sách này, các nhà phát triển sẽ có thể làm việc trên một design system cho bất kỳ công ty nào, bất kể số lượng ứng dụng, nền tảng và công nghệ mà các ứng dụng đó hướng đến.
Tôi cũng tin rằng các designer sẽ hiểu rõ hơn về vai trò của họ trong việc cộng tác với các developer để tạo ra một design system mạnh mẽ.
Trong cuốn sách này, chúng tôi sẽ trình bày các vấn đề liên quan đến việc tạo ra các công cụ, như một React UI component library, để gói gọn các style của một design system, chẳng hạn như tính không linh hoạt trong việc mở rộng quy mô khi các ứng dụng mới phát sinh nhắm đến một nền tảng và công nghệ khác.
Từ đó, chúng ta sẽ xem xét cách giải quyết những vấn đề này bằng cách tạo ra các design token, biểu diễn các thông số kỹ thuật thiết kế trong code và style dictionary, một hệ thống quản lý trung tâm để lưu trữ các design token và chuyển đổi chúng thành các sản phẩm nền tảng.
Chúng tôi sẽ viết một số code, thảo luận về các cách tiếp cận khác nhau và đề cập đến các chi tiết thực tế, như cách schedule meetings để cộng tác với các designer.
Mục lục:
- ✓ Chương 01. Mission.
- ✓ Chương 02. Problem.
- ✓ Chương 03. Giới thiệu về Design Tokens.
- ✓ Chương 04. Giới thiệu Style Dictionaries.
- ✓ Chương 05. Trích xuất Design Tokens.
- ✓ Chương 06. Naming Design Tokens.
- ✓ Chương 07. Valuing Design Tokens.
- ✓ Chương 08. Lưu trữ và chuyển đổi các Design Token.
- ✓ Chương 09. Delivering Design Tokens.
- ✓ Chương 10. Tạo Tools & Assets từ Design Tokens.
- ✓ Chương 11. Ý tưởng cho sự cộng tác trong thế giới thực.
- ✓ Chương 12. Kết luận.
LƯU Ý: Pass mở file pdf là mật khẩu giải nén chung của tài liệu !