Localhost to Figma: Chrome uzantısıyla her sayfayı yakalayın

URL ile içe aktarma, sayfa herkese açık olduğunda çalışır. Figma'da gerçekten ihtiyaç duyduğunuz ekranların pek çoğu ise öyle değildir: localhost:3000 üzerinde çalışan özellik branch'i, giriş arkasındaki bir yönetim paneli, ofis ağındaki bir staging sunucusu ya da sepetinde ürünler bulunan bir ödeme sayfası.

Bunlar için HTML to Frames'in ücretsiz bir Chrome uzantısı var. Sayfayı kendi tarayıcınızdan, tam olarak gördüğünüz haliyle yakalar ve onu Auto Layout ile düzenlenebilir frame'lere, metinlere, vektörlere ve görsellere dönüştüren Figma eklentisine teslim eder. Bu rehber localhost'u Figma'ya nasıl aktaracağınızı, giriş gerektiren sayfaları ve belirli durumları nasıl yakalayacağınızı ve bir şeyler ters gittiğinde ne yapacağınızı anlatıyor.

URL yerine Chrome uzantısını ne zaman kullanmalı

Eklentinin Link kaynağı, sayfaları HTML to Frames yakalama servisindeki izole bir tarayıcıda işler. Bu tarayıcı, herkese açık internette anonim bir ziyaretçinin gördüğünü görür. Makinenize, özel ağınıza veya giriş yapılmış oturumunuza erişemez.

Sayfa şu durumlardaysa uzantıyı kullanın:

• Yerelde çalışıyorsa: localhost, 127.0.0.1 veya ağınızdaki bir geliştirme sunucusu gibi.
• Giriş arkasındaysa: SaaS panelleri, yönetim panelleri, hesap ayarları veya müşteri portalları gibi.
• Özel bir ağdaysa: VPN üzerindeki staging ortamları veya intranet araçları gibi.
• Belirli bir durumdaysa: açık bir açılır menü, doldurulmuş bir form, bir modal, ürün eklenmiş bir sepet ya da gönderim sonrası bir hata mesajı gibi.

Herkese açık sayfalar için URL to Figma içe aktarması hâlâ en basit yoldur ve tek tıkla Responsive set'i destekler.

Uzantı nedir (ve ne değildir)

Uzantı tarayıcınızda çalışır. Hesap gerektirmez, analitik içermez ve uzaktan kod yüklemez. Siz Send to Figma'yı seçmedikçe HTML to Frames'e hiçbir şey göndermez. O durumda bile yakalama, eklentiniz onu alana kadar en fazla 30 dakika yalnızca bellekte tutulur.

Bir yakalama planınızda bir içe aktarma sayılır. Uzantının kendisi ücretsizdir. Daha fazlası için Chrome uzantısı sayfasını okuyun.

Adım adım: localhost'tan Figma'ya

1. HTML to Frames Chrome uzantısını yükleyin ve araç çubuğuna sabitleyin.
2. Geliştirme sunucunuzu başlatın ve sayfayı Chrome'da açın, örneğin http://localhost:3000/settings.
3. Pencere genişliğini istediğiniz ekrana ayarlayın (aşağıda ayrıntılı anlatılıyor).
4. Sayfayı istediğiniz duruma getirin: giriş yapılmış, veriler yüklenmiş, menü açık.
5. Uzantı simgesine tıklayın ve tüm sayfayı yakalamayı ya da bir öğe seçmeyi tercih edin.
6. Yakalamayı Figma'ya iletin: pano veya bir .h2f dosyası üzerinden ya da Send to Figma ile.
7. Figma'da eklenti katmanları oluşturur ve frame'leri, katmanları, Auto Layout oranını ve varsa uyarıları içeren sonuç ekranını gösterir.

Tüm sayfa ve tek bir öğe

Uzantı iki yakalama modu sunar.

Tüm sayfayı yakalayın

Bütünüyle incelemek veya yeniden tasarlamak istediğiniz ekranlar için varsayılan budur: bir panel, bir ayarlar sayfası, geliştirme aşamasındaki bir açılış sayfası. Sayfa için DOM'u yansıtan iç içe frame'lere sahip tek bir frame alırsınız.

Tek bir öğe seçin

Çoğu zaman yalnızca bir bileşene ihtiyacınız olur: bir fiyat kartı, navigasyon çubuğu, bir veri tablosu, bir modal. Öğe seçimini tercih edin ve:

• Sayfanın üzerinde gezinin; imlecin altındaki öğe vurgulanır.
• Üst öğeye geçmek için ↑, bir alt öğeye geçmek için ↓ tuşuna basın.
• Vurgulanan öğeyi yakalamak için Enter'a basın.
• İptal etmek için Esc'ye basın.

Öğe yakalama, canlı bir üründen bileşen referansı oluşturmanın ya da tek bir widget'ı sayfanın geri kalanı olmadan inceleme için bir tasarımcıya göndermenin en hızlı yoludur.

İki teslim yolu: pano/.h2f veya Send to Figma

Pano ve .h2f

Yakalama panonuza kopyalanır ya da bir .h2f dosyası olarak kaydedilir. Figma'da eklentiyi açın, Browser sekmesine gidin ve yapıştırın. Sayfayı başka biri yakaladığında (örneğin bir müşteri paneline erişimi olan bir ürün yöneticisi) ve bir tasarımcı onu daha sonra içe aktardığında .h2f dosyası kullanışlıdır.

Send to Figma

Sık yakalama yapıyorsanız uzantıyı tek kullanımlık bir kodla eklentinize bir kez bağlayın. Bundan sonra yakalamalar yapıştırma adımı olmadan doğrudan açık eklentiye gider. Çalışırken eklentiyi Figma'da açık tutun.

Bir yakalama = mevcut pencere genişliğinde bir ekran

Uzantı tarayıcınızın işlediğini yakalar; bu yüzden bir yakalama, mevcut pencere genişliğinde bir ekrandır. Pencereniz 1440 px genişliğindeyse 1440'lık bir desktop frame'i alırsınız.

Diğer kırılma noktalarını yakalamak için pencereyi yeniden boyutlandırın ve tekrar yakalayın:

• Tablet: yaklaşık 768 px genişliğe getirin ve yakalayın.
• Mobile: yaklaşık 390 px genişliğe getirin ve yakalayın.

Chrome DevTools'un cihaz araç çubuğu, tam genişlikleri ayarlamanın pratik bir yoludur. Her yakalama bir içe aktarma sayılır. Sayfa herkese açıksa, eklentinin Link kaynağı bunun yerine tam Responsive set'i (Desktop + Tablet + Mobile) tek bir içe aktarmada üretebilir.

Bir URL'nin yeniden üretemeyeceği durumları yakalamak

Uzantı sayfanın o anki durumunu yakalar; bu da aksi halde yeniden oluşturması zahmetli olan ekranların kilidini açar:

• Açık menüler ve açılır listeler. Menüyü açın, ardından sayfayı yakalayın ya da menü öğesini seçin.
• Doldurulmuş formlar ve doğrulama hataları. Alanları doldurun, hataları tetiklemek için gönderin, ardından yakalayın.
• Sepetler ve ödeme adımları. Ürün ekleyin ve sepeti gerçek kalemlerle yakalayın.
• Boş, yükleniyor ve dolu durumlar. Bir durum envanteri için aynı paneli verili ve verisiz yakalayın.
• Modallar ve bildirimler (toast). Tetikleyin ve ekrandayken yakalayın.

Ürün ekipleri için bu, bir yeniden tasarımdan veya kullanılabilirlik incelemesinden önce bir akışın her durumunu Figma'da belgelemenin en hızlı yoludur.

Neler aktarılır

Uzantı, diğer tüm kaynaklarla aynı dönüştürme motorunu besler; böylece özellikler sayfasında anlatılan özelliklerin tamamını alırsınız: yerleşim, karışık stilli metin, gradyanlar, görseller, düzenlenebilir vektör olarak SVG, kenarlıklar, gölgeler, blur, ::before/::after, form alanları, shadow DOM ve z-index sırası.

Auto Layout tarayıcının ölçtüğü geometriden çıkarılır ve doğrulanır: her alt öğenin konumu 2 px içinde kontrol edilir; tutmazsa daha basit bir plan denenir ya da frame mantıklı kısıtlamalarla absolute konumlarını korur. Testlerimizde Auto Layout, siteye bağlı olarak frame'lerin yaklaşık yüzde 86 ile 97'sinde çıkarıldı. Front-end'i kendiniz yazıyorsanız, bu eşleme rehberi temiz içe aktarılan CSS'in nasıl yazılacağını gösteriyor.

Katmana dönüşemeyen gömülü içerikler (haritalı iframe'ler, poster görseli olmayan videolar veya WebGL canvas'ları gibi) o kutunun ekran görüntüsü olarak gelir.

Hızlı bir yakalama öncesi kontrol listesi

İşi yeniden yapmamak için her yakalama oturumundan önce bu listeyi gözden geçirin:

• Genişlik: pencere istediğiniz kırılma noktasında mı ve tarayıcı yakınlaştırması %100'de mi?
• Veri: sayfa grafikler, görseller ve tembel yüklenen bölümler dahil tamamen yüklendi mi?
• Durum: menüler, modallar veya form hataları tam olarak Figma'da görmek istediğiniz gibi görünüyor mu?
• İçerik: aksi halde gerçek müşteri verilerinin görüneceği yerlerde bir test hesabına veya örnek verilere geçtiniz mi?
• Kapsam: tüm sayfaya mı ihtiyacınız var, yoksa inceleme için tek bir öğe daha mı anlaşılır olur?
• Teslim: Send to Figma kullanıyorsanız eklenti Figma'da açık mı?

Burada harcanan iki dakika, aynı ekranı tekrar tekrar yakalamaktan kurtarır.

Giriş gerektiren ve dahili sayfalar için gizlilik

Bir paneli yakalamak, üzerinde ne varsa onu yakalamak demektir. Birkaç pratik kural:

• Yakalama tarayıcınızda gerçekleşir. Figma'ya yapıştırmadıkça veya Send to Figma kullanmadıkça hiçbir şey tarayıcıdan çıkmaz.
• Send to Figma geçicidir. Yakalama eklentiniz onu alana kadar en fazla 30 dakika bellekte bekler ve diske yazılmaz.
• Önce hassas verileri maskeleyin. Mümkün olduğunda test hesapları veya örnek veriler kullanın; çünkü ekranda olan her şey Figma dosyanızda metin katmanı olarak yer alır.
• Figma dosyanız okunmaz. Eklenti yalnızca katman yazar ve kendi frame'lerinin metadata'sını okur.

Politikanın tamamı için güvenlik sayfasına bakın.

Sorun giderme

Yakalamada geç yüklenen içerik eksik

Yakalamadan önce tembel yüklenen bölümler ve grafikler dahil sayfanın tamamen yüklenmesini bekleyin. İçerik kaydırınca yükleniyorsa sayfayı bir kez kaydırın.

Yerleşim gördüğümden farklı görünüyor

Pencere genişliğini kontrol edin; yakalama mevcut genişliği birebir yansıtır. Ayrıca tarayıcı yakınlaştırması uygulanmadığından emin olun.

Send to Figma hiçbir şey yapmıyor

Eklentinin Figma'da açık olduğundan emin olun. Eşleştirmeyi uzun zaman önce yaptıysanız veya makine değiştirdiyseniz, yeni bir tek kullanımlık kodla yeniden eşleştirin. Yakalamalar 30 dakikaya kadar bekler; bu yüzden eklentiyi o süre içinde açmak yine de teslim edilmelerini sağlar.

Browser sekmesine yapıştırma çalışmıyor

Panonuzun içeriği başka bir kopyalamayla değişmiş olabilir. Tekrar yakalayın ya da .h2f dosyası olarak kaydedip onu yükleyin.

Fontlar yanlış görünüyor

Yerel veya lisanslı web fontları makinenizde yüklü olmayabilir. Eklentinin Missing fonts ekranı oluşturmadan önce alternatifler önerir ve seçimlerinizi site bazında hatırlar.

Bazı frame'ler Auto Layout değil

Sonuç ekranı bir frame'in neden absolute kaldığını listeler. Çoğu zaman üst üste binen içerik veya negatif margin'lerdir. Frame yine de sayfayla eşleşir; yalnızca kısıtlamalarla absolute konumlarını korur.

Bir geliştirici iş akışında localhost'tan Figma'ya

Front-end geliştiriciler için uzantı, tasarım teslimini iki yönlü bir yola dönüştürür:

1. Özelliği yerelde geliştirin.
2. Yeni ekranları desktop ve mobil genişliklerinde yakalayın.
3. Onları orijinal tasarımın yanına Figma'ya gönderin.
4. Tasarımcılar gerçek uygulamayı inceler, yorum yapar ve düzenler.
5. Siz düzeltir, yeniden yakalar ve karşılaştırırsınız.

Yapay zekâ araçlarıyla geliştiriyorsanız doğrudan bir yol da var: Claude Code, Claude Desktop veya Cursor, MCP üzerinden eklentiye HTML gönderebilir. MCP ile AI to Figma yazısına bakın.

Başlarken

Chrome uzantısını yükleyin, yerel build'inizi açın ve nasıl aktarıldığını görmek için önce bir öğeyi, bir kartı veya bir butonu yakalayın. Ardından tüm sayfayı desktop ve mobil genişliklerinde yakalayın. Dokümantasyon eşleştirmeyi ve Browser sekmesini ayrıntılı olarak anlatıyor; fiyatlandırma ise yakalamaların içe aktarmalarınızdan nasıl düşüldüğünü açıklıyor.