Arkadaşlar herkese selam, uzun süredir Figma'dan frontend koduna geçiş yaparken pixel-perfect konusunda canımı sıkan bir durum var. Özellikle tasarım dosyasındaki 1px'lik boşluklar, border radius'lar veya shadow değerleri birebir aynı olmuyor. Ben genelde bunları manuel olarak düzeltiyorum ama özellikle büyük projelerde bu işkenceye dönüşüyor.
Mesela Figma'da 16px olan bir padding, koda döküldüğünde bazen 15.8px gibi geliyor veya fontların line-height değerleri pixel-perfect tutmuyor. Özellikle responsive tasarımlarda bu sorun daha da büyüyor. Inspect panelinden kopyaladığım CSS değerleri bile bazen tam olarak uymuyor. Sizler bu konuda ne yapıyorsunuz? Acaba Figma'nın kendi export özelliklerinde bir ayar mı kaçırıyorum, yoksa bu durum tamamen tarayıcı farklılıklarından mı kaynaklanıyor?
Bir de şöyle bir durum var: Örneğin butonlarda kullanılan gölge efektleri, Figma'da CSS filter veya box-shadow olarak düzgün çalışmıyor. Benzer şekilde gradient arka planlar ve blur efektleri de koda tam oturmuyor. Acaba sizler bu tarz durumlarda hazır bir çözüm mü kullanıyorsunuz, yoksa her seferinde elle mi ince ayar yapıyorsunuz? Özellikle pixel-perfect işi yapan arkadaşların tecrübelerini merak ediyorum. Belki de benim bilmediğim bir Figma eklentisi veya araç vardır, onu da duymak isterim. Sonuçta tasarımcı ile geliştirici arasındaki en büyük sürtüşme noktalarından biri bu pixel kaymaları oluyor.
Mesela Figma'da 16px olan bir padding, koda döküldüğünde bazen 15.8px gibi geliyor veya fontların line-height değerleri pixel-perfect tutmuyor. Özellikle responsive tasarımlarda bu sorun daha da büyüyor. Inspect panelinden kopyaladığım CSS değerleri bile bazen tam olarak uymuyor. Sizler bu konuda ne yapıyorsunuz? Acaba Figma'nın kendi export özelliklerinde bir ayar mı kaçırıyorum, yoksa bu durum tamamen tarayıcı farklılıklarından mı kaynaklanıyor?
Bir de şöyle bir durum var: Örneğin butonlarda kullanılan gölge efektleri, Figma'da CSS filter veya box-shadow olarak düzgün çalışmıyor. Benzer şekilde gradient arka planlar ve blur efektleri de koda tam oturmuyor. Acaba sizler bu tarz durumlarda hazır bir çözüm mü kullanıyorsunuz, yoksa her seferinde elle mi ince ayar yapıyorsunuz? Özellikle pixel-perfect işi yapan arkadaşların tecrübelerini merak ediyorum. Belki de benim bilmediğim bir Figma eklentisi veya araç vardır, onu da duymak isterim. Sonuçta tasarımcı ile geliştirici arasındaki en büyük sürtüşme noktalarından biri bu pixel kaymaları oluyor.