Arkadaşlar herkese selam, uzun zamandır Figma’da tasarımları alıp CSS’e dökerken can sıkıcı bir pixel hassasiyeti sorunu yaşıyorum. Özellikle butonlar, kartlar veya border-radius ile oynadığım elementlerde Figma’da gördüğüm 1px’lik farklar, tarayıcıda bazen 0.5px gibi garip değerlere dönüşüyor. Mesela bir butonun padding’ini 16px 24px olarak alıyorum, Figma’da her şey tam oturuyor ama Chrome’da butonun yüksekliği 1-2px oynuyor. Bunu düzeltmek için CSS’de border-box kullanıyorum ama yine de tam istediğim gibi olmuyor. Acaba Figma’nın export özelliklerinde bir yanlışlık mı var yoksa ben mi yanlış okuyorum? Sizde de böyle sorunlar oluyor mu?
Özellikle responsive tasarımlarda iş daha da karışık hale geliyor. Figma’da bir container’in width’ini 300px olarak ayarlıyorum, CSS’de de aynısını yazıyorum ama içindeki metin boyutu veya padding’ler yüzünden container taşıyor. Bazen de Figma’da görünen gölge veya outline efektleri pixel hassasiyetini bozuyor. Mesela bir input alanına 2px’lik bir border koyuyorum, tarayıcıda 2px’den fazla gözüküyor gibi hissediyorum. Acaba bunun için özel bir CSS reset veya normalize dosyası mı kullanmalıyım? Yoksa Figma’daki auto-layout ayarlarıyla ilgili bir püf nokta mı var?
Bir de şu konuyu merak ediyorum: Figma’dan direkt CSS kodu kopyalamak mı daha sağlıklı, yoksa manuel olarak pixel değerlerini alıp yazmak mı? Ben genelde manuel alıyorum çünkü Figma’nın ürettiği CSS bazen çok şişkin ve gereksiz flex özellikleri ekliyor. Ama manuel alırken de yanlışlıkla 1px’lik bir hata yapabiliyorum. Sizin deneyimleriniz neler? Özellikle buton veya form elemanlarında pixel-perfect yakalamak için hangi yöntemleri kullanıyorsunuz? Bir de tarayıcı farklılıkları bu işi daha da zorlaştırıyor, Safari ile Chrome arasında bazen 1px’lik farklar görüyorum. Bu konuda önerisi olan var mı?
Özellikle responsive tasarımlarda iş daha da karışık hale geliyor. Figma’da bir container’in width’ini 300px olarak ayarlıyorum, CSS’de de aynısını yazıyorum ama içindeki metin boyutu veya padding’ler yüzünden container taşıyor. Bazen de Figma’da görünen gölge veya outline efektleri pixel hassasiyetini bozuyor. Mesela bir input alanına 2px’lik bir border koyuyorum, tarayıcıda 2px’den fazla gözüküyor gibi hissediyorum. Acaba bunun için özel bir CSS reset veya normalize dosyası mı kullanmalıyım? Yoksa Figma’daki auto-layout ayarlarıyla ilgili bir püf nokta mı var?
Bir de şu konuyu merak ediyorum: Figma’dan direkt CSS kodu kopyalamak mı daha sağlıklı, yoksa manuel olarak pixel değerlerini alıp yazmak mı? Ben genelde manuel alıyorum çünkü Figma’nın ürettiği CSS bazen çok şişkin ve gereksiz flex özellikleri ekliyor. Ama manuel alırken de yanlışlıkla 1px’lik bir hata yapabiliyorum. Sizin deneyimleriniz neler? Özellikle buton veya form elemanlarında pixel-perfect yakalamak için hangi yöntemleri kullanıyorsunuz? Bir de tarayıcı farklılıkları bu işi daha da zorlaştırıyor, Safari ile Chrome arasında bazen 1px’lik farklar görüyorum. Bu konuda önerisi olan var mı?