Tasarım güncellemeleri yapma ve yayma

Bu bölümde, Figma'da bir bileşeni nasıl değiştireceğinizi (bu örnekte metnin biçimlendirmesini değiştireceğinizi) ve değişikliklerin, önceki projenizin üzerine koyarak değişikliklerin Android Studio'daki kod tabanına nasıl yayıldığını göreceksiniz.

Öncesi ve sonrası karşılaştırması

Figma'daki değişiklikler

Figma bileşeninde bir güncelleme yapalım. Figma dosyanıza geri dönün:

  1. Başlık metin katmanını seçin. Metin bölümünde, stili Kalın olarak değiştirin.

    Figma’da seçili ve kalın yazılmış başlık metni

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

Şimdi, güncellenen bileşeni kod tabanınıza entegre edin. Geliştiricilerin, bileşeninizin yeni sürümünü kullandığından emin olmak için sürüm kaydetme adımlarını tekrarlayın.

  1. Açık değilse Figma Relay eklentisini açın.

  2. Geliştiriciyle paylaş'ı tıklayın.

    Menüdeki Sürüm geçmişine kaydet seçeneği
  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.

    Menüdeki Sürüm geçmişine kaydet seçeneği
  4. Yeni bağlantıyı panoya kopyalamak için Mac'te CMD-L veya Windows'da klavyede CTRL-L tuşlarına basın.

Bileşen kodunu güncelleme

Şimdi bileşeni tekrar içe aktaralım:

  1. 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ıp Kullanıcı Arayüzü Paketini Güncelle'yi seçin.

    İçerik menüsünde Kullanıcı Arayüzü Paketi seçeneğini güncelleme

    Sağ alt köşedeki yükleme çubuğunun tamamlanmasını bekleyin:

    Android Studio yükleme çubuğu
  2. Projenizi derlemek için Proje Yap düğmesi simgesini tıklayın ve app/java/com/example/hellofigma/MainActivity.kt önizlemesinde güncellenmiş bileşeni inceleyin. Metin artık kalın yazılmıştır.

    Araç çubuğundaki oluştur düğmesi
    Bileşenin önizlemesi
  3. Aynı güncellemeleri emülatörde görmek için uygulamayı çalıştırın.

    Araç çubuğundaki çalıştır düğmesi
    Emülatörde uygulama önizlemesi

Sonraki adım

Bir tasarımı güncellediğimize ve ortaya çıkan kodun nasıl güncellendiğini gördüğümüze göre, dikkatimizi bileşenlerimizde değişken verilere olanak tanıyan içerik parametreleriyle tasarımımıza not eklemeye yönlendirebiliriz.