Tasarım varyantlarını kullanma

Figma'da, değişkenlerin farklı varyasyonlarını gruplandırmak için varyantlar kullanılır. aynı bileşeni (ör. farklı durumlar veya boyutlar) gösterir. Röle korundu bir bileşenin koda çevrildiğinde varyantlarını ifade eder. Bu bölümde, Relay'in tasarımlardaki varyantları nasıl ele aldığına bakalım.

Başlangıç noktası

Ağaç çeşitlerini içeren haber kartı

İlk olarak, üçlü Haber Kartı bileşenini içeren bir Figma dosyasıyla varyantlar:

  • hero-item, en önemli haber makalesidir
  • article-item tipik bir makale içindir
  • audio-item, okumak yerine dinlediğiniz bir makale içindir

Figma örneğini kopyala

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

  1. HelloNews.fig dosyasını bilgisayarınıza indirin.
  2. Figma'da dosya tarayıcısına gidin. Sol tarafta imlecin üzerine gelin Taslaklar. + simgesi görünür. + simgesini ve ardından İçe aktar'ı tıklayın. Yeni indirdiğiniz HelloNews.fig dosyasını seçin. Bu işlem 10 saniyeden bir dakikaya kadar değişebilir.

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

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

Relay for Figma eklentisi, bileşenimize fazladan bilgi ekler. Böylece, kodlarında bileşenimizi kullanacak geliştiricilarımızla çalışacaklar.

  1. Dosyanızda Relay for Figma eklentisini açın (menü çubuğunda: Eklentiler > Relay Figma için). Başlayın'ı tıklayın.
  2. Bileşeni seçin ve Kullanıcı Arayüzü Paketi Oluştur'u tıklayın.

    Eklentideki Kullanıcı Arayüzü Paketi oluştur düğmesi
  3. Kullanıcı Arayüzü Paketi seçiliyken özet kutusuna bir açıklama ekleyin. Örneğin, örnek: “Bir listeye ilişkin haber öğelerini görüntülemeyi amaçlayan haber kartı bileşeni”.

    Eklentideki özet kutusu

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

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

  1. Açık değilse Figma Relay eklentisini açın.
  2. Geliştiriciyle paylaş'ı tıklayın.
  3. Geliştiriciyle paylaş ekranından 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. Bu proje, haber makalelerini görüntüleyen bir uygulama içeriyor düz metin biçimindedir.

  1. Örnek HelloNews.zip dosyasını indirin.
  2. Sıkıştırılmış dosyayı açmak için dosyayı çift tıklayın. Bunu yaptığınızda adlı bir klasör oluşturulur. HelloNews. Dosyayı ana klasörünüze taşıyın.
  3. Android Studio'ya geri dönün. Dosya > Aç, evinize gidin klasörünün altındaki HelloNews'u seçin ve Open'ı (Aç) tıklayın.
  4. Projeyi açtığınızda, Android Studio size belirler. Projeye Güvenin'i tıklayın.

Android Studio'ya aktarma

Figma bileşenimizi projeye aktaralım.

  1. Figma'ya dönün ve Haber Kartı Eğiticisi Figma dosyasının URL'sini kopyalayın. Saat bileşenlerimizi içe aktarmak için bu URL'yi kullanın. Reklam öğesinin sağ üst köşesinde, Figma'da, Paylaş düğmesini tıklayın. Açılan iletişim kutusunda Bağlantıyı Kopyala.

    Dosya sekmesindeki Bağlantıyı Kopyala seçeneğini tıklayın
  2. Android Studio'daki HelloNews projesine geçin. Dosya > Yeni > İçe aktarma Kullanıcı Arayüzü Paketleri...'ni seçin.

    Dosya menüsü altındaki Kullanıcı Arayüzü Paketlerini İçe Aktar... seçeneği
  3. Figma dosyanızın URL'sini yapıştırın ve Next'i (İleri) tıklayın.

    Kullanıcı Arayüzü Paketlerini İçe Aktarma iletişim kutusu
    Anahtar zinciri sistem iletişim kutusu
    talimatları
    1. Dosyanın getirilmesi tamamlandığında (bu işlem biraz zaman alabilir) Bitir.
    Bileşenin önizlemesi
  4. Sonraki slayta geçin Proje Oluştur düğmesi. bahsedeceğiz. Bu işlem bir dakika kadar sürebilir.

    Araç çubuğundaki oluştur düğmesi

Uygulamayı önizle ve bileşen

  1. Android görünümünde açın app/java/com/example/hellonews/ui/home/HomeScreen.kt, uygulamanın önizlemesini görürsünüz. Bu önizlemede, düz metin biçimindedir.

    Uygulamanın Önizlemesi
  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. Şuradan: NewsCard bileşeninin üç varyantının çevrilmiştir. Koda daha yakından bakalım.

    Haber Kartı bileşeninin önizlemesi
  3. View sıralaması, bu bileşen için kullanılacak varyantı seçmemize olanak tanır. Sıralama adı ve değerleri, Figma bileşeni. Bu değer, NewsCard'ımızdaki view parametresinde kullanılır. composable'dan bahsetmek istiyorum.

    Figma'daki varyantlar ve karşılık gelen görünüm sıralaması
  4. NewsCard composable, kullanıcı arayüzü paketinden oluşturuldu. Bir View türündeki parametre. Bu parametre, haber kartının varyantını örneklendiririz.

    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, öğenin nasıl Figma'da sabit kodlu olarak yalnızca aynı haber yazısını görüntüleyebilirsiniz. Örneğin, bileşeni ekleyecektik. Elde ettiğimiz tek şey aynı haber tekrarlanır. NewsCard'ın hangi bölümlerinin doldurulması gerektiğini belirtmek için bir yönteme ihtiyacımız var dinamik verilerle.

İçerik Parametreleri

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

ziyaret edin.