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 cập nhật thành phần Figma. Quay lại tệp Figma:
Chọn lớp văn bản Tiêu đề. Trong phần Văn bản, hãy thay đổi kiểu thành 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ã của bạn. Để đảm bảo rằng nhà phát triển sử dụng phiên bản mới của thành phần, hãy lặp lại các bước để lưu phiên bản.
Mở trình bổ trợ Figma Relay nếu chưa mở.
Nhấp vào Chia sẻ với nhà phát triển.
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.
Nhập CMD-L trên máy Mac hoặc CTRL-L trên Windows, trên bàn phím, để sao chép đường liên kết mới vào bảng nhớ tạm.
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.
Đề 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
- Chuyển đổi mẫu thiết kế thành mã trong Android Studio