Figma → Flutter (DartPad ile)
Codigma artık Codigma IDE’nin içinde DartPad tarzı bir önizleme destekliyor. Yani Figma’daki bir ekranı alıp, Flutter uygulaması gibi hızlıca çalışır halde görebiliyorsun. Bu rehber, temiz sonuç almak ve kafayı yemeden dene-gör yapmak için en pratik yolu anlatıyor.
Başlamadan önce
📖 Çok işine yarayacak kısa rehber
Export kalitesi, Figma’daki yapına bağlı. Daha okumadıysan önce şuradan başla: How to Get the Best Out of Codigma’s Figma Plugin. Auto Layout, isimlendirme ve neyi seçmen gerektiğini anlatıyor. Küçük dokunuşlar ama farkı büyük. Rehberi oku →
Kısaca: Codigma senin niyetini “tahmin etmiyor”. Layer’larını ve layout kurallarını okuyor. Temiz bir Figma dosyası, genelde temiz bir Flutter çıktısı demek.
“DartPad ile Figma → Flutter” ne demek?
Normalde “tasarımdan Flutter’a” araçları kod üretir, sonra onu bir yerde çalıştırman gerekir. Codigma’daki DartPad tarzı önizleme ile UI’ı Codigma’nın içinde çalışır halde görebilirsin. Bu sayede gerçek projeye entegre etmeden önce layout, boşluklar ve genel görünümü hızlıca kontrol edersin.
Şöyle düşün: export → önizle → düzelt → tekrar önizle. Sürekli araç değiştirip vakit kaybetmek yerine, dakikalar içinde geri bildirim alırsın.
Başlangıç (basit akış)
En iyi sonuçlar, odağı dar tutup tekrar tekrar aynı şekilde export aldığında geliyor. Burada “tek seferde bir ekran” en tatlı nokta.
Önerilen Akış
- Figma’da tek bir ekran seç (tek frame / tek sayfa ekranı).
- Codigma ile export al (Flutter seçeneği).
- Codigma içindeki DartPad önizlemeyi aç ve sonucu kontrol et.
- Bir şeyler oturmadıysa, daha küçük bir parça export et: yarım ekran, kart, header, liste elemanı.
- Asset’leri hafif tut (görselleri optimize et) ki önizleme hızlı açılsın ve stabil kalsın.
- Tekrar et: export → önizle → yapıyı azıcık düzelt → yeniden export.
💡 İpucu
Tüm ekran export’u “dağınık” geliyorsa, bununla boğuşma. Daha küçük bir widget seç (kart ya da bir section gibi), onu export et, üstüne koyarak ilerle.
Temiz bir önizleme için kritik noktalar
Çıktı daha temiz olur ve iki export arasında ne değiştiğini daha rahat görürsün.
Ekran karmaşıksa daha küçük bir bölüm export et (yarım ekran, header, kart, liste). Sınırlar net olunca kod da genelde daha temiz çıkar.
Büyük görseller önizlemeyi yavaşlatır. Daha küçük asset = daha hızlı render, daha az sürpriz.
Net frame’ler + tutarlı spacing, export’un layout kurallarını doğru eşleştirmesini kolaylaştırır.
DartPad önizleme hızlı kontrol için çok iyi. Sonrasında kodu gerçek Flutter projenize alıp devam edebilirsiniz.
Yaygın sorunlar (hızlı çözümler)
“Önizleme yavaş”
- Görselleri sıkıştır ve boyutlarını küçült.
- Mümkünse aşırı büyük arka plan görsellerinden 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’i ya da tam bir widget).
- Yarım ekran veya daha küçük widget export etmeyi dene.
- Figma’da spacing kurallarını temizle (tutarlı padding + gap en iyi çalışır).
“Daha birebir olsun istiyorum”
- Önce yapı taşlarından başla: kartlar, header’lar, butonlar, liste elemanları.
- Onlar oturduktan sonra ekranları birleştir.
SSS
Tüm sayfayı export etmem şart mı?
Hayır. Çoğu durumda tek seferde bir ekran export etmek daha iyi. Ekran ağırsa önce daha küçük parçalarla başla.
DartPad önizleme production için mi?
Bunu hızlı bir “görüntü doğru mu?” kontrolü gibi düşün. Asıl hedef, gerçek Flutter uygulamana almadan önce hızlıca iterasyon yapmak.
Kapanış
Codigma’nın IDE içindeki DartPad önizlemesi, “Figma → Flutter” sürecini ciddi şekilde hızlandırıyor. Tek seferde bir ekran export et, görselleri küçük tut, sonuç iyi değilse daha küçük bir parça seçip tekrar dene. Birkaç denemeden sonra tasarımını, Codigma’dan çıkmadan çalışan bir Flutter uygulaması gibi görebilirsin.
🎯 Sonraki Adım
Daha en baştan daha temiz export istiyorsan, önce şu rehbere göz at: How to Get the Best Out of Codigma’s Figma Plugin →