Figma’dan Angular’a
Tasarımdan Angular arayüze hızlı geçmek istiyorsun ama projeyi de “çorba” yapmak istemiyor musun? Bu rehberde Codigma’nın Angular (TypeScript) export’unu temiz bir şekilde nasıl kullanacağını anlatıyoruz: standalone component’ler, okunabilir template’ler ve Reactive Forms + RxJS ile uyumlu bir akış.
Başlamadan önce
📖 Önce bunu oku
Henüz okumadıysan, önce şuradan başla: Codigma’nın Figma Eklentisinden En İyi Verimi Alma Rehberi. Auto Layout, isimlendirme ve doğru seçim (selection) konularını hızlıca anlatıyor — export kalitesini direkt etkiliyor. Rehberi oku →
Kısacası: Codigma “niyetini tahmin etmeye” çalışmaz, Figma’daki yapını okur. Figma dosyan düzenliyse, Angular çıktısı da genelde düzenli olur.
Giriş
Angular ekipleri iki şeyi aynı anda ister: UI’ı hızlı çıkarmak ve kodu okunabilir tutmak. “Figma’dan Angular’a” araçları bazen ilkini çözer ama ikincisini zorlaştırır. Codigma’nın hedefi ikisini de korumak: hızlı export + gerçekten geliştirilebilir, temiz bir başlangıç.
Codigma’nın Angular export’u TypeScript-odaklı gelir, standalone component üretir
ve modern Angular projeleriyle uyumlu bir yapı verir. Figma’dan UI bloklarını üretip, sonra bunları
kendi uygulama düzenine rahatça bağlayabilirsin: servisler, observable’lar ve form modelleri.
Nasıl başlarsın?
Angular projelerinde iyi çalışan, basit bir akış var. Özellikle “tek parça koca ekran” yerine, tekrar kullanılabilir UI üretmek istiyorsan bu yol çok işine yarar.
Önerilen Akış
- Figma’da gerçek bir parça seç: bir card, header, modal, list item ya da tek bir section.
- Auto Layout’u tutarlı yap: parent padding + gap kullan, rastgele el ayarı offset’lerden kaçın.
- Katmanları net isimlendir:
ButtonPrimary,ProductCard,PriceRow(Frame 123 gibi isimleri bırak). - Codigma ile export et (Angular / TypeScript seçeneğiyle).
- Çıktıyı Angular projenin içine al ve standalone component olarak kullan.
- Sonra iş mantığını bağla: input/output, Reactive Forms, RxJS stream’leri, servisler.
💡 Küçük ipucu
Ürün arayüzü yapıyorsan, önce component export et (buton, input, card), sonra section’lara geç. En son, işler oturunca tam sayfa export etmek daha sağlıklı.
Öne çıkanlar (Angular’cıların genelde önemsediği şeyler)
UI’ı standalone Angular component olarak export edebilirsin. Modern Angular kurulumuna ekstra boilerplate eklemeden rahatça tak-çalıştır.
Dosya yapısı temiz, isimlendirme tahmin edilebilir. Çıktı “generic HTML dump” gibi değil, gerçekten Angular hissi verir.
Figma’da frame’ler ve Auto Layout kuralları netse, template tarafı da kolay okunur ve kolay düzenlenir.
Export sana sağlam bir UI tabanı verir. Üzerine FormGroup, FormControl ve validator’ları bağlamak daha kolay olur.
Observable tabanlı akışlara (async pipe, view model, stream’ler) zorlanmadan uyum sağlar. Markup ile güreşmek zorunda kalmazsın.
Export edilen UI’ı “gerçek” Angular mantığına temizce bağlamak
1) Export’u önce “presentational” düşün
En sağlıklı yaklaşım şu: export edilen component’leri önce sadece UI olarak kullan.
Yani business logic yok, API çağrısı yok, gizli yan etki yok.
Sonra bunları @Input()/@Output() ile ya da küçük bir view-model katmanıyla bağla.
2) Input/Output’u erken ekle (template temiz kalır)
UI Angular’a girince, hızlıca “dinamik olan ne?” sorusunu cevapla.
Mesela: title yazısı, imageUrl, isSelected, onClick.
Böylece template sade kalır ve component tekrar kullanılabilir hale gelir.
3) Form varsa Reactive Forms ile bağla
Export ettiğin UI’da input’lar varsa, genelde en temiz yol FormGroup ile ilerlemek.
Validasyon, state takibi ve güncellemeler daha kontrollü olur.
Codigma’nın verdiği temiz yapı sayesinde binding’leri eklemek kolaylaşır.
4) Data tarafında RxJS view model yaklaşımı kullan
Angular projeleri, template tarafında çoğunlukla observable tüketince daha sade kalır.
Stream’leri component class’ında (ya da facade/service’de) tut, template’te async pipe ile render et.
Export edilen yapı ne kadar düzenliyse, bu düzeni korumak o kadar kolay olur.
İyi pratikler (çıktı okunabilir kalsın)
Doğru “boyutta” UI export et
- En iyi: component seviyesinde parçalar (buton, card, list item, modal)
- İyi: section’lar (hero, pricing, feature list)
- Dikkatli kullan: tam ekran (sadece layout oturduysa)
Basit bir isimlendirme kuralı koy
- Frame’leri amacına göre isimlendir:
ProductCard,CheckoutSummary,TopNav - Layer’ları rolüne göre isimlendir:
Title,Subtitle,PrimaryButton - Tekrar eden bir şey varsa, Figma’da component yap — bir kez export et, Angular’da tekrar kullan.
Layout kurallarıyla kavga etme
- Çoğu container için Auto Layout + padding + gap kullan.
- Aynı frame içinde “manuel konumlandırma” ile Auto Layout’u karıştırma.
- Boşlukları tutarlı tut (8/16/24 gibi basit bir sistem çok iyi çalışır).
Davranışı Angular yönetsin
Export sana iskelet ve stil verir. Davranışı Angular verir: form validasyonu, async data, state, routing, yetkilendirme. Bu ayrımı korursan kod tabanı uzun vadede rahat eder.
Sık sorulanlar
"Tüm uygulama layout’unu export edebilir miyim?"
Evet — ama çoğu zaman önce tekrar eden parçaları export edip (component, section), sonra sayfaları bunlarla birleştirmek daha iyi sonuç verir. Bakımı da daha kolay olur.
"Benim Angular mimarimle birebir aynı çıkar mı?"
Codigma’yı hızlı bir UI başlangıç noktası gibi düşün. State ve data tarafında yine kendi yaklaşımını uygularsın. Kazanç şu: her şeyi elle yazmak yerine, temiz ve okunabilir bir UI iskeletiyle başlarsın.
Kapanış
Figma’dan Angular’a geçiş hem hızlı hem de temiz olabilir — yeter ki doğru parçaları export et ve Figma yapını tutarlı tut. Küçük başla, isimleri netleştir, Auto Layout’tan faydalan ve export’u Angular’da Reactive Forms + RxJS ile kolayca bağlayacağın UI blokları gibi düşün.
🎯 Sonraki Adım
Export kalitesi hemen artsın istiyorsan, ilk rehberi atlama: Codigma’nın Figma Eklentisinden En İyi Verimi Alma Rehberi →