Xử lý biến thể thiết kế

Trong Figma, biến thể được dùng để nhóm các biến thể khác nhau của cùng một thành phần với nhau, chẳng hạn như nhiều trạng thái hoặc kích thước. Hoạt động duy trì chuyển tiếp các biến thể của một thành phần khi thành phần đó được dịch sang mã. Trong phần này, chúng ta sẽ thấy cách Relay xử lý các biến thể trong thiết kế.

Điểm xuất phát

Chúng ta sẽ bắt đầu với một tệp Figma chứa thành phần News Card gồm 3 thành phần biến thể:

• hero-item dành cho tin bài quan trọng nhất
• article-item dành cho một bài viết thông thường
• audio-item dành cho bài viết bạn nghe, thay vì đọc

Ví dụ về lệnh sao chép trong Figma

Chúng ta sẽ dùng một tệp có sẵn trong Figma làm ví dụ cho hướng dẫn này. Hãy nhớ đăng nhập vào tài khoản Figma.

1. Tải HelloNews.fig xuống máy tính của bạn.

2. Trong Figma, chuyển đến trình duyệt tệp. Dọc theo phía bên trái, hãy di chuột qua Thư nháp. Biểu tượng + sẽ xuất hiện — nhấp vào biểu tượng +, sau đó nhấp vào Nhập. Chọn tệp HelloNews.fig mà bạn vừa tải xuống. Quá trình này có thể mất từ 10 giây đến một phút.

   

3. Mở tệp đã nhập trong Figma.

Tạo gói giao diện người dùng

Trình bổ trợ Relay for Figma (Chuyển tiếp cho Figma) bổ sung thêm thông tin vào thành phần để chúng ta có thể làm việc với các nhà phát triển sẽ sử dụng thành phần của chúng tôi trong mã của họ.

1. Mở trình bổ trợ Relay for Figma (Chuyển tiếp cho Figma) trong tệp của bạn (trong thanh trình đơn: Plugins > Relay (Trình bổ trợ > Chuyển tiếp) cho Figma). Nhấp vào Bắt đầu.

2. Chọn thành phần rồi nhấp vào Create UI Package (Tạo Gói giao diện người dùng).

   

3. Khi chọn Gói giao diện người dùng, hãy thêm nội dung mô tả vào hộp tóm tắt. Cho ví dụ: "Thành phần thẻ tin tức dùng để hiển thị các mục tin tức cho một danh sách".

   

Lưu phiên bản đã đặt tên

Bây giờ, bạn đã tạo gói giao diện người dùng, hãy chuẩn bị thành phần để chia sẻ với nhóm phát triển.

1. Mở trình bổ trợ Figma Relay (nếu chưa mở).
2. Nhấp vào Chia sẻ với nhà phát triển.
3. Trên màn hình Chia sẻ với nhà phát triển, bạn có thể nhập tên và nội dung mô tả phiên bản mới vào phần Lưu nhật ký phiên bản.

4. Nhấp vào Lưu.

   Tiêu đề mẫu: Thẻ mới ban đầu

   Mô tả ví dụ: Lần lặp lại đầu tiên của các mục tin bài

Tải dự án Android Studio xuống

Đối với phần Android Studio của hướng dẫn này, chúng ta sẽ sử dụng đoạn mã Dự án Android Studio. Dự án này chứa một ứng dụng hiển thị tin bài ở định dạng văn bản thuần tuý.

1. Tải tệp HelloNews.zip mẫu xuống.
2. Nhấp đúp vào tệp để giải nén. Thao tác này sẽ tạo một thư mục có tên HelloNews. Chuyển tệp này vào thư mục gốc.
3. Quay lại Android Studio. Chuyển đến Tệp > Mở, chỉ đường đến nhà bạn hãy chọn HelloNews rồi nhấp vào Open (Mở).
4. Khi bạn mở dự án, Android Studio sẽ hỏi xem bạn có tin tưởng dự án này không. Nhấp vào Trust Project (Tin tưởng dự án).

Nhập vào Android Studio

Hãy nhập thành phần Figma vào dự án.

1. Quay lại Figma, hãy sao chép URL của tệp Figma hướng dẫn News Card. Chúng tôi sẽ sử dụng URL này để nhập các thành phần của chúng tôi. Ở góc trên bên phải của Figma, nhấp vào nút Share (Chia sẻ). Trong hộp thoại mở ra, nhấp vào Sao chép đường liên kết.

   

2. Chuyển sang dự án HelloNews trong Android Studio. Chuyển đến Tệp > Mới > Nhập Gói giao diện người dùng... trên thanh trình đơn của Android Studio.

   

3. Dán URL của tệp Figma và rồi nhấp vào Next (Tiếp theo).

   

   

   1. Sau khi tìm nạp xong tệp (có thể mất chút thời gian), hãy nhấp vào Hoàn tất.

   

4. Nhấp chuột để xây dựng dự án. Quá trình này có thể mất ít phút.

   

Xem trước ứng dụng & thành phần

1. Trong chế độ xem Android, mở app/java/com/example/hellonews/ui/home/HomeScreen.kt, bản xem trước của ứng dụng sẽ hiển thị một vài tin bài trong một định dạng văn bản thuần tuý, với tin bài dạng in bên trên tin bài dạng âm thanh.

   

2. Mở tệp app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. Chiến dịch này là mã Jetpack Compose được tạo cho thành phần Figma. Từ chúng ta có thể thấy ba biến thể của thành phần NewsCard có được dịch từ Figma sang mã. Hãy cùng xem xét kỹ hơn về mã.

   

3. Enum View cho phép chúng ta chọn biến thể để sử dụng cho thành phần này. Tên của enum và giá trị của nó bắt nguồn từ các biến thể của Thành phần Figma. Tham số này được dùng trong tham số view của NewsCard thành phần kết hợp.

   

4. Thành phần kết hợp NewsCard được tạo từ gói giao diện người dùng. Chiến dịch này bao gồm tham số thuộc loại View. Tham số này sẽ đặt biến thể của thẻ tin tức thành tạo thực thể.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

Tiếp theo

Chúng tôi chưa sẵn sàng sử dụng NewsCard. Thành phần này không biết cách thức để cho thấy nhiều tin bài, chỉ có cùng một tin bài được cố định giá trị trong mã trong Figma. Vì vậy, nếu bây giờ chúng tôi sẽ thêm thành phần đó, tất cả những gì chúng tôi nhận được là cùng một bản tin lặp lại. Chúng ta cần có cách để chỉ định phần nào của NewsCard sẽ được điền với dữ liệu động.

Tham số nội dung

Trong phần này, chúng ta sẽ thêm các tham số nội dung vào thành phần NewsCard.

Đề xuất cho bạn

• Lưu ý: văn bản có đường liên kết sẽ hiện khi JavaScript tắt
• Tham số nội dung
• Cuộn
• Sử dụng Compose trong Thành phần hiển thị