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.
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:
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).
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:
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
Cập nhật mã thành phần
Bây giờ, hãy nhập thành phần này lại:
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).
Chờ cho thanh tải ở góc dưới cùng bên phải hoàn tất:
Nhấp vào biểu tượng
để 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.
Chạy ứng dụng để xem các nội dung cập nhật tương tự 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.