PSD to HTML Nedir? Figma'dan Koda Dönüşüm Rehberi (2026)

PSD to HTML, Photoshop'ta (.psd) hazırlanmış bir web tasarımının tarayıcıda çalışan HTML, CSS ve JavaScript koduna dönüştürülmesidir. Bugün tasarımlar büyük ölçüde Figma'da hazırlanıyor ama iş aynı: statik bir görseli her ekranda doğru çalışan, erişilebilir ve hızlı bir web sayfasına çevirmek. İsim eskidi, ihtiyaç eskimedi.

PSD'den Figma'ya kısa bir tarihçe

2000'lerde ve 2010'ların ilk yarısında web tasarımının standart aracı Photoshop'tu. Tasarımcı sayfayı katmanlar halinde çizer, kodlayıcı ise görseli "dilimler", yani parçalara ayırıp HTML ve CSS ile yeniden kurardı. "PSD to HTML" adı bu dönemden kalma; o yıllarda pek çok freelancer ve küçük stüdyo yalnızca bu işi yapardı.

Zamanla ekran boyutları çoğaldı ve tek bir sabit genişlikte çizilen PSD yetersiz kalmaya başladı. Önce Sketch gibi arayüz tasarımına özel araçlar, ardından tarayıcıda çalışan ve ekip halinde kullanılabilen Figma yaygınlaştı. Bileşenler, otomatik yerleşim (auto layout) ve geliştiriciye ölçü, renk ve boşluk bilgisini doğrudan veren modlar sayesinde tasarımla kod arasındaki mesafe kısaldı.

Ama mesafenin kısalması, ortadan kalktığı anlamına gelmiyor. Figma bir düzeni ve bir niyeti anlatır; o niyeti semantik, esnek ve hızlı bir koda dönüştürmek hâlâ ustalık isteyen bir iştir. Bu yüzden sektörde "PSD to HTML" ifadesi artık "tasarımdan koda" işinin genel adı olarak kullanılıyor.

Ajanslara white-label kodlama nasıl işler?

Kürekod olarak 2016–2018 arasında reklam ajanslarına white-label kodlama yaptık: PSD to HTML, PSD to Bootstrap, HTML to PHP ve JPG to PHP işleri. White-label, işin ajansın adıyla teslim edildiği ve kodlayıcının son müşteriye görünmediği modeldir. Ajans tasarımı ve müşteri ilişkisini yönetir; kodlama dışarıda ama ajansın standartlarıyla yapılır.

Tipik akış şöyledir: ajans onaylanmış tasarım dosyalarını, fontları ve görselleri gönderir. Kodlayıcı önce statik HTML/CSS sayfalarını hazırlar, onaydan sonra gerekiyorsa bunları bir içerik yönetim sistemine ya da PHP altyapısına bağlar. Gizlilik genellikle kısa bir sözleşmeyle güvence altına alınır.

PSD to Bootstrap, HTML to PHP, JPG to PHP: aradaki farklar

Bu terimler kulağa benzer gelse de farklı teslimleri anlatır. PSD to HTML statik sayfalar üretir; içerik değişikliği için kodu düzenlemek gerekir. PSD to Bootstrap aynı işi Bootstrap'in ızgara ve bileşen yapısıyla yapar, böylece responsive davranış ve sonraki geliştirmeler standart bir zemine oturur. HTML to PHP, hazır statik sayfaları dinamik hale getirir: ortak üst ve alt alanlar tek dosyada toplanır, içerik veritabanından ya da bir yönetim panelinden gelir. JPG to PHP ise elinde yalnızca görsel bir tasarım olan müşterinin, tasarımdan doğrudan dinamik siteye geçmesidir.

Teklif alırken hangisini istediğinizi netleştirmek önemlidir. "Siteyi kodlayın" talebine bir kodlayıcı statik HTML, bir diğeri yönetim panelli dinamik bir site anlayabilir; aradaki iş ve fiyat farkı ciddidir.

Bu modelin sağlıklı çalışması, rollerin net ayrılmasına bağlıdır. Tasarımcı deneyimi ve görünümü kurgular, geliştirici onu çalışır hale getirir. İki rol arasındaki farkı Digital Küre'nin web tasarımcı ile web geliştirici arasındaki farkları anlatan yazısı iyi özetliyor. Bu işin bugünkü kapsamını ise tasarımdan koda: PSD ve Figma to HTML sayfamızda bulabilirsiniz.

Kaliteli bir dönüşümün ölçütleri

İki kodlayıcı aynı Figma dosyasından ekranda birebir aynı görünen iki sayfa çıkarabilir; biri yıllarca sorunsuz çalışır, diğeri ilk içerik değişikliğinde dağılır. Farkı görmek için şu dört ölçüte bakın.

Semantik HTML

Sayfanın yapısı, görünümünden bağımsız olarak anlamlı etiketlerle kurulmalıdır: üst alan için <header>, menü için <nav>, ana içerik için <main>, alt bilgi için <footer>. Başlıklar görsel büyüklüğe göre değil hiyerarşiye göre sıralanmalı ve sayfada tek bir H1 olmalıdır. Başka bir sayfaya götüren öğe bağlantı, sayfa içinde işlem yapan öğe buton olarak kodlanmalıdır. Bu ayrımlar hem arama motorlarının hem de ekran okuyucuların sayfayı doğru anlamasını sağlar.

Responsive yapı

Tasarımcı genellikle bir masaüstü ve bir mobil ekran çizer. Aradaki tablet ve küçük dizüstü genişliklerinin nasıl davranacağına çoğu zaman kodlayıcı karar verir; iyi dönüşümü kötüsünden ayıran şey de genellikle bu ara ekranlardır. Bunun için sağlam bir ızgara sistemi işi kolaylaştırır. Biz yıllardır bu konuda Bootstrap'i tercih ediyoruz; Digital Küre'nin Bootstrap kullanmanın somut nedenlerini sıraladığı yazı bu tercihin arka planını anlatıyor. Izgaranın mantığını merak ediyorsanız Bootstrap grid sistemi yazımıza da göz atabilirsiniz.

Erişilebilirlik

Görsellerin anlamlı alternatif metinleri, form alanlarının etiketleri, yeterli renk kontrastı ve klavyeyle gezilebilen menüler kaliteli kodun parçasıdır. Klavyeyle gezinirken odaklanılan öğenin görünür olması, açılır menülerin ekran okuyucuya doğru bilgi vermesi gibi ayrıntılar tasarım dosyasında görünmez; kodlayıcının bilmesi ve eklemesi gerekir. WCAG yönergeleri bu konuda iyi bir başvuru kaynağıdır.

Hız

Tasarım dosyasından çıkan görseller olduğu gibi siteye konursa sayfa ağırlaşır. Kaliteli bir dönüşümde görseller WebP ya da AVIF gibi modern formatlara çevrilir ve doğru boyutlarda sunulur, ekranın altında kalanlar geç yüklenir (lazy loading), fontlar yalnızca kullanılan ağırlıklarla yüklenir, kullanılmayan CSS ve JavaScript temizlenir. Tek bir kaydırma efekti için koca bir kütüphane eklemek, en sık gördüğümüz hız hatalarından biridir.

Teslim alırken kontrol listesi

Kodlanmış sayfaları teslim alırken, ister ajans ister firma olun, şunları kontrol edin:

• Sayfalar 360 piksel genişliğindeki bir telefondan geniş bir masaüstü ekrana kadar her genişlikte düzgün görünüyor mu?
• Başlık hiyerarşisi doğru mu, her sayfada tek bir H1 var mı?
• Görsellerin alternatif metinleri dolu mu, form alanlarının etiketleri var mı?
• Uzun bir başlık ya da fazladan bir menü öğesi eklendiğinde düzen bozuluyor mu?
• Kod okunur ve düzenli mi; başka bir geliştirici rahatça devralabilir mi?
• Güncel tarayıcılarda (Chrome, Safari, Firefox, Edge) test edildi mi?

Figma dosyasını koda hazırlamak

Dönüşümün kalitesi yalnızca kodlayıcıya bağlı değildir; iyi hazırlanmış bir tasarım dosyası işi hızlandırır ve hata payını düşürür. Tasarımcı tarafında şunlara dikkat etmek yeterlidir:

• Otomatik yerleşimi (auto layout) ve bileşenleri tutarlı kullanın.
• Renkleri ve yazı stillerini tanımlı stiller ya da değişkenler olarak tutun.
• Buton, form ve menülerin tüm durumlarını (üzerine gelme, hata, pasif) çizin.
• En az bir mobil ekran tasarımı ekleyin.
• Katmanları anlaşılır adlandırın, dışa aktarılacak görselleri işaretleyin.

Dönüşüm işini kime vermeli?

Tek sayfalık bir kampanya sayfası ya da birkaç şablondan oluşan kurumsal bir site için deneyimli bir freelancer genellikle en hızlı ve ekonomik çözümdür. Tasarım sistemi büyük, sayfa şablonu çok ve arkasında bir yazılım altyapısı olan projelerde ise kodlamayı test ve bakım süreçleriyle birlikte yürütebilecek bir ekip tercih edilmelidir.

Hangisini seçerseniz seçin, teklif aşamasında örnek bir kod teslimi isteyin ve yukarıdaki ölçütlerle inceleyin. Ekranda aynı görünen iki sayfa arasındaki fark, kodu açınca hemen ortaya çıkar.