Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Figma'dan Koda: Dev Mode, Auto Layout'tan Flexbox'a, Variables'tan Token'a ve Figma MCP ile AI Destekli Handoff
Figma'dan koda geçişte sayıları değil niyeti taşımak gerekir: Auto Layout'un FILL ve HUG ayarları Flexbox'a, Variables DTCG token'larına, tasarım component'leri Code Connect ile kod component'lerine bağlanır. Bookstore'un sepet barını Auto Layout JSON'undan CSS'e çeviriyor, kopyalanmış piksellerin 768 pikselde ve dark mode'da bozulduğunu ölçüyor, Figma variable'larıyla token'lar arasındaki farkı yakalıyor ve Figma MCP server'ın plan koşullarını resmî dokümantasyondan anlatıyoruz.
Design System Nedir? Design Token'lar (DTCG 2025.10), Component Library ve Dokümantasyon
Design system; token'lar, component'ler, kullanım kuralları ve yönetişimden oluşur, token'lar da primitive, semantic ve component katmanlarına ayrılır. Bookstore'un elle yazılmış tokens.css'ini DTCG 2025.10 JSON dosyalarına ve light/dark ile reduced motion için bir resolver'a taşıyor, Terrazzo ile CSS ve Tailwind çıktısı üretiyor ve 101 değişkenin 100'ünün Chromium'da birebir aynı çözüldüğünü ölçüyoruz.
Responsive ve Platforma Uygun Tasarım: Touch Target, Thumb Zone, Breakpoint Kararları ve Dark Mode
Responsive tasarım ekranı küçültmek değil, dar ekranda neyin gerekli olduğuna karar vermek, breakpoint'i içeriğin kırıldığı yere koymak, birincil hedefleri 44–48 piksele çıkarmak ve dark mode'u tonla ayrılan yüzeylerle ayrı bir tema olarak kurmaktır. Bookstore kataloğunda 97 genişliğin 26'sında yatay kaydırmayı, telefonda görünmeyen hover butonunu, 15 piksellik Checkout'u ve filtreyle ters çevrilen kapakları ölçüp düzeltiyoruz.
Navigation ve Information Architecture: Menü, Breadcrumb, Arama, Filtre ve Pagination Kararları
İyi bir katalog navigation'ı listenin state'ini URL'de tutar, kategoriyi hiyerarşi ve formatı facet olarak ayırır, aktif filtreleri görünür kılar ve aranıp karşılaştırılan listelerde infinite scroll yerine pagination kullanır. Bookstore kataloğunda yenilemede kaybolan filtreleri, kullanıcıyı katalogdan çıkaran Back tuşunu, 70 kitap yüklenmeden görünmeyen footer'ı ve sıfır link'li listeyi ölçüp pushState/replaceState, facet sayıları, chip'ler, breadcrumb ve sonuç yok kurtarmasıyla düzeltiyoruz.
Interaction Design: Affordance, Feedback, Component State'leri, Empty/Loading/Error Ekranları
İyi bir interaktif bileşen her state'ini (hover, focus-visible, active, disabled, loading, error) ayrı tasarlar, 400 ms içinde feedback verir ve boş, sonuç yok ve hata ekranlarında kullanıcıya bir yol gösterir. Bookstore'un sepetinde 803 ms'lik sessiz bekleyişi, görünmeyen focus'u, nedeni söylenmeyen disabled butonu ve "Are you sure?" dialog'unu ölçüp optimistic UI, undo, skeleton ve token'lı focus ring ile düzeltiyoruz.
Form Tasarımı: Label Yerleşimi, Hata Mesajları, Inline Validation ve Uzun Form'ları Bölmek
İyi bir form az alan sorar, label'ı alanın üstünde görünür tutar, kullanıcı yazmayı bitirmeden hata göstermez ve hatada ne olduğunu ve nasıl düzeleceğini söyleyip focus'u özete taşır. Bookstore'un teslimat formunu 16 alandan 6'ya, yazılacak 150 karakterden 54'e indiriyor; floating label, yıldız, her tuşta doğrulama, "Invalid" mesajı ve paste engelini ölçüp düzeltiyor, WCAG 2.2'nin Redundant Entry ve Accessible Authentication kriterlerini forma uyguluyoruz.
Spacing, Layout Grid ve Alignment: 4/8'lik Spacing Sistemi, Whitespace ve Responsive Grid
Tutarlı bir arayüzün boşlukları 4 ve 8'in katlarından oluşan sınırlı bir skaladan gelir ve grup içindeki boşluk gruplar arasındakinden küçük tutulur. Bookstore kataloğunda 12 rastgele boşluk değerini, kartlar arasından geniş kart içi boşluğu ve 19 kenarlığı ölçüyor, spacing token'ları, tek sol kenar, zemin tonu ve içerikten dışa auto-fill grid ile düzeltiyor, 12 kolonluk grid ile karşılaştırıp compact density ekliyoruz.
Color ve Contrast: Palet Kurmak, Semantic Renkler, OKLCH ve WCAG Contrast Oranları
Bir arayüz paleti marka rengi, nötr skala ve semantic renklerden oluşur; OKLCH ile aynı açıklık adımlarını kullanınca her rengin aynı numaralı tonu beyaza karşı neredeyse aynı kontrastı verir. Bookstore kataloğunda WCAG 2.2 oranlarını kendi script'imiz ve axe-core ile ölçüyor, 8 başarısız metni ve yalnız renkle gösterilen stok durumunu düzeltiyor, dark mode'u ters çevirmeden yeniden ayarlıyor ve APCA'nın bugünkü durumunu anlatıyoruz.
Typography: Type Scale, Line Height, Satır Uzunluğu, Font Seçimi ve Türkçe Karakterler
İyi typography birkaç kurala dayanır: tek oranlı bir type scale, satır başına 45–75 karakter, gövdede 1.5–1.6 line-height ve tabloda tabular rakamlar. Bookstore'un kitap sayfasında 146 karakterlik satırları ve kayan ondalık noktaları ölçüp düzeltiyor, ch biriminin Inter'deki tuzağını, latin subset'inde eksik kalan ğ, ş, İ ve ₺'yi ve lang olmadan büyük harfe çevrilen i'yi Chromium'da gösteriyoruz.
Visual Hierarchy: Boyut, Ağırlık, Renk, Konum ve Gestalt Prensipleri
Visual hierarchy, gözün ekranı okuma sırasını kullanıcının işinin sırasına eşitlemektir; bunun en etkili yolu bir şeyi büyütmekten çok geri kalanı sakinleştirmektir. Bookstore'un kitap detay sayfasında 20 metnin 19'unun kalın olduğunu ölçüyor, boyut, ağırlık, renk, konum ve Gestalt prensipleriyle üç seviyeli bir hiyerarşi kuruyor, primary/secondary/tertiary butonları ve squint test'i önce/sonra ekranlarıyla gösteriyoruz.
UI ve UX Farkı ve Geliştirici İçin Tasarım: Usability Heuristic'leriyle Bir Ekranı Değerlendirmek
UI ekranın görünen yüzeyi, UX o yüzeyi kullanırken yaşanan akışın tamamı; tasarım kararı zevkle değil, ölçülebilir gerekçeyle verilir. Nielsen'in on heuristic'ini dört soruda toplayıp Bookstore'un checkout ekranını değerlendiriyor, bulguları 0–4 şiddetle sıralıyor ve çift tıklamada iki sipariş oluşturan, hatada formu silen ekranı Playwright ile ölçüp düzeltiyoruz.