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.
Önceden yapılandırılmış Android Studio proje ZIP dosyasını indirin (Geçiş Yükleme sayfasındaki projeyle aynıdır).
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.
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.
Projeyi açtığınızda, Android Studio projeye güvenip güvenmediğinizi sorabilir. Projeye Güven'i tıklayın.
Android Studio'da, Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğini belirleyin.
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.
Dosyanın indirilmesini bekleyin. Başarıyla indirildiğinde bileşen önizlemesi görüntülenir. Oluştur'u tıklayın.
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
Projenizi oluşturmak için öğesini tıklayın.
Derleme sonucunu görüntülemek için Build (Derleme) sekmesini tıklayın.
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.
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.
app/java/com/example/hellofigma/MainActivity.kt
'de, üstteki içe aktarma bölümüne ekleyin:import com.example.hellofigma.hellocard.HelloCard
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 } } } } }
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 } }
Araç çubuğunda bir cihazın seçildiğinden emin olun.
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.
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- İçerik parametreleri
- Tasarım güncellemeleri yapma ve yayma
- Tasarım varyantlarını kullanma