Android Studio'da tasarımları koda dönüştürme

Tasarımı Figma'dan içe aktar

Şimdi, Figma'da oluşturulan Kullanıcı Arayüzü Paketi'ni Android Studio projesine ekleyeceğiz. Kullanıcı Arayüzü Paketi'ni dahil etmek için önceki bölümde oluşturduğumuz paylaşım URL'sini Android Studio’nun içe aktarma sihirbazına kopyalayın.

1. Önceden yapılandırılmış Android Studio proje ZIP dosyasını indirin (Geçiş Yükleme sayfasındaki projeyle aynıdır).

2. Sıkıştırılmış dosyayı açmak için dosyayı çift tıklayın. HelloFigma adlı bir klasör oluşturulur. Ana klasörünüze taşıyın.

3. Android Studio'ya geri dönün. Dosya > Aç'a gidin, ana klasör klasörünüze gidin, HelloFigma'yı seçin ve Aç'ı tıklayın.

4. Projeyi açtığınızda, Android Studio projeye güvenip güvenmediğinizi sorabilir. Projeye Güven'i tıklayın.

5. Android Studio'da, Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğini belirleyin.

   

6. Kullanıcı Arayüzü Paketlerini İçe Aktar iletişim kutusuna Figma dosyanızın URL'sini yapıştırın ve İleri'yi tıklayın.

   

   Not: Figma URL'niz yoksa URL'yi alma talimatlarını tekrarlayın ve bu iletişim kutusuna geri dönün.
   Not: Bir anahtar zinciri istemi görürseniz şifrenizi girip İzin ver'i tıklayın.

   

   Not: Bunun yerine Figma Erişim Jetonu hakkında bir iletişim kutusu görüntülenirse istemleri takip ederek veya Figma Erişim Jetonunuzu kurma talimatlarını tekrarlayın.

7. Dosyanın indirilmesini bekleyin. Başarıyla indirildiğinde bileşen önizlemesi görüntülenir. Oluştur'u tıklayın.

   Not: Kullandığınız Android Studio sürümüne bağlı olarak yukarıdaki düğmede Oluştur yerine Son yazıyor olabilir.

   

   Projenize yeni dosyaların eklendiğine dikkat edin. Bu dosyalar, projenizin bir parçası olarak kaynak kontrolüne dahil edilmelidir. Projenizin Android görünümünde şunları görürsünüz:

   

   • app/ui-packages/hello_card/*
     Bileşeni kodda açıklamak için gereken tüm kaynak öğeler. Bu dosyalar, derleme adımında kod oluşturmak için kullanılır.

   • app/ui-packages/hello_card/hello_card.json
     Bileşenin tanımını içeren JSON dosyası (düzeni ve diğer özellikleri dahil).

   • app/ui-packages/hello_card/fonts/*
     Jetpack Compose'da bileşeni desteklemek için gereken yazı tipi dosyaları.

   • app/ui-packages/hello_card/*.png veya *.jpeg
     Bileşeni desteklemek için gereken resim öğeleri.

   • app/ui-packages/hello_card/VERSION.txt
     Kullanıcı arayüzü paketini içe aktarmak için kullanılan Relay for Android Studio eklentisinin sürümü.

   • app/ui-packages/hello_card/config.json
     Önizlemeler için kullanılan tema.

Kod derleme ve oluşturma

1. Projenizi oluşturmak için öğesini tıklayın.

   

2. Derleme sonucunu görüntülemek için Build (Derleme) sekmesini tıklayın.

   

   Not: Derleme sorunları için yaygın sorun giderme sayfasını inceleyin.

3. Oluşturulan kod artık projenize eklenir. Bu kod oluşturulduğu için projenizin bir parçası olarak kaynak kontrolüne yönelik olmamalıdır. Projenizin Android görünümünde şunları görüntüleyebilirsiniz:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     Jetpack Compose kodu ve yazı tipleri oluşturuldu.

   • app/java (generated)/com/google/relay/compose
     Tüm kullanıcı arayüzü paketlerinde kullanılan paylaşılan çalışma zamanı kodu.

4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt adlı görüşmeyi açın. Bu, Figma bileşeni için oluşturulan Jetpack Compose işlevidir. Bileşeni de önizleyebilirsiniz.

   Düzen, öğeler ve stil bilgileri artık Figma'dan koda aktarılmaktadır.

   

   Kodda, Figma'ya eklenen özet artık oluşturulan composable'ın üzerindeki yoruma çevrilmiştir.

    /**
    * 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) {...
   

Bileşeni entegre edin ve uygulamayı çalıştırın

Şimdi, bileşeni ana etkinliğe entegre edelim.

1. app/java/com/example/hellofigma/MainActivity.kt'de, üstteki içe aktarma bölümüne ekleyin:

   import com.example.hellofigma.hellocard.HelloCard
   

2. Aynı dosyanın daha aşağısındaki MainActivity sınıfında şu kodu değiştirin:

   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. Aynı dosyanın aşağısındaki composable'ın önizlemesinde bir satırı değiştirin:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. Araç çubuğunda bir cihazın seçildiğinden emin olun.

5. Araç çubuğunda ▶ simgesini tıklayarak projeyi çalıştırın.

   

   Emülatör başlatılır, proje derlenir ve uygulamanız başlar.

   

   Tebrikler! İlk Figma bileşeninizi bir Jetpack Compose uygulamasına başarıyla eklediniz.

Sonraki adım

Tasarım güncellemeleri yapma ve yayma

Artık uçtan uca çalışan bir örneğiniz olduğuna göre, orijinal tasarımın nasıl güncelleneceğini ve kodumuzun nasıl yeniden oluşturulacağını görelim.