Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Tasarım ve Kod Arasındaki Kopukluk Neden Problem?
Şimdi şöyle bir düşün… Tasarımcı Figma’da harika bir ekran hazırlıyor. Geliştiriciye geliyor ve o da sıfırdan yeniden yazıyor.
Bu noktada şu sorun ortaya çıkıyor:
- Aynı component tekrar tekrar yazılıyor
- Tasarım ile kod birebir örtüşmüyor
- Her yeni feature’da yeniden uğraşılıyor
Aslında bu çok basit:
Eğer tasarım “sadece görsel” olarak kalırsa, geliştirici onu her seferinde yeniden üretmek zorunda kalır.
Yani şöyle düşün:
Bir blueprint (mimari çizim) var ama inşaatta her seferinde göz kararı bina yapıyorsun.
İşte problem tam olarak bu.
Design System’i Koda Taşımak: “Single Source of Truth”
Buradaki en kritik kavram:
Single Source of Truth (Tek Doğru Kaynak)
Bu ne demek?
Tüm renkler, fontlar, spacing değerleri, component kuralları tek bir yerde tanımlı.
Yani şöyle düşün:
Projede kullandığın tüm renkler bir dosyada tanımlı.
Bir renk değiştiğinde tüm sistem otomatik güncelleniyor.
Bu yapı genelde şöyle kuruluyor:
- Color tokens
- Typography
- Spacing
- Border & radius
Bunlar kod tarafında bir dosyada tutuluyor (örneğin: style-tokens.ts).
Bu noktada önemli olan şey:
👉 Figma’daki değerleri manuel kopyalamak değil,
👉 Otomatik olarak çekip kodlaştırmak
AI ile Style Guide Oluşturmak
Şimdi işin ilginç kısmı geliyor.
Eskiden bu süreç çok uzun sürüyordu.
Ama artık AI ile bu işi ciddi anlamda hızlandırabiliyorsun.
Nasıl?
- Figma’daki component library’yi veriyorsun
- AI’dan style guide oluşturmasını istiyorsun
- Tüm tasarım değerlerini otomatik çıkarıyor
Ortaya şu çıkıyor:
- Renk paleti
- Font yapısı
- Icon sistemi
- Kullanım kuralları
Yani şöyle düşün:
Bir junior developer’a “git tasarım sistemini yaz” demek yerine, bunu AI’ya yaptırıyorsun.
Component Library Oluşturmak
Style guide hazır. Şimdi sırada component’ler var.
Burada yapılan şey şu:
Her UI parçasını tek tek kodlamak yerine:
👉 Component olarak tanımlıyorsun
Örneğin:
- Button
- Card
- Input
- KPI Card
Ama önemli nokta şu:
Sadece görünüş değil, davranış da tanımlanıyor.
Yani şöyle düşün:
Hover olunca ne olacak?
Click olunca ne değişecek?
Disabled state nasıl görünecek?
Bunların hepsi kod içinde net şekilde tanımlanıyor.
AI ile Component Geliştirme Workflow’u
Burada çok kritik bir yaklaşım var:
Workflow tanımlamak
Yani AI’ya “git component yap” demiyorsun.
Adım adım nasıl yapacağını söylüyorsun.
Workflow şu şekilde ilerliyor:
- Figma’yı analiz et
- Component verisini çıkar
- Görsel kuralları incele
- Davranış kurallarını incele
- Component’i oluştur
- TypeScript ile implement et
- Tüm varyasyonları ekle
- Preview oluştur
- Design token’ları uygula
Yani şöyle düşün:
AI’ya sadece görev vermiyorsun, nasıl çalışacağını da öğretiyorsun.
Bu sayede:
- Daha doğru sonuç alıyorsun
- Tutarlı component’ler oluşuyor
Documentation (Dokümantasyon) Otomatik Üretimi
Her component için ayrıca bir doküman oluşturuluyor.
Bu dokümanda şunlar var:
- Hangi token’ları kullanıyor
- Nasıl çalışıyor
- Nasıl kullanılmalı
Yani şöyle düşün:
Yeni gelen bir developer, component’i anlamak için kodu okumak zorunda kalmıyor.
Direkt dokümandan öğreniyor.
Component’leri Birleştirip Feature Oluşturmak
Tek tek component’ler hazır.
Şimdi bunları bir araya getiriyorsun.
Bir ekran aslında şunlardan oluşur:
- Card
- Button
- Layout
- Input
Hepsi birer component.
AI’ya şu talimat veriliyor:
👉 “Bu ekranı oluştur ama sadece mevcut component’leri kullan”
Bu çok önemli.
Çünkü:
- Yeni UI uydurmuyor
- Mevcut sistem dışına çıkmıyor
Yani şöyle düşün:
LEGO parçaların var.
AI’ya “yeni parça üret” demiyorsun.
“Bu parçalarla ev yap” diyorsun.
Iteration: Küçük Hataları Düzeltmek
İlk çıktıda her şey mükemmel olmayabilir.
Örneğin:
- Spacing hatası
- Font size yanlış
- Alignment kayması
Ama bu çok normal.
Küçük prompt’larla düzeltilebiliyor.
Yani şöyle düşün:
İlk versiyon kaba taslak.
Sonrasında ince işçilik yapıyorsun.
Proje Hafızası Oluşturmak
Burada çoğu kişinin atladığı bir detay var:
👉 Context kaydetmek
Her yapılan işlemi bir dosyada tutuyorsun (context.md gibi).
Bu ne sağlıyor?
- Proje geçmişi kaybolmuyor
- AI her seferinde sıfırdan başlamıyor
- Tutarlılık korunuyor
Yani şöyle düşün:
AI’nın “proje hafızası” oluyor.
Özet
Tasarım ve geliştirme arasındaki en büyük problem, aynı şeyin tekrar tekrar üretilmesi. Bu problemi çözmenin yolu, tasarımı sadece görsel olarak bırakmamak ve doğrudan kod tarafında yaşayan bir sisteme dönüştürmekten geçiyor. Style guide ile başlayan bu süreç, component library ile devam ediyor ve en sonunda tüm ürünün bu sistem üzerinden inşa edilmesiyle tamamlanıyor. AI burada süreci hızlandıran bir araç haline geliyor ama asıl farkı yaratan şey, doğru workflow ve disiplinli bir yapı kurmak. Yani mesele sadece araç değil, yaklaşım.
Bu yazı “Figma’dan design system’i koda çevirme ve AI ile component geliştirme” videosundan ilham alınarak yazılmıştır.
