Figma'dan Export Edilen Görseller İçin En İyi Ayarlar

Export diyaloğu: hangi ayar ne işe yarar

Figma'nın export panelinde üç temel parametre vardır: format, ölçek ve (JPEG için) kalite değeri. Format seçimi vektör mi raster mı sorusunu yanıtlar; ölçek çıktı piksel boyutunu belirler. PNG için ayrı bir sıkıştırma kalitesi ayarı yoktur; JPEG için ise 0-100 arası bir değer girilir, varsayılan değer çoğunlukla 100'dür.

Format açısından değerlendirildiğinde: SVG vektör içerik için birinci tercihtir, PNG şeffaflık gerektiren raster çıktılar için, JPEG ise fotoğraf kökenli ya da büyük alan kaplayan görsel bloklar için uygundur. PDF baskı veya belge aktarımı dışında web için kullanılmaz.

Ölçek seçeneği, Figma'daki frame boyutunu çarparak çalışır. 100x100 piksellik bir frame, 2x ile export edildiğinde 200x200 piksel PNG üretir. Bu davranış özellikle tasarım dosyasında 1x boyutlarla çalışıp export sırasında ölçekleme yapan iş akışlarında bilinmesi gereken temel noktadır; frame boyutu yanlış kurulduysa ölçek ayarı sorunu çözmez.

Suffix (sonek) alanı ise toplu export sırasında dosya adına otomatik ek yapar. Örneğin @2x soneki, Figma'dan çıkan dosyayı [email protected] olarak adlandırır. Birden fazla ölçekte export yapılıyorsa bu alanı kullanmak, dosyaların karışmasını önler.

Figma, export sırasında renk profilini sRGB olarak sabitler. Tasarım dosyasında Display P3 renk alanı kullanılmışsa, PNG veya JPEG export bu renkleri sRGB'ye dönüştürür ve bazı tonlarda gözle fark edilebilir kayma oluşabilir. Mobil öncelikli tasarımlarda P3 renk kullanıyorsanız export çıktısını hedef ekranda önizlemeniz önerilir.

İkon ve UI elemanları için format ve ölçek

SVG, çoğu durumda ikon export için en verimli seçenektir. Boyutu küçük olur, her ekran yoğunluğunda keskin görünür ve CSS ile kolayca biçimlendirilebilir. SVG export alırken Figma'nın "Flatten" seçeneğini açmak, gereksiz grup katmanlarını kaldırır ve dosya boyutunu azaltır.

Ama SVG her zaman çalışmaz.

Bitmap efektleri - blur, gölge gibi - içeren ikonlarda SVG çıktısı beklenenden büyük ve karmaşık olabilir; bu durumda 2x PNG tercih edilebilir. Çok renkli fotoğraf bazlı ikonlarda ise SVG uygun değildir, raster format zorunludur.

SVG çıktısını optimize etme süreci Figma'da başlar. Tüm metin katmanlarını şekle dönüştürmek - "Outline Stroke" adımı - SVG içindeki font referansını kaldırır; bu referans farklı ortamlarda beklenmedik biçimde işlenebilir. Metin içeren ikonlarda bu adımı export öncesinde uygulamak, görselleştirilmemiş karakter sorununu ortadan kaldırır.

PWA veya mobil uygulama için ikon üretiyorsanız, tasarım dosyasında birden fazla frame boyutu oluşturup her birini 1x ile export almak, elle ölçekleme hatalarını önler. Bu boyut planlamasını nasıl yapacağınızı PWA ikon boyutları rehberi detaylı ele alır.

Maskable ikon üretiminde Figma'dan export alırken güvenli bölgeyi (safe zone) frame içinde görsel olarak işaretlemek, yanlış kırpma riskini azaltır. Maskable icon formatının gereksinimleri ve kırpma mantığı bu export ayarından bağımsız olarak bilinmesi gereken bir konudur; yalnızca export ayarını optimize etmek burada yeterli olmaz.

Hero ve banner görselleri için ayarlar

Hero görseller, sayfada en fazla yer kaplayan ve boyut açısından en ağır olan görsel bloklardır. Figma'da tipik olarak 1440x810 veya 1920x1080 piksel gibi geniş framelerde tasarlanır.

Bu boyutlarda PNG ile export, özellikle büyük düz renk alanları varsa dosya boyutunu yüksek tutar. Gradient arka planlar veya fotoğraf tabanlı hero görseller için JPEG, %80-85 kalite değerinde makul bir boyut-kalite dengesi sağlar. Şeffaflık gerektiren hero elementleri için WebP'ye dönüştürme adımı export sonrasına bırakılabilir.

Retina optimizasyonu için 2x export yaygın bir yaklaşım gibi görünse de dikkatli olmak gerekir. 1920 piksellik bir hero görseli 2x ile export edildiğinde 3840 piksel genişliğinde çıkar; bu dosya doğrudan web'e sunulmaz. Doğru akış: Figma'dan 1x veya doğal boyutta export, ardından kırılma noktasına göre boyut planlaması yaparak srcset ile sunmaktır.

Hero görselini Figma'dan hangi boyutta export aldığınız, onu nasıl sunacağınızla doğrudan ilişkilidir. Sayfada tek sabit genişlikte bir görsel kullanılacaksa en geniş kırılma noktası referans alınabilir; duyarlı tasarımda farklı genişlikler için ayrı dosyalar hazırlamak ve srcset ile sunmak, gereksiz veri yükünü önemli ölçüde azaltır. Figma bu boyut setini tek seferde üretmez; bu aşama export sonrasına aittir.

Animasyonlu geçişler veya yoğun gradient içeren hero görsellerde JPEG, bloklu görsel bozulmalara (artifact) yol açabilir. Bu durum görsel içeriğin yapısına bağlı olduğundan, deneyerek kontrol etmek kural ezberlemeye göre daha güvenilir bir yaklaşımdır.

Ürün görselleri için özel durumlar

Ürün görselleri iki farklı bağlamda karşınıza çıkar: Figma'da sıfırdan üretilmiş (mockup, infografik, etiket tasarımı) ve harici fotoğraf kaynağından Figma'ya taşınmış.

Sıfırdan Figma çizimi ürün görselleri için PNG tercih edilir; vektör tabanlı içerik PNG ile keskinliğini korur. JPEG sıkıştırması, net kenarlarda ve metin içeren alanlarda iz bırakır.

Fotoğraf kökenli ürün görseli Figma'ya yerleştirilmiş ve üzerine katman eklenmişse durum farklıdır. Figma, yerleştirilen görseli PNG export sırasında lossless biçimde korumaz; zaten sıkıştırılmış olan JPEG'i tekrar PNG'ye çevirmek kalite kazandırmaz, aksine gereksiz boyut artışına neden olur. Bu durumda orijinal fotoğrafı Figma dışında işleyip Figma'dan yalnızca üst katmanları export almak daha temiz bir akış oluşturur.

Beyaz arka plan üzerinde ürün görseli export ediyorsanız ve arka plan saydamlık içermiyorsa, yüksek kalite değeriyle JPEG PNG'ye yakın görsel kalite sağlarken dosya boyutunu belirgin ölçüde düşürür. Saydamlık gerektiren ürün kesimi için ise PNG zorunludur; format tercihi burada içeriğe değil teknik gerekliliğe bağlıdır.

Ürün görseli üzerinde fiyat etiketi, promosyon metni veya özellik listesi gibi grafik öğeler varsa, bunların görsel içine gömülü mü yoksa HTML katmanında mı sunulacağına export öncesinde karar vermek gerekir. Metin HTML'de tutulursa Figma'dan yalnızca arka plan ya da ürün kesimi export edilir; arama motorları bu metni ayrıca değerlendirebildiğinden bu yaklaşım SEO açısından da avantaj sağlar.

Export öncesi kontrol listesi

Bir export yapmadan önce gözden geçirilmesi gereken noktalar:

• Frame mi, layer mı? Seçilen öğenin frame olması, export sınırlarının net olduğu anlamına gelir. Layer seçiminde bounding box davranışı beklenmedik kırpmalara yol açabilir.
• Clip content durumu: Frame'de "Clip content" kapalıysa taşan içerik PNG'ye dahil olur ve çıktı boyutları beklenenin dışına çıkabilir.
• Gizli katmanlar: Export'ta gizli katmanlar genellikle dahil edilmez; ancak gruba gömülü gizli katmanlar bazen dahil olabilir. Export öncesinde kontrol edilmeli.
• Ölçek ve hedef boyut uyumu: Tasarım 375 piksel genişlikte mobil frame olarak yapıldıysa 1x export 375 piksel üretir. Hedef boyut farklıysa ölçek ayarlanmalı ya da frame boyutu gözden geçirilmeli.
• Frame adları: Figma, frame adını dosya adı olarak kullanır. Export öncesinde frame adlarını temizlemek, sonraki yeniden adlandırma adımını ortadan kaldırır.
• Toplu export tutarlılığı: Birden fazla frame için aynı anda export alınıyorsa her frame'e ayrı export ayarı tanımlanabilir. Farklı format ve boyut gruplarını tek oturumda almak iş akışını kısaltır; ancak her frame'in kendi ayarını taşıdığından emin olunmalı.

Export sonrası kalite kontrolü için sıkıştırma sonrası görsel kalitesi ölçme yöntemlerini ayrıca inceleyebilirsiniz.

Figma'nın frame düzeyinde kaydedilen "Export settings" özelliği, bir sonraki export için aynı parametreleri yeniden girmek zorunda kalmamanızı sağlar. Dosya yapısı kararlıysa bu ayarları ekip genelinde paylaşılan bir şablon dosyasına aktarmak da mümkündür; sık güncellenen bileşenlerde tutarlı çıktı almanın en hızlı yolu bu küçük hazırlığı baştan yapmaktır.

Yeniden export ve sürüm takibi

Tasarım güncellendiğinde Figma'dan yeniden export zorunlu olur. Sık güncellenen bileşenler için dosya adlandırma kuralı baştan belirlenmezse, hangi dosyanın güncel olduğunu takip etmek güçleşir.

Frame adlarını değiştirmeden tasarımı güncelleyip aynı adla export almak, üzerine yazma anlamına gelir ve sürüm tarihçesi oluşturmaz. Sürüm yönetimi yapılmak isteniyorsa, tarih veya sürüm numarası dosya adına eklenebilir ya da Figma'nın yerleşik sürüm geçmişi kullanılabilir. Görsel sürümleme ve eski dosya temizliği konusunda daha kapsamlı bir yaklaşım ayrı bir rehberde ele alınmaktadır.

Toplu yeniden export için Figma'nın "Export all" özelliği, tasarım dosyasındaki tüm export tanımlı öğeleri tek seferde indirir. Bu özelliği kullanmadan önce tüm frame'lerin doğru ayarlara sahip olduğunu doğrulamak, yanlış formatta dosya üretimini önler. Büyük ölçekli projeler için toplu görsel dönüştürme akışı kurmak, Figma çıktısını üretime taşıma adımlarını otomatize eder.

Figma'nın export diyaloğu dar bir alandır, ama her ayarın farklı bir etkisi vardır. Format, ölçek ve kalite değeri birlikte değerlendirildiğinde, tasarım dosyasından web'e taşınan görseller ekstra dönüştürme adımı olmadan kullanılabilir hale gelir.

İkon, hero ve ürün gibi farklı kullanım alanları aynı export ayarını paylaşmaz. Bir format bir bağlamda ideal sonuç verirken başka bir bağlamda gereksiz boyuta ya da kalite kaybına neden olabilir. Ayarları kullanım alanına göre belgelemek, ekip içinde tutarlı çıktı sağlamanın en pratik yoludur.

Export ayarları yerleştiğinde, asıl iş akışı Figma'dan çıkmakla bitmez; dosyaların nereye, hangi adla ve hangi formatta gideceği de tasarım sürecinin bir parçasıdır.