Codigma Figma Eklentisinden En İyi Verimi Alma
Açık konuşalım: Codigma her tasarımı hemen kodlayamaz. Codigma Figma’daki düzeni okuyabiliyor. Tasarım ne kadar derli topluysa, çıkan sonuç da o kadar düzgün oluyor. Bu yazıda, export kalitesini hızlıca yükselten küçük ama etkili alışkanlıkları toparladım.
1) Önce mantık: Codigma aslında neye bakıyor?
En klasik hata: “Zaten anlar ya…” demek. Codigma sizin niyetinizi tahmin etmiyor; Figma’daki yapıyı okuyor. Frame’ler mantıklıysa, spacing tutarlıysa, kurallar karışmamışsa sonuç genelde tatlı tatlı geliyor.
Çıktı dağınıksa çoğu zaman sebep şunlar: bir yerde Auto Layout, bir yerde absolute; boşluklar “göz kararı”; layer’lar düzgün bir container’a oturmamış.
Mini test
Dosyayı ekipten biri açsa “hemen anladım” der mi? Diyorsa, doğru yoldasınız.
2) Auto Layout: farkı yaratan kısım
Auto Layout, export’ı hızlı toparlar. Çünkü spacing, hizalama, padding gibi şeyler “kural” olur. Kural net olunca kod tarafı da daha az sürpriz çıkarır.
Günlük kullanım için net ayarlar
- Container’ları Auto Layout yapın (tek child olsa bile).
- Boşluğu parent padding ile verin (çocukları itmeyin).
- Tek bir spacing dili seçin: 8 / 16 / 24 çoğu işte yeter.
- Fill / Hug’ı bilinçli seçin: uzasın = Fill, içeriğe göre dursun = Hug.
- Aynı blokta iki kural karıştırmayın (yarısı manual, yarısı Auto Layout = sorun).
Genelde en temiz çalışan kurgu
- Sayfa (Fill) →
- Section (Auto Layout, padding + gap) →
- Component (Auto Layout, net Fill/Hug)
İpucu
Responsive istiyorsanız, dış frame çoğu zaman Fill olur. İçeridekiler de Hug / esneyen kurgu ile oturur. Arada bırakmayın.
3) İsimler: “Frame 123” bırakmayalım
İsimlendirme “sonra bakarım” diye erteleniyor ama export sonrası okunabilirliği direkt etkiliyor. Yarın öbür gün o çıktıyı siz de okuyacaksınız, ekip de okuyacak.
Şunları yapın
- Frame’i işine göre adlandırın: Header, PricingCard, FeatureList, Sidebar.
- Layer’ı rolüne göre adlandırın: Title, Subtitle, Icon, PrimaryButton.
- “Group 9” gibi şeyleri temizleyin: export edeceğiniz yerde kalmasın.
- Gereksiz wrapper’ları azaltın: frame içinde frame içinde frame şişirir.
Basit kural
“Bu frame niye var?” sorusuna tek cümlede cevap yoksa, çoğu zaman o frame’i kaldırabilirsiniz.
4) Component/Variant: hız + tutarlılık
Tek ekranda her şey idare eder. Ama ürün büyüyünce asıl mesele tutarlılık. O yüzden önce tekrar eden parçaları component yapınca iş çok rahatlıyor.
Component yapmanız iyi olur
- Buton (primary/secondary/disabled)
- Input (default/error/disabled)
- Kart (ürün kartı, feature kartı)
- Navigasyon (tab, sidebar item, top bar)
Variant nerede hayat kurtarır?
Hover/active/disabled gibi durumları variant ile tutunca “bu hangi state?” muhabbeti azalır. Boyutlar (sm/md/lg) için de aynı mantık.
Mini tasarım sistemi (abartmadan)
- Başlık/body için birkaç text style
- Primary/neutral/background/border için color style
- 8/16/24 spacing alışkanlığı
- Tekrar eden her şey component
5) Figma’da neyi seçmeli, neyi seçmemeli?
Seçtiğiniz şey, Codigma’ya “bunu üret” demek. En iyi sonuç genelde tek parça, anlamlı bir blok seçince geliyor.
İyi seçimler
- Tam ekran frame’i (ekran oturduysa)
- Tek bir component (buton, kart, modal, navbar)
- Tek bir section (hero, pricing, feature list) — kendi başına anlamlı
Genelde sorun çıkaranlar
- Yarım seçim (container’sız text, kartın yarısı vs.)
- Üst üste binen layer’lar (tamamen manual konumla duranlar)
- Gizli layer’lar (export içinde “dursun şimdilik” dedikleriniz)
- Sınırı net olmayan text (hizayı boşlukla tutanlar)
İpucu
Emin değilseniz, tek tek layer seçmek yerine o bloğun parent frame’ini seçin.
6) Hızlı akış: 6 adım
En hızlı yöntem şu: export al → bak → düzelt → tekrar export al. “İlk seferde mükemmel” peşine düşmeyin.
- Tek parça seçin (component/section/ekran) ve önce onu düzeltin.
- Auto Layout + padding + gap ayarlarını toparlayın.
- İsimleri düzeltin (Frame 123 değil, Header gibi).
- Export alın ve “göze batan” yeri not edin.
- Kodda yamamak yerine Figma yapısını düzeltip yeniden export alın.
- Ölçekleyin: component → section → sayfa.
İpucu
Figma’yı sonsuza kadar cilalamayın. 1 tur temizlik, 1 tur export, sonra ihtiyaç kadar devam.
7) En sık sorunlar + hızlı çözümler
“Boşluklar kaydı / spacing farklı çıktı”
- Boşluk parent padding ile mi geliyor? (değilse oradan başlayın)
- Gap değerleri tutarlı mı? (8/16/24 gibi)
“Bazı şeyler esnemiyor / uzamıyor”
- Doğru layer’da Fill mi var, yoksa Hug mı kalmış?
- Parent frame’in genişlik kuralı net mi? (fixed/fill/constraint)
“Çok fazla iç içe geçmiş çıktı”
- Layout’a katkısı olmayan wrapper’ları azaltın.
- Group yerine frame + Auto Layout kullanın.
“Kod okunmuyor”
- Header/Card/Title/Button gibi isimlendirme yapın.
- Tekrarlanan yerleri component/variant’a çevirin, yeniden export alın.
Sık Sorulan Sorular
Tüm ekranı mı export etsem, yoksa parça parça mı?
İkisi de olur. Ekran oturduysa komple export edebilirsiniz. Hızlı ilerlemek ve tekrar kullanmak için header, kart, modal gibi parçaları ayrı ayrı export etmek genelde daha rahat.
Auto Layout kullanmadan da temiz çıktı alabilir miyim?
Alırsınız ama Auto Layout işi epey rahatlatır. Boşluklar ve responsive davranış daha stabil olur. Fill/Hug ayarları yerindeyse çıktı da çoğu zaman daha toplu gelir.
İkon ve görsellerde nelere dikkat edeyim?
İkonları mümkünse vektör tutun. Görselleri net bir frame’in içine alın. Overlap’ten kaçının; hizalı ve düzenliyse export daha sorunsuz olur.
Neden export sonrası görüntü Figma’dakiyle birebir aynı olmuyor?
Genelde sebep karışık layout (biraz Auto Layout, biraz absolute), tutarsız padding/spacing veya sınırı net olmayan text layer’ları. Frame yapısını toparlayıp Fill/Hug’ı düzeltince çoğu sorun çözülür.
Tüm arayüzde çıktıyı nasıl daha tutarlı yaparım?
Küçük bir tasarım sistemi kurun: ortak text style’lar, color style’lar, 8/16/24 spacing ve tekrar eden parçaları component yapın. Figma’daki düzen, koda direkt yansır.
Hazırsanız deneyelim
Her yerde kullandığınız tek bir parçadan başlayın (mesela bir buton ya da kart). Bir kez toparlayın, export alın. Fark hemen belli olur. Sonra kalan ekranları toplamak çok daha kolay gelir.
Benzer içerikler için Blog’a göz at.