Figma için Adapty eklentisi, tasarım dosyanızdaki frame’leri bir flow’a dönüştürür. Figma’da frame’leri seçin, Adapty’ye gönderin ve içe aktarma işlemi, flow builder’da diğerleri gibi düzenleyebileceğiniz bir taslak flow oluşturur.

İçe aktarma nasıl çalışır

Eklenti, seçili Figma frame’lerini okur ve bunları Adapty’ye yükler; Adapty bu frame’leri yeni bir taslak flow’un ekranlarına dönüştürür. Eklenti Figma dosyanızda hiçbir değişiklik yapmaz ve siz Export to Adapty düğmesine tıklayana kadar Figma’dan hiçbir şey çıkmaz. Sonuç tasarımınıza benzer ve temel bir flow olarak çalışır: düğmeler bir sonraki ekrana yönlendirir, quiz seçenekleri seçilebilir ve paywall ürünlerinizi bağlamanız için hazırdır.

Manüel olarak yapmanız gerekebilecek düzenlemeler hakkında bilgi edinmek için İçe aktarma sınırlamaları bölümüne bakın.

Başlamadan önce

Bir tasarımı içe aktarmak için şunlara ihtiyacınız var:

• Bir Figma tasarım dosyası: Eklenti yalnızca tasarım dosyalarında çalışır. FigJam panoları ve Figma Slides desteklenmez.
• Dosya üzerinde düzenleme erişimi: Eklenti, yalnızca görüntüleme iznine sahip olduğunuz bir dosyada çalışamaz. Kendi taslak dosyalarınız bu iş için idealdir.
• Adapty’de bir uygulama ve flow düzenleme yetkisi: İçe aktarma işlemi, flow’u uygulamalarınızdan birinin içinde oluşturur. Hedef Adapty uygulamasındaki flow’ları düzenleyebildiğinizden emin olun.

1. Eklentiyi yükleyin

Eklentiyi yüklemek için:

1. Import to Adapty eklenti sayfasını açın.
2. Save düğmesine tıklayın. Eklenti artık Figma’nın Plugins menüsünde görünür.
   

Figma yayımlanan eklentileri otomatik olarak günceller, bu yüzden her zaman en güncel sürümü çalıştırırsınız.

2. Tasarımınızı Adapty’ye gönderin

Ekranları Adapty’ye göndermek için:

1. Figma’da içe aktarmak istediğiniz frame’leri seçin. Bir dizi ekranı birden göndermek için birden fazlasını aynı anda seçin.
2. Plugins > Import to Adapty seçeneğine gidin.
3. Eklentinin listelediği seçimi gözden geçirin, ardından Export to Adapty düğmesine tıklayın.
4. Open in Adapty düğmesine tıklayın.

Eklenti, seçilen öğenin adını gösterir ve ortaya çıkacak ekran sayısını sayar. Devam etmeden önce onaylayın.

Yükleme tamamlandığında, eklenti Done ekranını gösterir. Devam etmek için:

1. Adapty’ye giriş yapın. İçe aktarma bağlantısını kimlik doğrulaması yapılmamış bir tarayıcıda açarsanız, içe aktarma çalışmaz.
2. İçe aktarma bağlantısını bir tarayıcıda açın:
   • Varsayılan tarayıcınızda içe aktarmayı açmak için Open in Adapty’ye tıklayın
   • Bağlantıyı panonuza kopyalamak için Copy link’e tıklayın ve içe aktarmayı farklı bir tarayıcı veya profilde başlatın.

Çerçeveler ekranlara nasıl dönüşür

Ne seçtiğiniz, kaç ekran elde edeceğinizi belirler:

• Birkaç çerçeve: Her çerçeve ayrı bir ekran olur.
• Bir bölüm: Bölümün içindeki her çerçeve bir ekran olur.
• Tek bir çerçeve: İçinde başka çerçeveler barındırsa bile tüm çerçeve tek bir ekran olur. Bu iç çerçeveleri ayrı ekranlar olarak içe aktarmak istiyorsanız Split into separate screens seçeneğini etkinleştirin.

Ekranlar, Figma’nın Layers (Katmanlar) panelindeki çerçevelerin sırasını takip eder; bu sıra, tuval üzerindeki konumlarına veya tıklama sıranıza göre değil, aşağıdan yukarıya doğru belirlenir. Gezinme de aynı sırayı izler; bu nedenle dışa aktarmadan önce çerçeveleri Layers panelinde düzenleyin ya da daha sonra builder’da ekranları yeniden sıralayın. Tek tek çerçeveler veya bir bölüm seçin; tüm sayfayı seçmeyin. Aksi takdirde o sayfadaki diğer tüm çerçeveleri de içe aktarmış olursunuz.

Dışa aktarma ayarları

Dışa aktarmanın neleri kapsayacağını değiştirmek için Customize export seçeneğine tıklayın:

• Export images: Görsel ve fotoğraf öğelerini dahil eder. Varsayılan olarak açıktır.
• Image resolution: Görselleri 1×, 2× veya 3× çözünürlükte dışa aktarır. Daha yüksek çözünürlük, keskinliği ve dosya boyutunu artırır. Varsayılan olarak 2בtir.
• Split into separate screens: Seçiminizdeki her kareyi ayrı bir ekran olarak içe aktarır. Varsayılan olarak kapalıdır.

3. Adapty’de içe aktarımı tamamlayın

Open in Adapty, Adapty Kontrol Paneli’nde bir tarayıcı sekmesi açar. Dönüştürme işlemi Adapty’nin sunucularında gerçekleşir; sekme ilerlemeyi gösterir ve sonunda flow’u oluşturur.

1. Bu flow’un ait olduğu uygulamayı seçin. Seçim yaptığınız anda dönüştürme başlar.
2. İçe aktarım tamamlanana kadar sekmeyi açık tutun (birkaç dakika sürebilir). Sekmeyi erken kapatırsanız, devam etmek için aynı bağlantıyı tekrar açın.

Adapty ardından tasarımı dönüştürür ve ilerleme durumunu gösterir.

Tamamlanan flow, flow builder’da taslak olarak açılır; Figma dosyasının adını alır ve her ekrana açıklayıcı bir isim verilir. Adapty, tasarımın gözden geçirilmesi gereken bölümlerini size bildirir.

İçe Aktarma Sınırlamaları

İçe aktarma işlemi, tasarımınızın görünümünü yeniden oluşturur ve temel öğeleri bağlar: gezinme, seçilebilir gruplar, giriş alanları ve satın alma işlemleri. Tasarımın şu bölümleri aktarılamaz:

• Ürünler: İçe aktarma işlemi ürün kartları oluşturur, satın alma eylemleri ekler ve ürün değişkenleri için yer tutucular yerleştirir. Gerçek ürünlerinizi kendiniz bağlamanız ve yer tutucuları değiştirmeniz gerekir. Bkz. Satın almaları ayarlama.
• Yazı tipleri: İçe aktarma işlemi metninize herhangi bir yazı tipi atamaz. Yazı tipinizi geri yüklemek için yazı tipi dosyasını yükleyin ve etkilenen metin için seçin.
• Videolar: Bir video, yer tutucu olarak dışa aktarılır. Videoyu daha sonra oluşturucuda ekleyin.
• Gizli katmanlar: Gizli bir katman dışa aktarılmaz.

Bir dışa aktarma en fazla 50 ekran ve 20 MB tasarım verisi içerir. Bu boyutu en çok etkileyen şey görsel çözünürlüğüdür; büyük bir dışa aktarımı küçültmek için Image resolution değerini 1× olarak ayarlayın.

Her dışa aktarma tek bir flow üretir. Aynı tasarımı ikinci kez içe aktarmak için Figma’dan tekrar dışa aktarmanız gerekir.

İçe aktarma bağlantısı, dışa aktarmanın ardından bir saat boyunca geçerlidir. İçe aktarma işlemini tek seferde tamamlayın; aksi hâlde baştan başlamanız gerekir.

Sorun Giderme

Dışa aktarma hataları

Mesaj	Ne yapmalı
Too many screens to export	Seçiminizi 50 ekran veya daha az içeren küçük gruplar halinde bölün.
Export data is too large	Image resolution değerini düşürün veya ekranlarınızdaki katman sayısını azaltın.
This frame is too large to export	Tasarımın daha küçük bir bölümünü dışa aktarın.
Upload didn’t complete	Yükleme sırasında tasarım değişti. Tekrar dışa aktarın.
This import link has expired	İçe aktarma bağlantısı bir saat geçerlidir. Tasarımı Figma’dan tekrar dışa aktarın.
This design was already imported	Bu dışa aktarma işlemi zaten bir flow oluşturdu. Tasarımı Figma’dan tekrar dışa aktarın.

Bir içe aktarmadan sonra

Ne Görürsünüz	Neden ve Çözüm
Bir ekran soluk görünüyor, sanki üzerinde bir sis var	Arka plan görseli, içeriğin üstüne sıradan bir öğe olarak aktarılmış. Onu ekranın geri kalanının arkasına taşıyın.
Products paneli boş ve fiyatlar {{figma_import_…}} yer tutucuları gösteriyor	İçe aktarma ürünleri bağlamaz. Ürünlerinizi Products panelinde ekleyin, her ürün kartında ve satın alma eyleminde seçin ve yer tutucuların yerine gerçek değerleri yazın.
Ekranlar sırası dışında ya da düğmeler yanlış ekranı açıyor	Ekranlar ve gezinti, Figma’nın Layers panelindeki çerçeve sırasını izler. Oluşturucuda ekranları yeniden sıralayın ve her düğmenin Navigate to screen eylemini kontrol edin.
Bir görsel eksik, yalnızca arka planı kalmış	Katman bir videoydu, gizliydi ya da bir şekil işlemiyle oluşturulmuştu. Görseli oluşturucuda değiştirin.
Tek seçimli bir grupta iki seçenek aynı anda seçili görünüyor	Varsayılan seçeneğin seçili olmayan durumu doğru stillere sahip değil. Stilleri elle düzeltin.
Bir geri sayım sabit bir süre gösteriyor ve hiç saymıyor	Geri sayım metin olarak aktarılmış. Onu bir geri sayım zamanlayıcısı ile değiştirin.
Yazı tipi denetimi Select font yazısını gösteriyor	Yazı tipi oluşturucuda mevcut değil. Yazı tipi dosyasını yükleyin ve seçin.

Sonraki adımlar

İçe aktarılan flow taslak halindedir ve kullanıcılara sunulmaz. Flow’u builder’da geliştirin ve yayınlamak için aşağıdaki adımları izleyin:

1. Flow’u kaydedin ve yayınlayın.
2. Flow’u gerçek bir cihazda önizleyin.
3. Bir flow placement’ı oluşturun ve flow’u buna ekleyin.
4. Uygulamanızda Adapty SDK v4.0 veya sonraki bir sürümle bu placement’ı çekin. Daha eski SDK sürümleri flow’ları render edemez.