Tạo và truyền tải các bản cập nhật thiết kế

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Trong phần này, bạn sẽ làm việc trên dự án trước đó đã xây dựng để tìm hiểu cách thay đổi một thành phần trong Figma (trong trường hợp này là thay đổi định dạng của văn bản) và xem các thay đổi được truyền tải cho cơ sở mã trong Android Studio.

So sánh trước và sau

Các thay đổi trong Figma

Hãy thực hiện một nội dung cập nhật trong thành phần Figma. Quay lại tệp Figma:

  1. Chọn lớp văn bản Tiêu đề (Title)và trong phần Văn bản (Text), hãy thay đổi kiểu thành In đậm (Bold).

    Văn bản tiêu đề trong Figma đã được chọn và in đậm

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

Bây giờ, hãy tích hợp thành phần đã cập nhật vào cơ sở mã. Để đảm bảo rằng nhà phát triển sử dụng phiên bản mới nhất của thành phần, hãy tạo một phiên bản mới đã đặt tên:

  1. Nhấp vào Tệp > Lưu vào Nhật ký phiên bản (File > Save to Version History) sau đó nhập tiêu đề và nội dung mô tả cho phiên bản mới của bạn.

    Tiêu đề ví dụ: Hello World Card V2

    Mô tả ví dụ: Thêm định kiểu văn bản

    Lưu vào tuỳ chọn nhật ký phiên bản trong trình đơn

Cập nhật mã thành phần

Bây giờ, hãy nhập thành phần này lại:

  1. Trong Android Studio, hãy đảm bảo rằng cửa sổ công cụ Dự án (Project) đang ở chế độ xem Android. Sau đó, nhấp chuột phải vào app/ui-packages/hello_card/ rồi chọn Cập nhật Gói giao diện người dùng (Update UI Package).

    Cập nhật tuỳ chọn Gói giao diện người dùng trong trình đơn theo bối cảnh

    Chờ cho thanh tải ở góc dưới cùng bên phải hoàn tất:

    Thanh tải trong Android Studio
  2. Nhấp vào biểu tượng Nút Tạo dự án để tạo dự án và xem thành phần đã cập nhật trong bản xem trước của app/java/com/example/hellofigma/MainActivity.kt. Lưu ý rằng văn bản hiện đang được in đậm.

    Nút tạo bản dựng trên thanh công cụ
    Xem trước thành phần
  3. Chạy ứng dụng để xem các nội dung cập nhật tương tự trong trình mô phỏng.

    Nút Chạy trên thanh công cụ
    Bản xem trước ứng dụng trong trình mô phỏng

Bước tiếp theo

Hiện tại, chúng ta đã cập nhật xong một thiết kế và xem cách mà kết quả cập nhật thể hiện trong mã, chúng ta đã có thể tập trung vào việc chú thích thiết kế của mình bằng các tham số nội dung cho phép thay đổi dữ liệu trong các thành phần.