HTML to Design: tasarımcı ve ajanslar için yeniden tasarım akışı

Tasarım genellikle tek yönde akar: Figma'daki bir mockup tarayıcıda HTML olur. Ancak gerçek işlerin önemli bir kısmı ters yönde ilerler. Bir müşteri size canlı bir site verir ve yeniden tasarım ister. Bir ürün, üç yıllık geliştirme boyunca orijinal mockup'larından uzaklaşmıştır. Bir geliştirici bir özelliği doğrudan kodda yapmıştır ve artık tasarım ekibinin onu sahiplenmesi gerekir.

Bu ters yön, yani HTML to design, tarayıcıda var olanı alıp tekrar düzenlenebilir bir tasarım dosyasına dönüştürmek demektir. İyi yapıldığında günlerce süren elle yeniden kurmadan tasarruf ettirir ve size ekran görüntülerinden oluşan bir mood board'dan daha iyisini verir: gerçek frame'ler, metinler, stiller ve bileşenler içeren çalışan bir dosya.

Bu yazı, HTML to Frames kullanarak ilk denetimden tıklanabilir bir prototipe kadar tasarımcılar ve ajanslar için pratik bir iş akışı ortaya koyuyor.

“HTML to design” aslında ne anlama geliyor

Bu ifade, canlı kodu veya bir web sitesini düzenleyebileceğiniz bir tasarım dosyasına dönüştüren her süreci kapsar. Bunu yapmanın üç genel yolu vardır:

1. Elle yeniden kurma: siteyi açın, DevTools'ta ölçün, her frame'i elle yeniden oluşturun.
2. Ekran görüntüleri: her sayfanın görüntüsünü alın ve referans olarak Figma'ya yapıştırın.
3. Düzenlenebilir katmanlar: işlenmiş sayfayı gerçek Figma frame'lerine, metinlerine, vektörlerine ve görsellerine dönüştürün.

Her birinin bir yeri vardır, ancak maliyet ve sonrasında neler yapabileceğiniz açısından keskin biçimde farklılaşırlar.

Ekran görüntüleri referans için uygundur. Sıfırdan yeniden yapılandırmak istediğiniz küçük tek bir sayfa için elle yeniden kurma hâlâ mantıklıdır. Daha büyük her şey için ölçeklenen başlangıç noktası düzenlenebilir katmanlardır.

Bu iş akışı kimler için

• Yeniden tasarımlar, denetimler veya ilham amaçlı incelemeler yürüten UI/UX ve web tasarımcıları.
• Bir yeniden tasarım teklifi hazırlamak için müşterinin sitesine dakikalar içinde Figma'da ihtiyaç duyan tasarım ajansları. Team planı beş kullanıcı hakkını tek bir lisans anahtarı altında paylaştırır.
• Canlı üründe sapmış renkleri, tipografiyi ve bileşenleri bir araya toplayan tasarım sistemi ekipleri.
• Bir localhost build'ini tasarımcıya Figma dosyası olarak teslim etmek isteyen front-end geliştiriciler.
• Planlama için giriş yapılmış panellere veya belirli durumlara Figma'da ihtiyaç duyan ürün yöneticileri ve pazarlamacılar.

İş akışı, adım adım

Önerdiğimiz sıra şöyle. Adımları atlayabilirsiniz, ancak sıra önemlidir: her adım bir öncekinin üzerine kurulur.

Adım 1: Var olanı denetleyin

Herhangi bir şeyi içe aktarmadan önce hangi sayfaların önemli olduğuna karar verin. Çoğu site için bu kısa bir listedir:

• ana sayfa,
• bir ya da iki temel açılış veya ürün sayfası,
• fiyatlandırma veya ödeme,
• blog yazısı gibi bir içerik şablonu,
• yeniden tasarım kapsamına giren giriş gerektiren ekranlar.

İhtiyacınız olan durumları da not edin: açık bir navigasyon menüsü, doğrulama hataları olan bir form, doldurulmuş bir sepet. Bunlara yalnızca bir URL ile ulaşılamaz; onları Chrome uzantısıyla yakalayacaksınız.

Adım 2: Bir Responsive set içe aktarın

Şimdi sayfaları içeri alın. Herkese açık sayfalar için:

1. HTML to Frames'i açın ve Multiple'ı seçin.
2. 10 bağlantıya kadar yapıştırın. Sırayla işlenirler ve her sayfa tuvalde bir satır olur.
3. Responsive set'i seçin: tek tıkla Desktop, Tablet ve Mobile (Pro ve Team'de içe aktarma başına dörde kadar ekran).
4. Katmanların içeriği kapatmaması için Hide cookie banners & popups'ı açın.
5. Bir sonraki adımda bir tasarım sistemi çıkarmayı planlıyorsanız Styles & variables'ı (Pro) açın.

Desktop ekranı Site width kullanır: eklenti tahmin etmek yerine sayfanın gerçek tasarım genişliğini ölçer. Tam genişlikli siteler içerik ortalanmış 1920, kutulu siteler kendi kutu genişliklerinde, akışkan siteler 1440 genişliğinde gelir. Bir site, tüm sayfalarında tek bir genişlik alır.

Sayma kuralını unutmayın: bir içe aktarma = tüm ekranlarıyla bir sayfa. Beş sayfalık bir Responsive set on beş değil, beş içe aktarmadır.

İlk içe aktarmadan sonra Import linked pages, aynı sitenin diğer sayfalarını bir listeden seçmenizi sağlar. Giriş gerektiren sayfalar veya localhost için Chrome uzantısını ve Send to Figma'yı kullanın. Yalnızca dosya olarak var olan sayfalar için bir HTML dosyasını, tüm site klasörünü veya bir .zip'i içe aktarmak üzere Local file'ı kullanın. HTML to Figma rehberi her kaynağı ayrıntılı olarak anlatıyor.

Adım 3: Tasarım sistemini çıkarın

Bir içe aktarmanın sitenin bir resmi olmaktan çıkıp çalışan bir temele dönüştüğü yer burasıdır. Styles & variables (Pro) açıkken eklenti şunları oluşturur:

• En az iki kez kullanılan renklerden ve sitenin CSS custom property'lerinden renk değişkenleri (--brand-primary, brand/primary olur); bir Colors · <domain> koleksiyonunda (96'ya kadar).
• Metin stilleri (48'e kadar).
• Gölge stilleri (sm, md, lg, xl).

İki ayrıntı bunu gerçek projeler için pratik kılar:

• Yeniden kullanım. Dosyanızda eşleşen değerlere sahip değişkenler veya stiller zaten varsa eklenti onları yeniden kullanır. Aynı siteyi iki kez içe aktarmak yeni hiçbir şey oluşturmaz.
• Snap to my file's styles (Pro). Zaten bir tasarım sisteminiz varsa, birebir eşleşme olmadığında içe aktarılan renkler ve metinler, algısal OKLab renk mesafesi ile aynı font ailesi, ağırlık ve %10 içindeki boyut eşleşmesini kullanarak sizin dosyanızdaki en yakın stile oturabilir.

Site dark modu destekliyorsa Light + Dark'ı (Pro) seçin. Sayfa her iki renk şemasında yakalanır ve Light ve Dark modlarına sahip tek bir değişken koleksiyonu ile her ekranın koyu bir kopyasını alırsınız. Figma Free dosyalarının koleksiyon başına bir moda izin verdiğini unutmayın; orada dark mod bir notla atlanır.

Çıktı, sitenin gerçekte neler kullandığının dürüst bir envanteridir ve çoğu zaman tüm denetimin en yararlı ürünüdür. Tek bir koleksiyonda neredeyse aynı uzun bir gri dizisi görmek, birleştirme gerekçesini herhangi bir slayttan daha iyi ortaya koyar.

Adım 4: Tekrarı bileşenlere dönüştürün

Components & hover states (Pro) ile tekrarlanan yapılar (kartlar, butonlar, menü öğeleri) metin ve görsel override'ları korunarak bileşenlere ve instance'lara dönüşür. Hover görünümü olan öğeler Default ve Hover varyantlı bir bileşen setine ve hover prototip etkileşimine dönüşür. Ana bileşenler bir Components · <site> frame'inde toplanır.

Bu size sadeleştirebileceğiniz bir bileşen envanteri verir. Tipik sonraki adımlar:

• neredeyse aynı buton bileşenlerini varyantlı tek bir sette birleştirin,
• bileşenleri adlandırma kuralınıza uyacak şekilde yeniden adlandırın,
• zaten var olduğu yerlerde instance'ları kendi kütüphane bileşenlerinizle değiştirin.

Adım 5: Gerçek yapı üzerinde iterasyon yapın

Şimdi tasarlayın. Yerleşim, eklentinin doğrulayabildiği yerlerde Auto Layout'lu iç içe frame'ler olarak geldiği için değişiklikler kendi kurduğunuz bir dosyadaki gibi davranır:

• başlıkları düzenleyin ve yığının yeniden akışını izleyin,
• bir bölümde bir boşluğu veya iç boşluğu değiştirin,
• bir renk değişkenini değiştirin ve her kullanımın güncellendiğini görün,
• bir frame'i yeniden boyutlandırın ve Fill ile Center'ın işini yapmasına izin verin.

Gerçek siteler üzerindeki testlerimizde Auto Layout, frame'lerin yaklaşık %86–97'sinde çıkarıldı. Absolute kalan frame'ler mantıklı kısıtlamalar alır ve sonuç ekranı bir frame'in neden absolute kaldığını listeler. Auto Layout açıklaması ayrıntılara giriyor.

Kullanışlı bir alışkanlık: orijinal içe aktarmayı kendi sayfasında “önce” olarak tutun ve yeniden tasarımınız için çoğaltın. Canlı sayfayla yan yana karşılaştırma için gizli, kilitli bir görsel katmanı istiyorsanız içe aktarma sırasında Reference screenshot'ı (Pro) açın.

Adım 6: Prototip

İçe aktarılan sayfalar zaten kısmen bağlanmış durumdadır:

• Bağlantılar tıklanabilir kalır (Open link).
• İçe aktarılan sayfalar arasındaki bağlantılar Navigate etkileşimlerine dönüşür; böylece çok sayfalı bir içe aktarma kutudan çıktığı haliyle tıklanabilir bir akıştır.
• Fixed ve sticky header'lar ile yatay kaydırma alanları Present modunda çalışır.
• 4. adımdaki hover varyantları, hover etkileşimleriyle birlikte gelir.

Bu, bir müşteri sunumunda “önce” prototipini “sonra” prototipinin yanına, ikisini de sıfırdan bağlamadan koyabileceğiniz anlamına gelir.

Adım 7: Senkronize tutun

Siteler değişmeye devam eder. İçe aktarılan her frame kaynak URL'sini sakladığı için canlı sayfa değiştiğinde Re-import tek tıktır. Mevcut değişkenler ve stiller yeniden kullanıldığından, yeniden içe aktarma dosyanızı kopyalarla doldurmaz.

Pratikte kullanım alanları

Ajans yeniden tasarım teklifleri

Bir yeniden tasarım teklifi sunan ajansın, müşterinin mevcut sitesine Figma'da hızla ihtiyacı vardır. Temel sayfaları Responsive set olarak içe aktarın, tasarım sistemini çıkarın; tek bir yeni fikir göstermeden önce gerçek renk ve tipografi envanteriyle olgusal bir “bugün elinizdeki bu” bölümünüz olur. Team planı beş kullanıcı hakkını paylaştırır; böylece birkaç tasarımcı aynı lisansla çalışabilir. Website to Figma sayfasına ve yeniden tasarım rehberine bakın.

Tasarım ile kod arasındaki sapma denetimleri

Canlı sayfayı içe aktarın ve orijinal mockup'ın yanına yerleştirin. Boşluk, renk ve tipografi farkları katman katman ortaya çıkar; üretilen değişkenler de paletin dışında kaç rengin sızdığını gösterir.

Geliştiricilerin yaptığı özellikler

Bir geliştirici bir özelliğin prototipini localhost üzerinde yaptı. Chrome uzantısıyla yakalayın, Figma'ya gönderin; tasarımcı onu ürünün geri kalanıyla aynı dosyada iyileştirsin.

Yapay zekâ ile üretilen sayfalar

Başlangıç noktası Claude veya Cursor'dan gelen HTML ise, asistanı MCP üzerinden bağlayın; sayfa açık eklentinize düşer. AI to Figma sayfasına bakın.

Öğrenme ve inceleme

Öğrenciler iyi yapılmış siteleri içe aktarıp bölümlerin nasıl yapılandırıldığını, tipografinin nasıl ölçeklendiğini ve boşlukların nasıl tekrarlandığını katman katman inceleyebilir.

Müşteri işlerinde gizlilik konuları

Ajanslar sıklıkla müşteri sitelerini içe aktarır; bu yüzden verilere ne olduğu önemlidir. Sayfalar izole, sandbox içinde çalışan bir tarayıcıda işlenir; sonuç bir kez teslim edilir ve ardından bellekten silinir, asla diske yazılmaz. Yüklenen yerel dosyalar içe aktarma biter bitmez silinir. Eklenti Figma dosyanızın içeriğini okumaz. Politikanın tamamı güvenlik sayfasında.

Başlarken

Bu iş akışının size uyup uymadığını görmenin en hızlı yolu, üzerinde çalıştığınız gerçek bir sayfada denemektir. Free ayda 10 içe aktarma içerir; Pro yukarıda anlatılan tasarım sistemi ve bileşen özelliklerini ekler. Planları fiyatlandırma sayfasında karşılaştırın, dokümantasyona göz atın ya da diğer araçların nasıl karşılaştırıldığını alternatifler sayfasında görün.