Chuyển đổi mẫu thiết kế thành mã trong Android Studio

Nhập thiết kế từ Figma

Bây giờ, chúng ta sẽ tích hợp Gói giao diện người dùng được tạo trong Figma vào dự án Android Studio. Để thực hiện việc này, chúng ta cần sao chép URL của tệp Figma và nhập URL này vào trình hướng dẫn nhập của Android Studio.

  1. Ở 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).

    Tuỳ chọn sao chép đường liên kết trên thẻ tệp
  2. Tải tệp ZIP của dự án Android Studio đã được định cấu hình trước (cùng dự án trên trang Install Relay (Cài đặt trình chuyển tiếp)).

  3. 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 HelloFigma. Chuyển tệp này sang thư mục gốc.

  4. Quay lại Android Studio. Truy cập File > Open (Tệp > Mở), chuyển đến thư mục gốc, chọn HelloFigma rồi nhấp vào Open (Mở).

  5. Khi mở dự án, Android Studio có thể 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).

  6. Trong Android Studio, hãy chọn File > New > Import UI Packages… (Tệp > Mới > Nhập Gói giao diện người dùng...).

    Tuỳ chọn Import UI Packages… (Nhập Gói giao diện người dùng...) trong trình đơn File (Tệp)
  7. Trong hộp thoại Import UI Packages (Nhập Gói giao diện người dùng), hãy dán URL của tệp Figma rồi nhấp vào Next (Tiếp theo).

    Hộp thoại Import UI Package (Nhập Gói giao diện người dùng)
    Hộp thoại hệ thống chuỗi khoá
  8. Đợi tệp tải xuống. Khi tải xuống thành công, bản xem trước thành phần sẽ xuất hiện. Nhấp vào Finish (Hoàn tất).

    Xem trước thành phần

    Lưu ý rằng các tệp mới đã được thêm vào dự án và phải được cam kết kiểm soát nguồn. Trong chế độ xem Android của dự án, bạn sẽ thấy:

    Thư mục UI-packages trong chế độ xem Android
    • app/ui-packages/hello_card/*
      Tất cả thành phần nguồn cần thiết để mô tả thành phần trong mã. Các tệp này được dùng để tạo mã trong quá trình tạo bản dựng.

    • app/ui-packages/hello_card/hello_card.json
      Tệp JSON chứa định nghĩa về thành phần (gồm bố cục và các thuộc tính khác của thành phần).

    • app/ui-packages/hello_card/fonts/*
      Tất cả tệp phông chữ cần thiết để hỗ trợ thành phần trong Jetpack Compose.

    • app/ui-packages/hello_card/*.png hoặc *.jpeg
      Tất cả thành phần hình ảnh bắt buộc để hỗ trợ thành phần.

    • app/ui-packages/hello_card/VERSION.txt
      Phiên bản của trình bổ trợ Chuyển tiếp cho Android Studio dùng để nhập Gói giao diện người dùng.

    • app/ui-packages/hello_card/config.json
      Giao diện dùng cho bản xem trước.

Tạo dự án và tạo mã

  1. Nhấp vào Nút Make Project (Tạo dự án) để tạo dự án.

    Nút Make Project (Tạo dự án) trên thanh công cụ
  2. Để xem kết quả về bản dựng, nhấp vào thẻ Build (Bản dựng).

    Thẻ Build (Bản dựng) ở cuối cửa sổ Android Studio
  3. Mã được tạo hiện được thêm vào dự án. Vì đây là mã được tạo, bạn không cần phải cam kết kiểm soát nguồn. Trong chế độ xem Android của dự án, bạn có thể xem:

    Mã được tạo trong chế độ xem Android
    • app/java (generated)/com/example/hellofigma/hellocard
      Tạo mã và phông chữ Jetpack Compose.

    • app/java (generated)/com/google/relay/compose
      Mã thời gian chạy dùng chung được sử dụng trên mọi Gói giao diện người dùng.

  4. Mở app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt. Đây là hàm được tạo trong Jetpack Compose cho thành phần Figma. Bạn cũng có thể xem trước thành phần.

    Bố cục, tài sản và thông tin định kiểu nay được chuyển từ Figma sang mã.

    Xem trước thành phần

    Trong mã, bản tóm tắt thêm vào trong Figma hiện được dịch thành nhận xét phía trên thành phần kết hợp được tạo.

     /**
     * Hello Card component used to display the image and the title content
     *
     * This composable was generated from the UI package ‘ hello_card’
     * Generated code; do not edit directly
     */
    @Composable
    fun HelloCard(modifier: Modifier = Modifier) {...
    

Tích hợp thành phần và chạy ứng dụng

Bây giờ, hãy tích hợp thành phần này vào hoạt động chính.

  1. Tại app/java/com/example/hellofigma/MainActivity.kt, thêm vào phần nhập ở trên cùng:

    import com.example.hellofigma.hellocard.HelloCard
    
  2. Ở phía dưới tệp, thay đổi mã sau trong lớp MainActivity:

    class MainActivity : ComponentActivity() {
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContent {
                HelloFigmaTheme {
                    // A surface container using the 'background' color from the theme
                    Surface(color = MaterialTheme.colors.background) {
                        // Greeting("Android") // Delete this line
                        HelloCard()  // Add this line
                    }
                }
            }
        }
    }
    
  3. Ở phía dưới tệp, tại chế độ xem trước của thành phần kết hợp, thay đổi một dòng:

    @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
        HelloFigmaTheme {
            HelloCard() // Change this line
        }
    }
    
  4. Đảm bảo bạn đã chọn một thiết bị trên thanh công cụ.

  5. Chạy dự án bằng cách nhấp vào nút ▶ trên thanh công cụ.

    Nút Chạy trên thanh công cụ

    Trình mô phỏng được khởi động. Thế là dự án đã tạo xong và ứng dụng sẽ bắt đầu chạy.

    Bản xem trước ứng dụng trong trình mô phỏng

    Xin chúc mừng! Bạn đã tích hợp thành công thành phần Figma đầu tiên vào ứng dụng Jetpack Compose!

Bước tiếp theo

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

Hiện bạn đã có ví dụ minh hoạ toàn bộ cách thức hoạt động, hãy xem cách cập nhật thiết kế gốc và tạo lại mã nhé.