Figma’dan React Native’e (Expo Emülatör ile)
Codigma artık IDE içinde, Expo emülatör tarzı bir önizleme sunuyor. Yani Figma’daki bir ekranı alıp, dakikalar içinde React Native olarak çalışır halde görebilirsin. Bu yazıda “en az uğraşla en temiz sonucu” nasıl alırsın, onu anlatıyorum.
Başlamadan önce
📖 Çok işine yarayacak kısa rehber
Export kalitesi büyük ölçüde Figma dosyanın düzenine bağlı. Henüz okumadıysan şuradan başla: Codigma’nın Figma Eklentisinden En İyi Sonuç Nasıl Alınır?. Auto Layout, katman isimleri ve neyi seçmek gerektiği gibi küçük ama etkili detaylar var. Rehberi oku →
Kısacası: Codigma “niyetini tahmin etmiyor”. Katmanları ve yerleşim kurallarını okuyor. Figma düzenli olunca React Native çıktısı da genelde daha temiz oluyor.
“Expo Emülatör ile Figma’dan React Native’e” ne demek?
Normalde “tasarımdan React Native’e” araçları kodu üretir… ama sonra görmek için proje kurman, emülatör açman gerekir. Codigma’daki Expo tarzı önizleme sayesinde UI’ını doğrudan Codigma içinde çalıştırırsın. Entegrasyona girmeden önce yerleşimi, boşlukları ve genel hissi hızlıca kontrol etmek için çok pratik.
Mantık şu: export et → çalıştır → düzelt → tekrar çalıştır. Araçlar arasında gidip gelmeden, dakikalar içinde geri bildirim alırsın.
Hızlı başlangıç (basit akış)
En iyi sonuçlar, export’u küçük ve tekrarlanabilir tuttuğunda gelir. “Tek seferde tek ekran” genelde en sağlıklı yöntem.
Önerilen Akış
- Figma’da tek bir ekran seç (tek frame / tek ekran).
- Codigma ile export et (React Native seçeneğiyle).
- Codigma içindeki Expo önizlemeyi aç ve sonucu çalıştır.
- Bir şeyler ters görünüyorsa, daha küçük bir parça export et: yarım ekran, kart, header, liste item.
- Görselleri hafif tut (optimize et) ki önizleme hızlı açılsın ve stabil kalsın.
- Tekrar et: export → çalıştır → Figma düzenini iyileştir → tekrar export.
💡 İpucu
Tüm ekran export’u “dağınık” geliyorsa zorlamana gerek yok. Önce bir kart ya da küçük bir bölüm seç, onu export et; sonra üstüne ekleyerek ilerle.
Temiz önizleme için önemli noktalar
Çıktı daha temiz olur; değişiklikleri takip etmek de kolaylaşır.
Ekran karmaşıksa yarım ekran / header / kart / liste gibi bölümlere böl. Sınırlar net olunca kod da net çıkar.
Büyük görseller önizlemeyi yavaşlatır. Küçük asset = daha hızlı render, daha az sürpriz.
Net frame’ler ve tutarlı boşluklar, yerleşimin doğru map’lenmesini kolaylaştırır.
Expo önizleme hızlı UI kontrolü için harika. Sonrasında kodu gerçek React Native projenize taşıyabilirsin.
Sık görülen sorunlar (pratik çözümler)
“Önizleme yavaş”
- Görselleri sıkıştır ve boyutlarını küçült.
- Mümkünse ağır blur/gölge kombinasyonlarından kaçın.
- Önce daha küçük bir bölüm export etmeyi dene.
“Figma’daki gibi görünmüyor”
- Tam bir birim seçtiğinden emin ol (tam ekran frame ya da tam component).
- Yarım ekran veya daha küçük bir component export et.
- Figma’da boşluk kurallarını toparla (tutarlı padding + gap en iyi çalışır).
“Daha yakın bir eşleşme istiyorum”
- Önce temel parçaları düzelt: kartlar, header’lar, butonlar, liste item’ları.
- Parçalar iyi oturunca ekranları birleştir.
Sık Sorulan Sorular
Tüm sayfayı export etmem gerekir mi?
Hayır. Çoğu zaman tek ekran export etmek daha iyi. Ekran ağırsa önce küçük parçalarla başla.
Expo emülatör önizleme production için mi?
Bunu hızlı bir “görüntü doğru mu?” kontrolü gibi düşün. Gerçek projene taşımadan önce hızlıca deneme yapmanı sağlar.
Kapanış
Codigma’nın IDE içindeki Expo önizlemesi, “Figma’dan React Native’e” sürecini ciddi şekilde hızlandırıyor. Tek ekran export et, görselleri küçük tut; sonuç iyi değilse ekranın daha küçük bir bölümünü seçip tekrar dene. Birkaç turda, Codigma’dan çıkmadan tasarımını React Native uygulama gibi çalışır halde görebilirsin.
🎯 Sonraki Adım
Baştan daha temiz export almak ister misin? Şu rehberle başla: Codigma’nın Figma Eklentisinden En İyi Sonuç Nasıl Alınır? →