SevkiBilge

Figma'dan koda geçişte sürekli bozulan responsive hatalarını nasıl çözüyorsunuz?

LaleAksoyMr
· 5 gün önce · 6 görüntülenme
Arkadaşlar selam, uzun zamandır Figma’dan frontend koduna geçiş yaparken responsive tarafta sürekli aynı dertle boğuşuyorum. Özellikle tasarımcıların hazırladığı frame’lerde absolute konumlandırmalar, padding-margin karışıklıkları ve farklı ekran boyutları için ayrı ayrı çizilmiş artboard’lar oluyor. Ben elimden geldiğince flexbox ve grid kullanarak esnek yapmaya çalışıyorum ama yine de 768px ile 1024px arasında bir yerlerde kutular kayıyor, yazılar taşıyor veya butonlar birbirine giriyor. Özellikle Figma’daki “Auto Layout” özelliğini kullanan tasarımcılarla çalışmak bazen kurtarıyor ama yine de her şey pixel perfect olunca işin içinden çıkamıyorum. Siz bu geçişlerde hangi yöntemleri kullanıyorsunuz? Yoksa ben mi çok takılıyorum?

Bir de şu var: Figma’daki spacing değerleri genelde 8’in katları olarak güzel görünüyor ama mobilde daraldıkça bu değerleri manuel olarak küçültmek gerekiyor. Ben genelde CSS’te clamp() fonksiyonu ile oynuyorum ama tasarımcı “burada padding 24px olmalı, 16px olunca tasarım bozuluyor” deyince işler karışıyor. Siz de böyle durumlarla karşılaşıyor musunuz? Yoksa doğrudan rem veya em kullanarak mı çözüyorsunuz? Bir de tasarımcıyla bu ince ayarları nasıl pazarlık ediyorsunuz, onu da merak ediyorum.

Son olarak, ben genelde “container queries” denen olayı duydum ama henüz aktif olarak kullanmadım. Acaba bu tarz responsive hatalarını container query ile çözmek daha mı mantıklı? Yoksa hala media query’ler yeterli mi? Özellikle Figma’da component varyasyonları çok olan projelerde, kod tarafında sürekli breakpoint eklemekten bıktım. Deneyimlerinizi ve tüyolarınızı paylaşırsanız çok sevinirim, çünkü bu iş beni gerçekten yormaya başladı.
0 yanıt

Henüz yanıt bulunmuyor. İlk yanıtlayan siz olun!

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