Tasarım varyantlarını kullanma

Figma'da varyantlar, aynı bileşenin farklı durumları veya boyutlar gibi farklı varyasyonlarını birlikte gruplandırmak için kullanılır. Geçiş, koda çevrilen bir bileşenin varyantlarını korur. Bu bölümde, Relay'in tasarımlardaki varyantları nasıl işlediğini göreceğiz.

Başlangıç noktası

Üç varyantlı bir Haber Kartı bileşeni içeren bir Figma dosyasıyla başlayacağız:

• hero-item öğesi ise en önemli haber makalesi içindir
• article-item tipik bir makale içindir
• audio-item okumak yerine dinlediğiniz bir makaleye yöneliktir

Figma örneğini kopyala

Bu eğitim için örnek olarak mevcut bir Figma dosyasını kullanacağız. Figma hesabınıza giriş yaptığınızdan emin olun.

1. HelloNews.fig'i bilgisayarınıza indirin.

2. Figma'da dosya tarayıcısına gidin. Farenizle sol taraftaki Taslaklar'ın üzerine gelin. Bir + simgesi görünür. Önce + simgesini, ardından İçe aktar'ı tıklayın. Yeni indirdiğiniz HelloNews.fig dosyasını seçin. Bu işlem, 10 saniyeden bir dakikaya kadar sürebilir.

   

3. İçe aktarılan dosyayı Figma'da açın.

Kullanıcı arayüzü paketi oluşturma

Relay for Figma eklentisi, bileşenimize ekstra bilgiler ekler. Böylece, bileşenimizi kodlarında kullanacak geliştiricilerimizle birlikte çalışabiliriz.

1. Dosyanızda Relay for Figma eklentisini açın (menü çubuğunda: Plugins > Relay for Figma). Başlayın'ı tıklayın.

2. Bileşeni seçin ve Kullanıcı Arayüzü Paketi Oluştur'u tıklayın.

   

3. Kullanıcı Arayüzü Paketi seçiliyken özet kutusuna bir açıklama ekleyin. Örneğin: "Bir liste için haber öğelerini görüntülemeyi amaçlayan haber kartı bileşeni".

   

Adlandırılmış sürümü kaydet

Kullanıcı arayüzü paketi oluşturduğunuza göre bileşeninizi geliştirme ekibiyle paylaşmak için hazırlayabilirsiniz.

1. Açık değilse Figma Relay eklentisini açın.
2. Geliştiriciyle paylaş'ı tıklayın.
3. Geliştiriciyle paylaş ekranında, Sürüm geçmişini kaydet bölümüne yeni bir sürüm adı ve açıklaması girebilirsiniz.

4. Kaydet'i tıklayın.

   Örnek Başlık: İlk Yeni Kart

   Örnek Açıklama: Haber makalesi öğelerinin ilk yinelemesi

Android Studio projesini indir

Bu eğiticinin Android Studio bölümünde, önceden yapılandırılmış bir Android Studio projesi kullanacağız. Bu proje, haber makalelerini düz metin biçiminde görüntüleyen bir uygulama içeriyor.

1. Örnek HelloNews.zip dosyasını indirin.
2. Sıkıştırılmış dosyayı çift tıklayarak açın. Bu işlem, HelloNews adlı bir klasör oluşturur. Dosyayı ana klasörünüze taşıyın.
3. Android Studio'ya geri dönün. File > Open (Dosya > Aç) seçeneğine gidin, ana klasör klasörünüze gidin, HelloNews'u seçin ve Open'ı (Aç) tıklayın.
4. Projeyi açtığınızda, Android Studio projeye güvenip güvenmediğinizi sorar. Projeye Güven'i tıklayın.

Android Studio'ya aktar

Figma bileşenimizi projeye aktaralım.

1. Figma'ya geri dönün, News Card Tutorial Figma dosyasının URL'sini kopyalayın. Bu URL'yi bileşenlerimizi içe aktarmak için kullanacağız. Figma'nın sağ üst köşesindeki Paylaş düğmesini tıklayın. Açılan iletişim kutusunda Bağlantıyı Kopyala'yı tıklayın.

   

2. Android Studio'da HelloNews projesine geçin. Android Studio menü çubuğundan Dosya > Yeni > Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneğine gidin.

   

3. Figma dosyanızın URL'sini yapıştırın ve İleri'yi tıklayın.

   

   

   talimatlarını tekrar edin.
   1. Dosyanın alınması tamamlandığında (bu işlem biraz zaman alabilir) Son'u tıklayın.

   

4. Projenizi derlemek için simgesini tıklayın. Bu işlem bir dakika kadar sürebilir.

   

Uygulama ve bileşeni önizle

1. Android görünümünde app/java/com/example/hellonews/ui/home/HomeScreen.kt uygulamasını açtığınızda, çeşitli haber makalelerini düz metin biçiminde, basılı haberlerin üzerinde ise sesli haberlerin olduğu bir önizleme görürsünüz.

   

2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt uygulamasını açın. Bu, Figma bileşenimiz için oluşturulan Jetpack Compose kodudur. Önizlemeden, NewsCard bileşeninin üç varyantının Figma'dan koda çevrildiğini görebiliriz. Şimdi, kodu daha yakından inceleyelim.

   

3. View sıralaması, bu bileşen için hangi varyantın kullanılacağını seçmemize olanak tanır. Sıralama adı ve değerleri, Figma bileşenimizin varyantlarından türetilmiştir. Bu bilgi, NewsCardcomposable'mizdeki view parametresinde kullanılır.

   

4. NewsCard composable, kullanıcı arayüzü paketinden oluşturulmuştur. Bu öğe, haber kartının varyantını başlatılacak şekilde ayarlayan View türünde bir parametre içerir.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

Sıradaki

Henüz NewsCard'ı kullanmaya hazır değiliz. Bileşen farklı haberlerin nasıl görüntüleneceğini bilemez, sadece Figma'ya sabit bir şekilde kodlanmış olan bir haberi görür. Yani bileşeni şimdi eklersek elde ettiğimiz tek şey aynı haberin tekrarlanmasıdır. NewsCard'ın hangi bölümlerinin dinamik verilerle doldurulması gerektiğini belirtebileceğimiz bir yönteme ihtiyacımız vardır.

İçerik Parametreleri

Bu bölümde, içerik parametrelerini NewsCard bileşenine ekleyeceğiz.

Sizin için önerilenler

• Not: Bağlantı metni JavaScript kapalıyken görüntülenir
• İçerik parametreleri
• Kaydırma
• Görünümler'de Oluşturma Özelliğini Kullanma