SevkiBilge

Figma'dan koda geçerken en çok zorlandığınız UI detayları neler?

EnginDoganDr
· 5 gün önce · 2 görüntülenme
Selam millet, uzun zamandır Figma'dan frontend koduna geçiş yapıyorum ve bazı UI detaylarında gerçekten canım çıkıyor. Özellikle tasarımcıların "kusursuz" görünen ama kod tarafında kabusa dönüşen şeyler var. Mesela en basitinden, Figma'daki auto layout ve padding değerleri. Tasarımcı bir butona 16px padding vermiş, tamam güzel, ama içindeki metin dinamik olunca butonun boyutu sabit kalmıyor, ya taşıyor ya da küçülüyor. Sizde de böyle oluyor mu? Bir de o "stack" yapıları var, hizalama için kullanılan flexbox ayarları bazen kâbus gibi geliyor.

Bir diğer konu gradient ve gölge efektleri. Figma'da bir butona drop shadow eklemek iki tık, ama CSS'te aynı efekti yakalamak için box-shadow parametrelerini tek tek ayarlamak, üstelik farklı ekran boyutlarında tutarlı olmasını sağlamak bayağı uğraştırıyor. Hele bir de tasarımcı "blur" veya "background blur" kullanmışsa, o zaman backdrop-filter ile uğraşmak zorunda kalıyorum. Bazen performans sorunları da eklenince işin içinden çıkmak mümkün olmuyor. Siz bu tür efektleri nasıl hallediyorsunuz? Hazır bir kütüphane mi kullanıyorsunuz yoksa sıfırdan mı yazıyorsunuz?

Son olarak, responsive tasarım geçişleri beni en çok zorlayan şeylerden biri. Figma'da bir component 375px genişlikte mükemmel görünüyor, 1440px'te ise bambaşka bir hale geliyor. Özellikle breakpoint'ler arasında geçiş yaparken padding, margin ve font boyutlarının orantılı şekilde değişmesi gerçekten can sıkıcı. Tasarımcı bazen "bu kısım esnek olsun" diyor ama ne kadar esnek olduğu belirsiz oluyor. Siz bu geçişleri nasıl yönetiyorsunuz? Clamp() fonksiyonu kullanan var mı aranızda? Yoksa daha çok media query mi tercih ediyorsunuz? Deneyimlerinizi duymak isterim.
1 yanıt
FahriKucukDr
4 gün önce
En çok zorlandığım şeylerden biri karmaşık gölgeler ve katman efektleri. Figma'da blur veya inner shadow gibi şeyleri birebir koda çevirmek bazen çok uğraştırıyor, hele de CSS'in sınırlarına takılınca.

Yanıt yazmak için giriş yapın.