HTML'i Figma'ya dönüştürme: eksiksiz 2026 HTML to Figma rehberi

Her tasarım ekibi eninde sonunda aynı duvara çarpar: üzerinde çalışmanız gereken şey tarayıcıda HTML olarak vardır, ama üzerinde çalışmak istediğiniz yer Figma'dır. Belki bir yeniden tasarım öncesi müşterinin canlı sitesi, bir geliştiricinin az önce yayına aldığı bir staging build'i ya da bir yapay zekâ aracının saniyeler içinde ürettiği bir açılış sayfasıdır. Elle yeniden kurmak saatler alır. Ekran görüntüsü yapıştırmak size bakabileceğiniz ama düzenleyemeyeceğiniz bir şey verir.

Bu rehber, HTML to Frames eklentisini kullanarak HTML'i Figma'ya gerçek, düzenlenebilir katmanlar (frame'ler, metinler, vektörler ve görseller) olarak nasıl dönüştüreceğinizi anlatıyor. Bir sayfayı içeri almanın beş yolunu, ekranları nasıl seçeceğinizi, hangi seçenekleri açmanız gerektiğini, neyin temiz dönüştüğünü ve neyin dönüşmediğini ve en yaygın sorunu, yani eksik fontları nasıl düzelteceğinizi öğreneceksiniz.

HTML'i neden Figma'ya dönüştürmeli?

Tarayıcı ve tasarım aracı farklı sorunları çözer. Tarayıcı, yayına çıkanın doğruluk kaynağıdır; Figma ise keşfettiğiniz, not aldığınız, karşılaştırdığınız ve teslim ettiğiniz yerdir. Dönüştürmek, mevcut gerçekliği karar verdiğiniz yere taşır.

Ekiplerin bunu yapmasının yaygın nedenleri:

• Yeniden tasarımlar. Boş bir tuval yerine mevcut siteden başlayın; böylece değiştirmeden önce gerçekte ne olduğunu görürsünüz. Website to Figma yeniden tasarım rehberimiz bu konuya daha derinlemesine giriyor.
• Denetimler. Boşlukları, tipografi ölçeğini ve renk kullanımını DevTools'tan tahmin etmek yerine katman katman inceleyin.
• Tasarım ile kod arasındaki sapma. Yayındaki sürümü orijinal mockup ile karşılaştırmak için Figma'ya geri alın.
• Tersine geliştirici teslimi. Bir front-end geliştirici localhost üzerinde geliştirir, tasarımcı ise Figma'da inceler ve iyileştirir.
• Yapay zekâ ile üretilen arayüz. Claude veya Cursor gibi araçlar HTML'i hızla üretir; Figma ise onu canlıya hazır hale getirdiğiniz yerdir.
• Öğrenme. Öğrenciler ve junior tasarımcılar iyi yapılmış siteleri katman katman inceleyebilir.

Tüm bunlardaki anahtar kelime düzenlenebilir. Bir bitmap size sayfayı yalnızca gösterir. Katmanlar ise değiştirmenizi sağlar.

HTML'i Figma'ya almanın 5 yolu

HTML to Frames web sayfalarını beş tür kaynaktan kabul eder. HTML'inizin bulunduğu yere uyanı seçin.

1. Link (tek bir herkese açık URL)

Herkese açık herhangi bir web sayfası URL'sini Link sekmesine yapıştırın. Sayfa izole bir tarayıcıda işlenir, ölçülür ve Figma katmanları olarak yeniden kurulur. Sayfa herkese açık erişilebilir olduğunda en hızlı yol budur. Bu akış hakkında daha fazlası için URL to Figma sayfasına bakın.

2. Multiple (10 bağlantıya kadar)

Multiple sekmesi tek seferde 10 bağlantıya kadar alır. Bağlantılar sırayla işlenir ve her sayfa tuvalde bir satır olur; böylece bir ana sayfa, fiyatlandırma sayfası ve blog yazısı karşılaştırma için yan yana dizilir. Multiple içe aktarma Free dahil her planda kullanılabilir.

3. Yerel dosya, klasör, .zip veya yapıştırılan kod

HTML henüz çevrimiçi değilse Local file sekmesini kullanın:

• tek bir HTML dosyası,
• tüm bir site klasörü (sürükleyip bırakın, ardından hangi sayfaların içe aktarılacağını seçin),
• bir .zip arşivi ya da
• Paste code: ham HTML ve CSS.

Yüklemeler 30 MB'a kadar olabilir. Dosyalar izole bir tarayıcı içinde bellekten açılır (asla file:// üzerinden değil) ve içe aktarma biter bitmez silinir. Yarıda bırakılan yüklemeler 2 dakika sonra kaldırılır. Tüm ayrıntılar güvenlik sayfasında.

4. Browser (ücretsiz Chrome uzantısı)

Bazı sayfalara bir sunucu erişemez: giriş yapılmış paneller, localhost, özel ağlar ya da belirli bir durumdaki sayfa (açık bir menü, doldurulmuş bir form, ürün eklenmiş bir sepet). Bunlar için ücretsiz HTML to Frames Chrome uzantısını yükleyin.

Tüm sayfayı yakalayabilir ya da tek bir öğe seçebilirsiniz (vurgulamak için üzerine gelin, üst veya alt öğeye geçmek için ok tuşlarını kullanın, yakalamak için Enter'a, iptal için Esc'ye basın). Sonuç panonuza ya da bir .h2f dosyasına gider ve onu eklentinin Browser sekmesine yapıştırırsınız. Daha da basiti: uzantıyı tek kullanımlık bir kodla eklentiye bir kez bağlayın ve Send to Figma'yı kullanın; böylece yakalamalar doğrudan açık eklentiye gider.

5. MCP ile yapay zekâ araçları

Arayüzü bir yapay zekâ asistanıyla oluşturuyorsanız, eklentinin AI sekmesinden Claude Code, Claude Desktop, Cursor veya herhangi bir MCP istemcisini bağlayın. Sekme size bir token ve kopyala-yapıştır kurulum verir. Asistan ardından import_html (2 MB'a kadar HTML), import_url veya import_status çağırabilir; sayfa açık eklentinize düşer ve kendi planınızla içe aktarılır. claude.ai için web bağlayıcıları henüz desteklenmiyor. Daha fazlası için AI to Figma sayfasını okuyun.

Hangi yöntemi kullanmalısınız?

Adım adım: HTML to Frames ile bir sayfayı dönüştürmek

Tipik bir herkese açık sayfa için akışın tamamı şöyle:

1. Bir Figma tasarım dosyasında eklentiyi açın ve Link sekmesini seçin.
2. Dönüştürmek istediğiniz sayfanın URL'sini yapıştırın.
3. Ekranlarınızı seçin: Desktop (Site width), Laptop, Tablet, Mobile ya da tek tıkla Responsive set.
4. Auto Layout, Full page, Images ve Hide cookie banners & popups gibi seçenekleri gözden geçirin.
5. İçe aktarmayı başlatın. Sayfa yüklü olmayan fontlar kullanıyorsa, hiçbir şey oluşturulmadan önce bir Missing fonts ekranı açılır.
6. Eksik fontlar için alternatifleri seçin (ya da önerileri kabul edin).
7. Sonuç ekranını kontrol edin. Frame'leri, katmanları, Auto Layout oranını, eksik fontları ve uyarıları listeler.
8. Düzenlemeye başlayın. Sayfanız artık gerçek metinler, vektörler ve görsellerle iç içe Figma frame'lerinden oluşan bir set.

Her ekran kendi frame'i olur ve example.com/pricing — Desktop (1920) gibi adlandırılır (protokol yok, www yok, en fazla 60 karakter); böylece büyük içe aktarmalar katmanlar panelinde kolayca taranır.

Ekran seçimi: Site width'in açıklaması

Ekran seçimi göründüğünden daha önemlidir. Yanlış genişlikte işlenen bir sayfa ya garip şekilde gerilir ya da tasarımcının hiç amaçlamadığı bir yerleşime sıkışır.

Desktop = Site width

HTML to Frames öylece 1440'ı seçip umut etmez. İçe aktarma anında sayfanın gerçek tasarım genişliğini ölçer:

• Tam genişlikli (full-bleed) tasarımlar (kenardan kenara uzanan arka planlar) içerik kutusu ortalanmış şekilde 1920 genişliğinde gelir.
• Gerçekten kutulu siteler kendi kutu genişliklerinde gelir; örneğin 1200, 1280 veya 1440.
• Sabit bir kapsayıcısı olmayan akışkan (fluid) siteler 1440 genişliğinde gelir.

Tahmin edilmez, ölçülür. Çok sayfalı bir içe aktarmada bir site, tüm sayfalarında tek bir genişlik alır; böylece frame'ler hizalanır.

Diğer ekranlar

• Laptop: 1280
• Tablet: 768
• Mobile: 390
• Custom width: ihtiyacınız olan herhangi bir genişlik (Pro)

Responsive set size tek tıkla Desktop, Tablet ve Mobile verir. Aynı sayfanın ekranları paralel olarak yakalanır.

Free'de her içe aktarma bir ekran içerir. Pro ve Team içe aktarma başına dörde kadar ekrana izin verir. Önemli olan şu: bir içe aktarma = tüm ekranlarıyla bir sayfa; yani bir sayfanın Responsive set'i tek bir içe aktarma sayılır. Plan ayrıntıları için fiyatlandırma sayfasına bakın.

Bilmeye değer seçenekler

Varsayılanlar çoğu sayfa için işe yarar, ancak şu seçenekleri anlamaya değer:

• Auto Layout: tarayıcının geometrisinden yığınları, boşlukları, iç boşlukları ve hizalamayı çıkarır ve sonucu korumadan önce doğrular. Auto Layout açıklaması bunun nasıl çalıştığını anlatıyor.
• Styles & variables (Pro): renk değişkenleri, metin stilleri ve gölge stilleri oluşturur; dosyanızda zaten var olanları yeniden kullanır.
• Snap to my file's styles (Pro): birebir eşleşme olmadığında renkleri ve metinleri kendi tasarım sisteminizdeki en yakın stillere oturtur.
• Full page: yalnızca ilk görünüm alanını değil, tüm kaydırılan sayfayı yakalar.
• Images: görsel dolgularını dahil eder veya atlar.
• Hide cookie banners & popups: sayfayı katmanlar olmadan, sıradan bir ziyaretçinin gördüğü gibi yakalar.
• Color scheme: Light, Dark ya da her iki modu içeren tek bir değişken koleksiyonu oluşturan Light + Dark (Pro).
• Detailed layers (Pro), Reference screenshot (Pro, karşılaştırma için gizli ve kilitli bir katman) ve Extra wait (Pro, yavaş yüklenen sayfalar için).
• Accordion text as notes: varsayılan olarak kapalı; kapalı <details> metnini Figma notlarına (annotation) dönüştürür.
• Page language: 15 dil; çok dilli siteler için kullanışlı.

Neler dönüşür, neler dönüşmez

Amaç gerçekten üzerinde çalışabileceğiniz bir tasarım dosyası olduğu için tam olarak neyin aktarıldığını bilmeye değer.

Düzenlenebilir katmanlara dönüşenler

• Doğrulanabildiği yerlerde Auto Layout ile, iç içe frame'ler olarak yerleşim
• Karışık stiller, bağlantılar, harf aralığı, satır yüksekliği ve text-transform ile metin
• Renkler ve gradyanlar: px durakları ve tekrarlayan gradyanlar dahil doğrusal, radyal ve konik
• object-fit, background-size, döşeme ve yüksek çözünürlüklü srcset ile görseller
• Düzenlenebilir vektörler olarak SVG
• Kenarlıklar (farklı renkte tek bir kenar dahil), köşe yarıçapı ve gölgeler (iç, dış ve text-shadow)
• Opaklık, karışım modları, blur ve backdrop-blur
• CSS döndürme ve ölçekleme, filter: grayscale/opacity
• ::before ve ::after, clip-path, mask-image
• Form alanları, Chrome gibi çizilen liste işaretleri, CSS sayaçları, üst simge ve alt simge
• Shadow DOM ve doğru z-index sırası

Görsel olarak gelenler

Bazı içerikler katman olarak temsil edilemez. Iframe'ler (gömülü haritalar gibi), poster görseli olmayan videolar, WebGL veya 3D canvas'lar ve object/embed öğeleri yalnızca o kutunun ekran görüntüsü olarak yakalanır. Sayfanın geri kalanı düzenlenebilir kalır. Nedenini HTML to canvas karşılaştırması açıklıyor.

Henüz desteklenmeyenler

• Skew ve 3D dönüşümler
• path() clip-path'leri
• Çok katmanlı maskeler
• Display-P3 renkleri

Temiz sonuçlar için ipuçları

Birkaç alışkanlık gözle görülür bir fark yaratır:

1. Pazarlama sitelerinde “Hide cookie banners & popups”ı açın. Aksi halde bir onay penceresi hero bölümünüzün üzerinde durabilir.
2. Kimlik doğrulama gerektiren sayfalar için Chrome uzantısını kullanın. Bir sunucu sizin adınıza giriş yapamaz; tarayıcınız ise zaten girişli.
3. Durumları bilinçli olarak yakalayın. Önce tarayıcınızda menüyü açın veya formu doldurun, ardından uzantıyla yakalayın.
4. Yalnızca bir fiyat kartı veya navigasyon çubuğu gibi bir bileşene ihtiyacınız olduğunda tek bir öğe seçin. Küçük yakalamaları temizlemek daha hızlıdır.
5. İçeriği geç yükleyen sayfalarda Extra wait (Pro) kullanın.
6. İçe aktarmanın canlı sayfayla eşleştiğini kanıtlamanız gerektiğinde bir Reference screenshot ekleyin (Pro); karşılaştırmak için açıp kapatabileceğiniz gizli, kilitli bir katmandır.
7. Üç ayrı içe aktarma yerine bir Responsive set içe aktarın. Tek bir içe aktarmadır ve frame'ler bir arada durur.
8. İlk içe aktarmadan sonra aynı sitenin diğer sayfalarını seçmek için Import linked pages'i kullanın; Multiple içe aktarma olarak gelirler.
9. Canlı sayfa değiştiğinde tek tıkla yeniden içe aktarın. Kaynak URL frame'de saklanır.

Eksik fontları düzeltmek

Eksik fontlar, içe aktarılan bir sayfanın “tuhaf” görünmesinin en yaygın nedenidir. Site, lisanslı bir yazı tipi veya yerel olarak yüklü olmayan bir web fontu kullanıyor olabilir.

HTML to Frames bunu katmanları oluşturmadan önce ele alır:

1. Yakalamadan sonra bir Missing fonts ekranı, sayfanın kullandığı ve Figma'nın bulamadığı her aileyi listeler.
2. Eklenti her biri için bir alternatif önerir. Öneriyi kabul edebilir veya farklı bir font seçebilirsiniz.
3. Seçimleriniz site bazında hatırlanır (ya da tercih ederseniz tüm siteler için); böylece aynı alan adından bir sonraki içe aktarmada yeniden sorulmaz.

Font eşleme her planda kullanılabilir. Fontlar yalnızca yerel olarak listelenir; eklenti Figma dosyanızın içeriğini okumaz. Tasarım üzerinde uzun vadede çalışmayı planlıyorsanız, sitenin kullandığı gerçek yazı tipini yüklemek yine de en doğru seçenektir.

Sırada ne var

HTML'i Figma'ya dönüştürmek ilk adımdır. Asıl değer, katmanlarla ne yaptığınızdadır:

• Bir yeniden tasarım mı planlıyorsunuz? HTML to design iş akışını okuyun.
• Yapay zekâ ile üretilmiş sayfalarla mı çalışıyorsunuz? AI to Figma sayfasına ve yapay zekâ ile üretilen arayüzü MCP ile Figma'ya aktarma rehberimize bakın.
• localhost veya giriş gerektiren sayfalara mı ihtiyacınız var? Chrome uzantısı ile başlayın.
• Araçları mı karşılaştırıyorsunuz? Alternatifler sayfamız seçenekleri adil bir şekilde ortaya koyuyor.

Hazır olduğunuzda eklentiyi edinin ve şu anda üzerinde çalıştığınız sayfada deneyin. Dokümantasyon her seçeneği ayrıntılı olarak anlatıyor.