Özellikler
Eksiksiz HTML to Figma araç seti
Tek bir URL'den çok sayfalı, responsive ve tasarım sistemine duyarlı bir Figma dosyasına. HTML to Frames'in yaptığı her şey ve nasıl yaptığı burada.
Her yerden içe aktarın
Beş kaynak; herkese açık siteleri, bilgisayarınızdaki dosyaları, yalnızca tarayıcınızın görebildiği sayfaları ve yapay zekânın yazdığı kodu kapsar.
Link
Herkese açık herhangi bir URL'yi yapıştırın. Sayfa izole bir tarayıcıda işlenir, tembel yüklenen içerik kaydırılarak görünür hale getirilir; isterseniz çerez bannerları ve açılır pencereler gizlenir.
Multiple içe aktarma
İçe aktarma başına 10 bağlantıya kadar, sırayla işlenir. Her sayfa kendi ekran satırı olur. Her plana dahil; Pro gerekmez.
Yerel dosyalar ve yapıştırılan kod
Bir HTML dosyasını, tüm site klasörünü veya bir .zip'i bırakın ve hangi sayfaların içe aktarılacağını seçin ya da HTML/CSS'i doğrudan yapıştırın. Dosyalar bellekten sunulur ve içe aktarma bittiğinde silinir.
Chrome uzantısı
Giriş yapılmış panelleri, localhost'u, özel ağları ve sayfanın o anki durumunu yakalayın. Tek bir öğeyi veya tüm sayfayı seçin, ardından yapıştırın ya da Send to Figma ile gönderin.
MCP ile yapay zekâ araçları
Claude Code, Claude Desktop, Cursor veya herhangi bir MCP istemcisini bağlayın. Araç import_html veya import_url çağırır ve sayfa açık eklentinize düşer.
Bağlantılı sayfaları içe aktarma ve Re-import
Bir içe aktarmadan sonra aynı sitenin diğer sayfalarını listeden seçin. Herhangi bir frame'i daha sonra tek tıkla Re-import ile güncelleyin.
Gerçek siteyle eşleşen ekranlar
Responsive tasarım üç ekran görüntüsünden fazlasıdır. HTML to Frames her genişliği ayrı ayrı işler; böylece gerçek tablet ve mobil yerleşimlerini alırsınız.
Ölçülen Site width
Desktop, sitenin tasarlandığı genişlikte açılır: tam genişlik (full-bleed) düzenlerde ortalanmış kutuyla 1920, kutulu sitelerde kutu genişliği, akışkan (fluid) sitelerde 1440.
Responsive set
Tek tıkla Desktop + Tablet 768 + Mobile 390; Pro'da Laptop 1280 ve özel genişlikler. Ekranlar paralel yakalanır.
Düzenli tuval yerleşimi
Her sayfa için bir satır, ekranlar yan yana, frame adları yoursite.com/pricing — Desktop (1920) biçiminde.
Güvenebileceğiniz Auto Layout
HTML to Frames'in kalbi. Auto Layout gerçek tarayıcı geometrisinden çıkarılır, uygulanır ve doğrulanır; asla varsayılmaz.
Yığınlar, satırlar ve ızgaralar
Dikey ve yatay yığınlar, kaydırmalı satırlar, boşluklar (gap), iç boşluklar (padding) ve hizalama, her alt öğenin ölçülen konumundan çıkarılır.
Responsive anlam
Ortalanmış içerik ortada kalır, eşit kartlar Fill olur, max-width kapsayıcılar ortada durur ve boşluk öğeleri esner; böylece frame'ler site gibi yeniden boyutlanır.
2 px içinde doğrulanır
Auto Layout uygulandıktan sonra her alt öğenin konumu tarayıcıyla karşılaştırılır. Kaydıysa daha basit bir plan denenir; olmazsa frame tam konumlarını korur.
Akıllı kısıtlamalar
Absolute konumlarını koruyan frame'ler Stretch, Scale, Center veya Min/Max kısıtlamaları (constraints) alır; böylece yeniden boyutlandırma yine düzgün çalışır.
Tanılama
Sonuç ekranı her frame'in neden absolute kaldığını listeler (düzensiz boşluklar, üst üste binme, metin boyutu farkları); hiçbir şey sır olarak kalmaz.
Tasarım sistemi, çıkarılmış halde
Bir sitenin renklerini, tipografisini ve tekrarlanan arayüz öğelerini bir Figma tasarım sisteminin yapı taşlarına dönüştürün ya da kendi sisteminize eşleyin.
Renk değişkenleri
'Colors · domain' koleksiyonunda 96'ya kadar renk değişkeni; sitenin CSS custom property'lerinden adlandırılır (örneğin --brand-primary → brand/primary).
Metin ve gölge stilleri
Rol ve boyuta göre adlandırılan 48'e kadar metin stili, ayrıca sm'den xl'e gölge stilleri. Dolgular, kenarlıklar ve metin renkleri değişkenlere bağlanır.
Çoğaltmayın, yeniden kullanın
Dosyanızda aynı değere sahip bir değişken veya stil zaten varsa o kullanılır. Aynı siteyi iki kez içe aktarmak yeni hiçbir şey oluşturmaz.
Snap to my file's styles
Yakın eşleşmeler, algısal renk mesafesi kullanılarak kendi tasarım sisteminizdeki en yakın renk ve metin stiline oturtulur.
Bileşenler ve hover varyantları
Tekrarlanan kartlar, butonlar ve menü öğeleri bileşenlere ve instance'lara dönüşür. Hover görünümleri, hover etkileşimli Default/Hover varyantları olur.
Light + Dark
Sayfa açık ve koyu renk şemalarında okunur ve iki modlu tek bir koleksiyona yazılır; ayrıca her ekranın koyu bir kopyası oluşturulur.
Ayrıntılara kadar sadakat
Gerçek CSS karmaşıktır. HTML to Frames, bir sayfayı kendisi gibi gösteren ayrıntıları ele alır.
Metin
Tek paragrafta karışık stiller, bağlantılar, harf aralığı, satır yüksekliği, text-transform, üst simge ve alt simge, CSS sayaçları ve Chrome ile birebir liste işaretleri.
Boya
px duraklı ve döşemeli desenler dahil doğrusal, radyal ve konik gradyanlar, karışım modları, opaklık, bulanıklık ve arka plan bulanıklığı, gri tonlama filtreleri.
Şekiller ve efektler
Düzenlenebilir vektör olarak SVG, köşe yarıçapı, iç ve dış gölgeler, metin gölgeleri, tek kenarlı kenarlıklar, ::before/::after, clip-path, mask-image, döndürme ve ölçekleme.
Gömülü içerik
Haritalar, iframe'ler, WebGL ve poster görseli olmayan videolar o kutunun görseli olarak yakalanır; böylece hiçbir yer boş kalmaz.
Görseller
Yüksek çözünürlüklü srcset kaynakları, object-fit, background-size ve döşemeli arka planlar.
Fontlar
Missing fonts (eksik fontlar) ekranı, hiçbir şey oluşturulmadan önce alternatifler önerir ve seçiminizi o site için hatırlar.
Prototip ve iş akışı
İçe aktarılan sayfalar tıklanarak gezilmeye hazırdır ve kolayca güncel tutulur.
Tıklanabilir bağlantılar
Bağlantılar Present modunda kendi URL'lerini açar; içe aktarılan sayfalar arasındaki bağlantılar Navigate etkileşimlerine dönüşür.
Fixed, sticky ve kaydırma
Fixed ve sticky header'lar yerinde kalır; karuseller gibi yatay kaydırma alanları prototiplerde kayar.
Akordeon metni not olarak
İsteğe bağlı: kapalı akordeonlardaki gizli metin Figma notları (annotation) olarak eklenir; böylece hiçbir içerik kaybolmaz.
Referans ekran görüntüsü
Piksel karşılaştırması için her ekranın altında gizli ve kilitli bir ekran görüntüsü katmanı (Pro).
Sıkça sorulan sorular
Free; tüm içe aktarma kaynaklarını, 10 bağlantıya kadar Multiple içe aktarmayı, ölçülen site genişliğini, doğrulamalı Auto Layout'u, font eşlemeyi, prototip bağlantılarını ve gömülü içerik ekran görüntülerini içerir; ayda 10 içe aktarma ve içe aktarma başına bir ekranla. Stiller ve değişkenler, bileşenler, Light + Dark, özel genişlikler ve referans ekran görüntüsü Pro özellikleridir.
Evet. Eklenti yerleşimi kurmak için CSS kurallarını doğrudan okumaz; tarayıcının ölçtüğü geometriyi kullanır. Flexbox ve grid yerleşimleri, sonucun tarayıcıyla 2 px içinde eşleştiği her yerde Auto Layout yığınlarına ve kaydırmalı satırlara dönüştürülür.
Evet, Pro'da. Masaüstü genişliğindeki ekranlarda yakalama servisi bağlantılarda ve butonlarda hover durumunu zorlar, normal durumla karşılaştırır ve hover prototip etkileşimiyle Default/Hover varyantları oluşturur. Fare girişinde JavaScript ile açılan menüler yakalanmaz.
Skew ve 3D dönüşümler, path() içeren clip-path, çok katmanlı maskeler ve Display-P3 renkleri henüz dönüştürülmüyor. Gömülü canvas'lar, haritalar ve iframe'ler katman yerine kutularının görseli olarak gelir.
Web'i yeniden çizmeyi bırakın.
Bir bağlantı yapıştırın, saniyeler içinde gerçek, düzenlenebilir ve responsive Figma katmanları alın. Başlamak ücretsiz: her ay 10 içe aktarma.
Kredi kartı gerekmez. Pro, Figma içinden satın alınır.
Yakında Figma Community'de