HTML to Frames dokümantasyonu

1. Figma'yı açın (masaüstü uygulaması veya tarayıcı) ve HTML to Frames'in Community sayfasına gidin.
2. Open in… veya Try it out'a tıklayın ve bir dosya seçin. Eklenti hesabınıza kaydedilir.
3. Sonraki seferlerde menüden başlatın: Plugins → HTML to Frames; ya da ⌘/ (Windows'ta Ctrl /) tuşlarına basıp HTML to Frames yazın.

Eklenti Figma Design dosyalarında çalışır. Hesap gerektirmez: Free plan otomatik olarak başlar, Pro ise Figma içinden satın alınır.

1. Import sekmesinde kaynağı Link olarak bırakın ve bir URL yapıştırın, örneğin kendi ana sayfanızı.
2. Screens (ekranlar) altında Desktop seçilidir ve Site width gösterir; eklenti içe aktarma sırasında sayfanın gerçek tasarım genişliğini ölçecektir. Pro'da Tablet ve Mobile eklemek için Responsive set'e tıklayın.
3. Auto Layout'u açık bırakın. Import'a tıklayın.
4. İlerlemeyi izleyin: sayfa işlenir, görseller hazırlanır, katmanlar oluşturulur ve Auto Layout uygulanıp doğrulanır.
5. Sonuç ekranı frame ve katman sayısını, Auto Layout alan frame'lerin oranını, eksik fontları ve varsa uyarıları gösterir.

Sayfanız tuvalde yoursite.com — Desktop (1920) gibi adlandırılmış bir frame satırı olarak görünür. Her metin, görsel ve vektör düzenlenebilir.

Link

Herkese açık her sayfa. Giriş gerektiren, localhost üzerinde veya özel bir ağda bulunan sayfalara yakalama servisi erişemez; bunlar için Chrome uzantısını kullanın.

Multiple

Her satıra bir tane olmak üzere 10 bağlantıya kadar yapıştırın. Sırayla, her biri kendi satırında içe aktarılır. Aynı sitenin sayfaları aynı ölçülen genişliği paylaşır, böylece hizalı dururlar.

Local file

Bir HTML dosyası, bir site klasörü veya bir .zip seçin (30 MB'a kadar). Klasörlerde hangi sayfaların içe aktarılacağını seçin. Paste code'u seçip satır içi veya gömülü CSS içeren HTML de yapıştırabilirsiniz. Dosyalar izole bir tarayıcıda bellekten açılır ve içe aktarmadan hemen sonra silinir.

Browser

HTML to Frames Chrome uzantısı ile yapılmış bir yakalamayı yapıştırın (⌘V), bir .h2f dosyası bırakın ya da uzantıyı bir kez bağlayıp Send to Figma'yı kullanın. Bkz. Chrome uzantısı.

Yapay zekâ araçları

AI sekmesinden bir MCP istemcisi bağlayın ve yapay zekâ aracınızın sayfa göndermesine izin verin. Bkz. Yapay zekâ araçları (MCP).

Site width içe aktarma anında ölçülür: kenardan kenara bölümleri olan düzenler, içerik kutusu ortalanmış şekilde 1920 genişliğinde bir frame'e yerleştirilir; gerçekten kutulu siteler kendi kutu genişliğini kullanır (örneğin 1200 veya 1280); akışkan (fluid) düzenler 1440 kullanır. Free, sayfa başına bir ekran içe aktarır; Pro ve Team dörde kadar. Bir sayfanın tüm ekranları bir içe aktarma sayılır.

Oluşturmadan önce eklenti, sayfadaki hangi fontların bilgisayarınızdaki Figma'da bulunmadığını kontrol eder. Missing fonts ekranı her biri için bir alternatif önerir: önce aynı kelimeyle başlayan bir aile, sonra CSS font yığınındaki ilk yüklü font, ardından Inter. İsterseniz arayıp başka bir aile seçin, sonra seçimin bu site için mi yoksa tüm siteler için mi hatırlanacağına karar verin. Skip, önerileri kaydetmeden bir kez kullanır. Kaydedilmiş seçimleri seçeneğin altındaki forget saved ile temizleyin.

Styles & variables açıkken (Pro):

• En az iki kez kullanılan renkler ve sitenin CSS custom property'leriyle eşleşen renkler, Colors · yoursite.com adlı bir koleksiyonda değişkene dönüşür. Adlar mümkün olduğunda sitenin token'larından gelir (--brand-primary → brand/primary), aksi halde ton ve tonlamadan (blue/500).
• En az iki kez kullanılan veya 20 px ve üzeri tipografi, yoursite.com/Heading/32/40 Bold gibi adlandırılmış metin stillerine dönüşür.
• Tekrarlanan gölgeler sm, md, lg, xl gölge stilleri olur.
• Dosyanızda aynı değere sahip bir değişken veya stil zaten varsa yeniden kullanılır.

Snap to my file's styles bir adım daha ileri gider ve yakın eşleşmeleri kendi tasarım sisteminize eşler.

Components & hover states açıkken tekrarlanan yapılar, sayfanın yanındaki Components · yoursite.com frame'ine yerleştirilen bileşenlere dönüşür ve her tekrar kendi metin ve görselleriyle bir instance olur. Hover görünümü olan öğeler, State=Default ve State=Hover varyantlarına sahip bileşen setlerine dönüşür.

Color scheme → Light + Dark'ı seçin (Pro). Sayfa, yeniden yüklenmeden iki kez okunur: prefers-color-scheme: light ve dark ile. Değişen her renk Light ve Dark değerine sahip bir değişkene dönüşür ve her ekranın koyu bir kopyası, koleksiyonu Dark olarak ayarlanmış şekilde yanına yerleştirilir. Starter plandaki Figma dosyaları koleksiyon başına bir moda izin verir; bu durumda eklenti dark modun atlandığını size bildirir. Temayı yalnızca bir JavaScript düğmesiyle (sistem ayarıyla değil) değiştiren siteler varsayılan temalarıyla içe aktarılır.

• Bağlantılar Present modunda çalışmaya devam eder: harici bağlantılar kendi URL'lerini açar; ayrıca içe aktardığınız sayfalara giden bağlantılar Navigate etkileşimlerine dönüşür.
• Fixed ve sticky header'lar kaydırırken yerinde kalır; yatay karuseller ve kaydırma alanları kayar.
• Bir içe aktarmadan sonra Import linked pages, sayfada bulunan aynı siteye ait diğer sayfaları listeler. İstediklerinizi işaretleyin; aynı ayarlarla Multiple içe aktarma olarak içe aktarılırlar.
• İçe aktarılmış bir frame'i seçin ve kaydedilmiş kaynak URL'den güncel bir sürüm almak için Re-import'a tıklayın.

Yakalama servisinin erişemediği sayfalar için ücretsiz HTML to Frames Chrome uzantısını kullanın: giriş yapılmış sayfalar, localhost, intranetler ve bir sayfanın tam o anki durumu (açık bir açılır menü, doldurulmuş bir form).

1. Uzantıyı yükleyin ve araç çubuğuna sabitleyin.
2. Sayfayı açın ve uzantıya tıklayın → Capture this page; ya da yalnızca bir parçayı yakalamak için Select an element (fareyi gezdirin, üst öğe için ↑, geri için ↓, seçmek için Enter, iptal için Esc).
3. Yakalama panonuza kopyalanır (veya .h2f dosyası olarak indirilir).
4. Figma'da eklentiyi açın → Browser sekmesi → ⌘V'ye basın veya dosyayı bırakın.

Send to Figma: eklentinin Browser sekmesinde tek kullanımlık bir kod almak için Connect'e tıklayın, kodu uzantıda Connect to Figma altına girin. Bundan sonra ana buton Send to Figma olur ve yakalamalar doğrudan açık eklentinize gider.

Uzantı, mevcut pencere genişliğinde tek bir ekran yakalar; tablet veya mobil yerleşimler için pencereyi yeniden boyutlandırın. Her yakalama bir içe aktarma sayılır.

1. Eklentiyi açın → AI sekmesi → Connect an AI tool. Kişisel bir token oluşturulur ve yalnızca bir kez gösterilir.
2. İstemciniz için kurulumu kopyalayın: Claude Code (bir claude mcp add komutu), Claude Desktop (mcp-remote kullanan bir yapılandırma) veya Cursor & others (URL ve header içeren JSON).
3. Eklentiyi Figma'da açık tutun ve yapay zekâ aracınızdan bir sayfayı içe aktarmasını isteyin, örneğin: “Üç planlı bir fiyatlandırma sayfası oluştur ve HTML to Frames ile Figma'ya gönder.”

Kullanılabilir araçlar: import_html (2 MB'a kadar HTML, isteğe bağlı ad ve ekranlar), import_url (herkese açık herhangi bir URL) ve import_status. İçe aktarma, eklentinizde sizin planınızla çalışır ve araç bir özet alır: frame'ler, katmanlar, Auto Layout oranı ve eksik fontlar. Create a new token eskisini geçersiz kılar; Disconnect onu kaldırır. claude.ai'deki web bağlayıcıları henüz desteklenmiyor.

Bir içe aktarma = tüm ekranlarıyla bir sayfa. Sayaçlar her ay sıfırlanır (UTC). Çok uzun bir sayfa plan limiti nedeniyle kesilirse, frame'e mor bir Capture limit şeridi eklenir; böylece her zaman bilirsiniz. Pro'yu Plan sekmesinden Figma'nın ödeme ekranıyla satın alın; Team üyeleri lisans anahtarlarını aynı sekmeye girer ve kullanıcı hakkını boşaltmak için anahtarı bir hesaptan kaldırabilir.

Sayfa tarayıcımdakinden farklı görünüyor. Hide cookie banners & popups'ı açın, yavaş animasyonlar için Extra wait'i deneyin ya da tam olarak gördüğünüzü yakalamak için Chrome uzantısını kullanın.

“This address can't be reached.” Yakalama servisi yalnızca herkese açık adresleri açar. localhost, VPN arkasındaki staging veya giriş gerektiren sayfalar için Chrome uzantısını kullanın.

Metin farklı satırlara kırılıyor. Genellikle bir font farkıdır; Missing fonts ekranında eksik fontu doğru aileye eşleyin.

Bazı frame'lerde Auto Layout yok. Auto Layout öğelerin yerini değiştirecekse bu bilinçli bir tercihtir. Nedenini görmek için sonuç ekranındaki tanılama listesini açın (düzensiz boşluklar, üst üste binme, metin boyutu).

Bir alan boş. Haritalar, iframe'ler ve WebGL sahneleri görsel olarak yakalanır; biri hâlâ boşsa içerik muhtemelen bir kullanıcı eylemi veya giriş gerektiriyordu.

“Limit reached.” Bu ayın Free içe aktarmalarını kullandınız. Ayın 1'inde (UTC) sıfırlanır; ya da sınırsız içe aktarma için Pro'ya yükseltin.

Hâlâ takıldınız mı? URL ve bir ekran görüntüsüyle [email protected] adresine yazın.