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.
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.