Uygulandığında çoğu bileşenin içeriği sabit değildir, değişir değişebilecekdir. Bunu kendi projenize içerik parametrelerini kullanabilirsiniz. İçerik parametreleri, gerçek verileri koda gömmeden veri içeren kısımları gösterir.
İçerik parametresi ekleyin
Figma dosyanızda bileşeni seçin ve Relay for Figma eklentisini açın. (Eklentiler > Figma için geçiş).
Ana Figma penceresinde, ⌘ + tıklama tuşlarına basarak Başlık katmanını seçin veya Windows ve Linux'ta Ctrl + tıklayın. Ardından, eklentide, + simgesini tıklayın. "Parameters" (Parametreler) değerine ayarlayın ve katman için bir parametre eklemek üzere text-content (metin içeriği) seçeneğini belirleyin.
Başlık metin içeriği parametresinin adını değiştirmek için Ad alanına girin. Bu eğitim için Başlık girin.
Adı düzenlemenin yanı sıra farklı mülk türleri seçebilir veya bir açıklamasını kullanın. Geliştiricilerle birlikte çalışarak en uygun adlandırma şemasını seçin. İçerik parametrelerinin adları oluşturulan composable'daki parametrelerin adları.
Adlandırılmış sürümü kaydet
Şimdi bu sürümü koda aktarılmaya hazır olarak işaretleyelim.
- Açık değilse Figma Relay eklentisini açın.
- Geliştiriciyle paylaş'ı tıklayın.
Geliştiriciyle paylaş ekranında sürüm için bir ad ve açıklama girin.
Örnek Başlık: Hello World Card V3
Örnek Açıklama: Eklenen parametreler
Bileşeni Android Studio'da güncelleme
Bileşeni Android Studio'da güncelleyelim.
Android Studio'da, Proje aracı penceresinin Android görünümünde olduğundan emin olun. Ardından,
app/ui-packages/hello_card/
öğesini sağ tıklayın ve Kullanıcı arayüzünü güncelle Paket.Projenizi tekrar oluşturmak için seçeneğini tıklayın.
app/java/com/example/hellofigma/hellocard/HelloCard.kt
uygulamasını açarsanız:title
parametresinin eklendiğine dikkat edin. Parametrenin adı Figma'da belirttiğimiz içerik parametresinin adı:app/java/com/example/hellofigma/MainActivity.kt
adlı görüşmeyi açın.title
sınıfına bir değer eklemek içinMainActivity
sınıfındaki bir satırı değiştirin parametresi: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) { HelloCard(title="Balloon World!") // Change this line } } } } }
Aynı dosyanın daha aşağısında, composable'ın önizlemesinde bir satırı değiştirin:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard(title="Balloon World!") // Change this line } }
Projenizi tekrar oluşturun ve önizlemede güncellenmiş bileşeni görün. Not yeni parametre değerinin artık görünür olduğundan emin olun.
Emülatörde de aynı güncellemeleri görmek için uygulamayı çalıştırın.
Yaşasın! Geçiş iş akışının temellerini öğrendiniz.
Sonraki adım
Temel eğitimin sonuna geldik. Proje yönetiminin birçok özelliğinin geçiş iş akışı üzerinde çalışıyor. Kullanabileceğiniz başka birkaç özellik daha var. Eğer etkileşim işleyiciler gibi özelliklerin nasıl kullanılacağını birden fazla Figma varyantına sahip bileşenlerle ve daha fazlasıyla ilgili ileri düzey eğiticiyi inceleyin!
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Android Studio'da tasarımları koda dönüştürme
- Tasarım güncellemeleri yapma ve uygulama
- Oluşturma düzeniyle ilgili temel bilgiler