Ücretsiz Chrome uzantısı
Giriş gerektiren sayfalar ve localhost için Chrome'dan Figma'ya uzantı
Kendi tarayıcınızın gösterdiğini (paneller, yerel build'ler ve açık menüler dahil) yakalayın ve düzenlenebilir Figma katmanlarına dönüştürün.
- Giriş gerektiren sayfalar, localhost ve özel ağlarla çalışır
- Tüm sayfayı veya tek bir öğeyi yakalayın
- Hesap yok, analitik yok, uzaktan kod yok
Yakında Chrome Web Store'da
Chrome'dan Figma'ya bir uzantı, URL ile içe aktarmanın ulaşamadığı durumları çözer. HTML to Frames yakalama servisi sayfaları anonim bir ziyaretçi olarak ziyaret eder; bu yüzden yönetici panelinizi, girişinizin arkasındaki uygulamayı, dizüstü bilgisayarınızdaki bir localhost build'ini veya özel bir ağdaki staging sunucusunu göremez. Ücretsiz HTML to Frames Chrome uzantısı ise zaten oturum açmış olduğunuz oturumu kullanarak kendi tarayıcınızdan yakalar.
Ayrıca sayfanın o anki durumunu da yakalar. Bir açılır menü açıksa, bir form yarı doldurulmuşsa, bir modal görünüyorsa veya sepette üç ürün varsa, Figma'ya gelen de tam olarak odur. Akışları belgeleyen ürün yöneticileri ve gerçek durumları denetleyen tasarımcılar için bu, o ekranları yeniden oluşturmadan bir tasarım dosyasına almanın çoğu zaman tek pratik yoludur.
Tüm sayfayı yakalayabilir ya da tek bir bileşeni almak için öğe seçiciye geç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. Yakalama panonuza ya da bir .h2f dosyasına gider ve onu eklentinin Browser sekmesine yapıştırırsınız. Ya da uzantıyı tek kullanımlık bir kodla eklentinize bir kez bağlayın ve yakalamaları doğrudan açık eklentiye ileten Send to Figma'yı kullanın.
Ortaya çıkan katmanlar diğer tüm içe aktarmalarla aynıdır: düzenlenebilir metin, vektörler, görseller ve doğrulanmış Auto Layout. Bir yakalama bir içe aktarma sayılır.
Front-end geliştiriciler adım adım anlatımı Chrome uzantısıyla localhost'tan Figma'ya yazısında bulabilir. Herkese açık sayfalar için URL to Figma hiç uzantı gerektirmez; güvenlik sayfası ise uzantının tam olarak ne gönderdiğini açıklar.
Uzantıyla bir sekmeyi yakalamak
- 01
Chrome uzantısını yükleyin
Ücretsiz HTML to Frames uzantısını Chrome'a ekleyin; hesap gerektirmez.
- 02
Sayfayı istediğiniz durumda açın
Giriş yapın, yerel sunucunuzu başlatın, menüyü açın veya formu tam olarak yakalanmasını istediğiniz gibi doldurun.
- 03
Sayfayı veya bir öğeyi yakalayın
Tüm sayfayı alın ya da seçiciyle bir öğeyi vurgulayıp seçin.
- 04
Yapıştırın veya Figma'ya gönderin
Eklentinin Browser sekmesine yapıştırın ya da tek kullanımlık bir kodla bir kez eşleştirdikten sonra Send to Figma'yı kullanın.
Uzantının erişebildikleri
Giriş gerektiren sayfalar
Paneller, yönetim panelleri ve hesap sayfaları, zaten sahip olduğunuz oturumla yakalanır.
localhost ve özel ağlar
Dışarıdaki bir servisin erişemediği yerel geliştirme sunucuları, staging ve intranet sayfaları.
Birebir arayüz durumları
Açık menüler, doldurulmuş formlar, modallar ve sepetler ekranda oldukları gibi yakalanır.
Öğe seçici
Vurgulamak için üzerine gelin, üst ve alt öğe arasında geçmek için yukarı veya aşağı ok, yakalamak için Enter.
Send to Figma
Tek kullanımlık bir kodla bir kez eşleştirin; yakalamalar doğrudan açık eklentinize gider.
Tasarımı gereği gizli
Hesap yok, analitik yok, uzaktan kod yok; Send to Figma'yı kullanmadıkça hiçbir şey gönderilmez.
Front-end geliştiriciler için localhost'tan Figma'ya
Geliştiricilerin çoğu zaman tasarımcılara gerçekte neyin yapıldığını göstermesi ya da kodlanmış bir prototipi inceleme için Figma'ya taşıması gerekir. Olağan seçenekler kimsenin düzenleyemediği ekran görüntüleri ya da ekranı elle yeniden kurmaktır. Uzantı üçüncü bir seçenek sunar: localhost'u doğrudan yakalamak.
Kendi tarayıcınızda çalıştığı için uzantı, geliştirme sunucunuzun tam olarak ne işlediğini görür; şunlar dahil:
- Henüz hiçbir yere deploy edilmemiş özellik branch'leri
- Yerel verilere veya mock API'lere bağlı sayfalar
- VPN veya özel ağdaki staging ortamları
- Bileşen oyun alanları ve izole story sayfaları
Tüm sayfa yerine tek bir bileşeni yakalamak için öğe seçiciyi kullanın. Bileşeni vurgulayın, iç boşluğa ihtiyacınız varsa kapsayıcısına çıkmak için yukarı oka basın ve Enter'a basın. Sonuç, işlenmiş CSS'ten çıkarılmış Auto Layout'a sahip bir frame'dir; yani bir flexbox satırı boşlukları ve iç boşluklarıyla yatay bir Auto Layout frame'i olarak gelir.
Bu, teslim sürecini iki yönlü hale getirir: tasarımcılar gerçek uygulamanın düzenlenebilir frame'lerini alır ve yayına çıkan şey üzerine yorum yapabilir veya onu düzenleyebilir. CSS flexbox ve grid'den Auto Layout'a rehberi, yerleşimlerin nasıl eşlendiğini gösterir.
Yapıştırma ve Send to Figma
Bir yakalamayı Chrome'dan Figma'ya almanın iki yolu vardır ve ikisi de aynı katmanları üretir.
Yapıştırma
Bir yakalamadan sonra sonuç panonuza yerleştirilir. Figma'ya geçin, HTML to Frames'i açın, Browser sekmesine gidin ve yapıştırın. İsterseniz yakalamayı bunun yerine bir .h2f dosyası olarak kaydedip daha sonra eklentiye getirebilirsiniz. Bu akışta hiçbir şey bilgisayarınızdan çıkmaz.
Send to Figma
Uzantıyı tek kullanımlık bir kodla eklentinize bir kez bağlayın. Bundan sonra her yakalama pano adımı olmadan doğrudan açık eklentiye gider; art arda birkaç durumu yakalarken bu daha hızlıdır.
Send to Figma ile yakalama, eklentiniz onu alana kadar en fazla 30 dakika boyunca bizim tarafımızda bellekte tutulur. Diske yazılmaz.
| Yapıştırma | Send to Figma | |
|---|---|---|
| Kurulum | Yok | Tek kullanımlık eşleştirme kodu |
| Veri bilgisayarınızdan çıkar | Hayır | 30 dakikaya kadar bellekte tutulur |
| En uygun kullanım | Ara sıra yakalamalar | Çok sayıda durumu hızla yakalamak |
Her iki durumda da bir yakalama planınızdan bir içe aktarma olarak düşülür ve aldığınız katmanlar aynıdır.
Uzantının verilerinizle yaptıkları ve yapmadıkları
Giriş gerektiren sayfaları okuyabilen bir uzantı dikkatli incelenmeyi hak eder. HTML to Frames Chrome uzantısı mümkün olduğunca az şey yapacak şekilde tasarlandı:
- Tarayıcınızda çalışır. Yakalamalar, görüntülediğiniz sayfadan yerel olarak yapılır.
- Hesap yok. Kullanmak için kaydolmanız veya giriş yapmanız gerekmez.
- Analitik yok. Uzantıda kullanım takibi yoktur.
- Uzaktan kod yok. Uzantı bir sunucudan kod indirip çalıştırmaz.
- Varsayılan olarak hiçbir şey gönderilmez. Veriler bize yalnızca Send to Figma'yı seçerseniz ulaşır ve o durumda eklentinizi en fazla 30 dakika bellekte bekler.
Yakalama yalnızca yakalamayı seçtiğiniz sayfadakileri içerir. Kişisel veya müşteri verilerini gösteren bir sayfayı yakalamadan önce bu verilerin paylaşılan bir Figma dosyasına girmesi gerekip gerekmediğini düşünün ve yalnızca ihtiyacınız olan kısmı almak için öğe seçiciyi kullanın.
Figma tarafında eklenti, dosyanızın içeriğini okumaz. Yeni katmanları yazar ve yalnızca kendi frame'lerinin metadata'sını okur. Güvenlik sayfası kurulumun tamamını açıklar, dokümantasyon ise kurulumu ve eşleştirmeyi anlatır. Uzantı Chrome Web Store için hazırlanıyor.
Sıkça sorulan sorular
URL ile içe aktarma, sayfaları yakalama servisimizden anonim bir ziyaretçi olarak yükler; bu yüzden giriş gerektiren sayfalara, localhost'a veya özel ağlara erişemez ve her zaman varsayılan durumu görür. Uzantı ise sizin oturumunuzla ve sayfa hangi durumdaysa o haliyle kendi tarayıcınızdan yakalar.
Evet. Öğe seçiciye geçin, bir öğeyi vurgulamak için üzerine gelin, üst öğeye geçmek için yukarı oku, alt öğeye geçmek için aşağı oku kullanın ve yakalamak için Enter'a basın. İptal etmek için Esc'ye basın. Öğe, düzenlenebilir katmanlarıyla kendi frame'i olarak gelir.
Uzantıyı tek kullanımlık bir kodla eklentinizle bir kez eşleştirin. Bundan sonra her yakalama doğrudan açık eklentiye iletilir. Yakalama, eklenti onu alana kadar en fazla 30 dakika bellekte bekler ve asla diske yazılmaz.
Hayır. Hesabı, analitiği ve uzaktan kodu yoktur. Bir yakalama için Send to Figma'yı kullanmadıkça bize hiçbir şey göndermez. Bunun yerine yapıştırdığınızda yakalama panonuz veya bir .h2f dosyası üzerinden taşınır ve bilgisayarınızdan asla çıkmaz.
Evet. Uzantıdan yapılan her yakalama planınızda bir içe aktarma sayılır. Free plan ayda 10 içe aktarma içerir; Pro ve Team ise adil kullanım sınırı dahilinde sınırsızdır. Kullanım sayaçları her ay UTC'ye göre sıfırlanır ve bir yakalama yalnızca bir kez sayılır.
Evet. HTML to Frames Chrome uzantısının kendisi ücretsizdir ve hesap gerektirmez. Yakalamalar Figma eklentisi üzerinden içe aktarılır ve Free katmanla başlayan planınızdan düşülür. Uzantı Chrome Web Store'da yayımlanmak üzere hazırlanıyor.
İlgili
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