Piksel ve katman
HTML to canvas: Figma tuvalinde düzenleyebileceğiniz katmanlar
Bitmap ekran görüntüsü kütüphaneleri size piksel verir. HTML to Frames ise sayfayı Figma tuvalinize değiştirebileceğiniz vektörler, metinler ve frame'ler olarak koyar.
- Raster görsel değil, düzenlenebilir metin ve SVG vektörleri
- Gerçek canvas ve WebGL kutuları, o kutunun görseli olarak korunur
- Temiz ve tutarlı bir kare için animasyonlar dondurulur
Yakında Figma Community'de
“HTML to canvas” iki farklı anlama gelir ve bir araç seçmeden önce bunları ayırmak işe yarar. Geliştiriciler çoğu zaman html2canvas'ı kasteder: DOM'u dolaşıp sayfanın yaklaşık bir halini bir <canvas> öğesine çizen JavaScript kütüphanesi; ya da görünen pikselleri yakalayan bir tarayıcı ekran görüntüsünü. Tasarımcılar ise genellikle başka bir şeyi kasteder: bir web sayfasını üzerinde çalışabilmek için Figma tuvaline almak.
İkisi de sayfaya benzeyen bir şey üretir, ancak yalnızca biri size üzerinde çalışabileceğiniz bir şey verir. Bir bitmap ne kadar keskin olursa olsun renkli piksellerden oluşan bir ızgaradır. Bir yazım hatasını düzeltemez, bir font boyutunu değiştiremez, bir butonu yeniden renklendiremez veya bir kartı yeni bir yerleşime taşıyamazsınız. Yalnızca kırpabilir, ölçekleyebilir ve üzerine boyayabilirsiniz.
EUREKA!'nın Figma eklentisi HTML to Frames, ikinci anlamı tam olarak karşılar. Sayfayı gerçek bir tarayıcıda işler, her öğenin hesaplanmış geometrisini ve stillerini okur ve sayfayı Figma tuvalinizde yerel katmanlar olarak yeniden oluşturur: sayfa yapısını yansıtan frame'ler, orijinal stilleriyle düzenlenebilir metinler, vektöre dönüştürülmüş SVG'ler ve orijinal sığdırma ayarlarıyla yerleştirilmiş görseller. Yerleşim, doğrulanabildiği yerlerde Auto Layout'a dönüştürülür; böylece sonuç yeniden boyutlandırdığınızda da uyum sağlar.
Pikselin doğru cevap olduğu bir durum var ve eklenti bunu bilinçli olarak ele alır. Gerçek bir <canvas> öğesinin veya bir WebGL sahnesinin içinde yeniden kurulacak bir DOM yoktur; bu yüzden o kutu bir ekran görüntüsü olarak gelir, sayfanın geri kalanı ise düzenlenebilir kalır.
Bu karşılaştırmanın uzun hali için HTML to canvas ve düzenlenebilir katmanlar yazısını okuyun. Temel dönüşümü görmek için HTML to Figma ile başlayın ya da nelerin dönüştürüldüğüne özellikler sayfasından göz atın.
Bir sayfayı Figma tuvalinize yerleştirmek
- 01
Sayfanın nereden geleceğini seçin
Bir URL, yerel bir dosya veya klasör, yapıştırılan HTML ve CSS, bir Chrome sekmesi ya da MCP üzerinden bir yapay zekâ aracı.
- 02
Tarayıcının işlemesine izin verin
Sayfa izole bir tarayıcıda yüklenir, animasyonlar dondurulur ve WebGL birkaç kareden sonra dondurulur.
- 03
Katmanları tuvalde alın
Frame'ler, metinler, vektörler ve görseller mevcut Figma sayfanıza düzenlemeye hazır şekilde yerleştirilir.
Tuvalde katmanlar neden bitmap'ten iyidir
Metin, metin olarak kalır
Başlıklar ve gövde metinleri, harf aralığı, satır yüksekliği ve karışık stilleri korunarak düzenlenebilir metin olarak gelir.
SVG vektöre dönüşür
İkonlar ve logolar, bulanıklaşmadan yeniden renklendirip boyutlandırabileceğiniz düzenlenebilir vektör katmanlarına dönüştürülür.
Seçebileceğiniz bir yapı
İç içe frame'ler sayfa yapısını izler; böylece bir görseli kırpmak yerine tek bir kartı seçebilirsiniz.
Piksel yalnızca gereken yerde
Iframe'ler, poster görseli olmayan videolar ve WebGL veya 3D canvas kutuları o kutunun ekran görüntüsü olarak gelir.
Dondurulmuş, temiz yakalama
Tutarlı bir kare için animasyonlar duraklatılır; böylece yarı solmuş öğelerle karşılaşmazsınız.
Referans katmanı
Pro'da gizli ve kilitli bir ekran görüntüsü katmanı, yeniden kurulan tasarımı orijinal piksellerle karşılaştırmanızı sağlar.
html2canvas ve ekran görüntüleri ile düzenlenebilir katmanlar
Ekran görüntüsü yaklaşımları ve HTML to Frames aynı işlenmiş sayfadan başlar, ancak çok farklı yerlerde biter.
| html2canvas / tarayıcı ekran görüntüsü | Figma tuvalinde HTML to Frames | |
|---|---|---|
| Çıktı | Tek bir raster görsel | Frame'ler, metinler, vektörler ve görseller |
| Metin düzenleme | Mümkün değil | Yerinde düzenleme |
| Ölçekleme | 1x'in üzerinde bulanıklaşır | Vektörler keskin kalır |
| Yerleşim | Sabit pikseller | Doğrulandığı yerde Auto Layout, diğer yerlerde kısıtlamalar |
| Tek bir öğeyi seçme | Elle kırpma | Frame'e tıklayın |
| Tipik kullanım | Hata raporları, küçük resimler, önizlemeler | Yeniden tasarımlar, denetimler, teslim, tasarım sistemleri |
html2canvas ayrıca CSS işlemeyi JavaScript ile yeniden uygular; bu yüzden tarayıcının desteklediği özellikleri kaçırabilir. HTML to Frames ise değerleri, işlemeyi tamamladıktan sonra gerçek Chromium tabanlı bir tarayıcıdan okur ve Figma özelliklerine eşler: konik ve tekrarlayan gradyanlar dahil gradyanlar, gölgeler, karışım modları, blur ve backdrop-blur, clip-path, mask-image ve daha fazlası.
Ekran görüntülerinin hâlâ bir yeri var. Hızlı bir görsel kayda ihtiyacınız varsa bir bitmap yeterlidir. Herhangi bir şeyi değiştirmeyi düşünüyorsanız katmanlar sizi sayfayı yeniden çizmekten kurtarır.
Kullanışlı bir pratik kural: sonraki adım bir yorum veya bir ticket ise ekran görüntüsü yeterlidir. Sonraki adım Figma'yı açıp bir şeyi değiştirmekse, bunun yerine katmanları içe aktarın.
Gerçek bir <canvas> veya WebGL öğesine ne olur
Bir sayfadaki bazı içerikler zaten pikseldir. Bir <canvas> öğesi JavaScript ile çizer, bir WebGL sahnesi ise 3D grafikleri GPU'da işler. Bu kutuların içinde okunacak bir DOM yoktur; bu yüzden hiçbir araç onları anlamlı vektör katmanlarına dönüştüremez.
HTML to Frames bunları sessizce başarısız olmak yerine açıkça ele alır:
- Kutu, tam konumunda ve boyutunda bir ekran görüntüsü olarak yakalanır.
- WebGL sahneleri birkaç kareden sonra dondurulur; böylece boş veya geçiş ortasında bir kare yerine sabit bir görsel alırsınız.
- Kutunun etrafındaki her şey (başlıklar, butonlar ve üzerine konumlandırılmış katmanlar gibi) düzenlenebilir katmanlar olarak kalır.
Aynı kural, katman olamayan diğer gömülü içerikler için de geçerlidir: haritalar gibi iframe'ler, poster görseli olmayan videolar ve object veya embed öğeleri. Her biri kendi kutusunun görseli olur ve sonuç ekranı varsa uyarıları listeler.
Pratikte bu, 3D hero bölümü olan bir açılış sayfasının bile kullanılabilir bir tasarıma dönüştüğü anlamına gelir. Hero görselini yeni bir görselle değiştirebilir, üzerindeki metni yeniden yazabilir ve boşlukları ayarlayabilirsiniz; sayfanın geri kalanı Auto Layout'unu korur. Bu yerleşimin nasıl çıkarıldığını Auto Layout'un açıklaması yazısında görün.
Hareketli bir sayfadan temiz bir kare almak
Modern sayfalar hareket eder: karuseller döner, öğeler kaydırınca belirir, çerez bannerları aşağıdan kayar ve hero bölümleri yüklenirken canlanır. Saf bir yakalama, o milisaniyede ne oluyorsa onu dondurur.
HTML to Frames sayfayı sıradan bir ziyaretçinin gördüğü gibi yakalar ve sonucu öngörülebilir kılmak için birkaç kontrol sunar:
Dondurulmuş animasyonlar
Animasyonlar dondurulur; böylece yakalama her öğeyi bir geçişin ortasında değil, yerine oturmuş halde gösterir.
Hide cookie banners & popups
Bu seçeneği açtığınızda onay bannerları ve açılır pencereler yakalamadan önce gizlenir; böylece tuvalinizde sayfanın üzerini kapatmazlar.
Extra wait
İçeriği geç yükleyen yavaş sayfalara yakalamadan önce daha fazla zaman tanınabilir. Extra wait bir Pro seçeneğidir.
Full page
İhtiyacınıza göre tüm kaydırılan sayfayı ya da yalnızca ilk ekranı yakalayın.
Bu seçenekler, sayfa ister bir URL'den, ister yerel bir dosyadan, ister Chrome uzantısından gelsin geçerlidir. Varsayılan görünüm yerine açık bir menü gibi belirli bir durumu istediğinizde doğru seçim uzantıdır.
Bir şey hâlâ animasyon ortasında yakalanıyor veya eksikse, sonuç ekranı uyarıları listeler; farklı bir seçenekle tek tıkla yeniden içe aktarmak genellikle en hızlı çözümdür.
Sıkça sorulan sorular
Hayır. html2canvas, DOM'un yaklaşık bir halini bir bitmap'e çizen bir JavaScript kütüphanesidir. HTML to Frames ise sayfayı Figma tuvalinde düzenlenebilir katmanlar olarak yeniden kuran bir Figma eklentisidir: frame'ler, metinler, vektörler ve görseller; doğrulanabildiği yerlerde Auto Layout ile.
Evet. Metin; tek paragraf içindeki karışık stiller, bağlantılar, harf aralığı, satır yüksekliği ve text-transform dahil yerel Figma metin katmanları olarak gelir. Bir font mevcut değilse, Missing fonts ekranı sayfa oluşturulmadan önce bir alternatif seçmenizi sağlar ve seçiminiz hatırlanır.
İçlerinde yeniden kurulacak bir DOM yoktur; bu yüzden her böyle kutu, tam konumunda ve boyutunda bir ekran görüntüsü olarak gelir. Sabit bir görsel vermek için WebGL birkaç kareden sonra dondurulur. Kutunun etrafındaki her şey düzenlenebilir katmanlar olarak kalır.
Evet, Pro'da. Reference screenshot seçeneği, içe aktarmanın altına gizli ve kilitli bir görsel katmanı ekler. Yeniden kurulan katmanları orijinal işlemeyle karşılaştırmak istediğinizde açın, geri kalan zamanda yolunuza çıkmaması için gizli bırakın.
Animasyonlar dondurulur ve isterseniz çerez bannerları ile açılır pencereler gizlenir; böylece yakalama yerine oturmuş bir sayfa gösterir. Bir ekran görüntüsü ise o anda ekranda ne varsa onu yakalar. Açık bir menü gibi belirli bir duruma ihtiyacınız varsa Chrome uzantısını kullanın.
Doğrusal, radyal ve konik gradyanlar, iç ve dış gölgeler, text-shadow, opaklık, karışım modları, blur ve backdrop-blur, clip-path, mask-image, döndürme ve ölçekleme. Henüz desteklenmeyenler: skew ve 3D dönüşümler, path() clip-path'leri, çok katmanlı maskeler ve Display-P3 renkleri. Tam liste özellikler sayfasında.
İ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