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

Trong Figma, biến thể được dùng để nhóm nhiều biến thể của cùng một thành phần lại với nhau, chẳng hạn như nhiều trạng thái hoặc kích thước. Relay giữ lại 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ẽ xem 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 bằng tệp Figma chứa thành phần News Card với 3 biến thể:

• hero-item là 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 là một bài viết mà bạn nghe chứ không phải đọ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.

2. Trong Figma, chuyển đến trình duyệt tệp. Dọc phía bên trái, hãy di chuột lên Bản nháp. Biểu tượng + sẽ xuất hiện — hãy nhấp vào biểu tượng +, rồi nhấp vào Nhập. Chọn tệp HelloNews.fig 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 cho Figma bổ sung thông tin vào thành phần, vì vậy, 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 này trong mã của họ.

1. Mở trình bổ trợ Relay cho Figma trong tệp (trong thanh trình đơn: Plugins > Relay for Figma (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. 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 đề ví dụ: Thẻ mới ban đầu

   Mô tả ví dụ: 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 một dự án Android Studio được định cấu hình sẵn. Dự án này chứa một ứng dụng hiển thị các 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 đó vào thư mục gốc của bạn.
3. Quay lại Android Studio. Chuyển đến File > Open (Tệp > Mở), chuyển đến thư mục gốc, 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 trong Figma, hãy sao chép URL của tệp Figma hướng dẫn về Thẻ tin tức. Chúng ta sẽ sử dụng URL này để nhập các thành phần. Ở góc trên bên phải của Figma, hãy nhấp vào nút Share (Chia sẻ). Trong hộp thoại mở ra, hãy nhấp vào Copy Link (Sao chép đường liên kết).

   

2. Chuyển sang dự án HelloNews trong Android Studio. Chuyển đến File > New > Import UI Packages... (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 Finish (Hoàn tất).

   

4. Nhấp vào biểu tượng để tạo dự án. Quá trình này có thể mất vài phút.

   

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

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

   

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

   

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

   

4. Thành phần kết hợp NewsCard được tạo từ gói giao diện người dùng. Thư viện này bao gồm một tham số thuộc loại View. Tham số này sẽ đặt biến thể của thẻ tin tức để 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 ta chưa sẵn sàng sử dụng NewsCard. Thành phần này không biết cách hiển thị nhiều tin bài, chỉ có một tin bài được mã hoá cứng giống nhau trong Figma. Vì vậy, nếu bây giờ thêm thành phần, chúng ta chỉ nhận được cùng một tin bài. Chúng ta cần một cách để chỉ định những phần của NewsCard cần được điền 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 Khung hiển thị