Figma eklentisi
HTML to Figma: ekran görüntüsü değil, düzenlenebilir katmanlar
HTML to Frames her web sayfasını gerçek Figma frame'lerine, metinlerine, vektörlerine ve görsellerine dönüştürür; Auto Layout ise korunmadan önce kontrol edilir.
- Beş kaynak: bağlantı, çoklu bağlantı, yerel dosyalar, Chrome sekmesi, yapay zekâ araçları
- Auto Layout her alt öğe için tek tek doğrulanır, böylece tasarım asla bozulmaz
- Ayda 10 içe aktarmalı Free plan
Yakında Figma Community'de
HTML'i Figma'ya aktarmak, sonucu açana kadar basit görünür: ya düzenleyemediğiniz düz bir görsel ya da bir frame'i yeniden boyutlandırdığınız anda dağılan, absolute konumlu kutu yığını. EUREKA!'nın Figma eklentisi HTML to Frames farklı bir yol izler. Sayfanızı gerçek bir tarayıcıda işler, her öğeyi ölçer ve tuvalinizde yerel Figma katmanları olarak yeniden kurar: frame'ler, karışık stilli düzenlenebilir metinler, vektöre dönüştürülmüş SVG'ler ve orijinal sığdırma ve döşeme ayarlarını koruyan görseller.
Eklenti önce sayfayı absolute konumlarla piksel piksel birebir kurar. Ardından frame'leri içten dışa doğru dolaşır ve tarayıcının geometrisinden yığınları, kaydırmalı satırları, boşlukları (gap), iç boşlukları (padding) ve hizalamayı çıkarır. Her Auto Layout planı uygulanır ve her alt öğenin konumu 2 px tolerans içinde doğrulanır. Bir plan tutmazsa daha basit olanı denenir; hiçbiri uymazsa o frame mantıklı kısıtlamalarla (constraints) absolute konumlarını korur. Elinize bir kopya değil, bir tasarımcının kurduğu gibi davranan bir dosya geçer.
HTML'i nerede olursa olsun getirebilirsiniz: herkese açık bir URL, tek seferde 10'a kadar bağlantı, yerel bir HTML dosyası, bir site klasörü veya .zip, yapıştırılan kod, kendi Chrome'unuzdaki bir sekme ya da MCP üzerinden bağlanan bir yapay zekâ aracı. Özellikler sayfası, gradyanlardan ve gölgelerden ::before sözde öğelerine ve shadow DOM'a kadar dönüştürülen her şeyi listeler.
Sürece yeniyseniz, adım adım rehber HTML'i Figma'ya nasıl dönüştürürsünüz ilk içe aktarmanızda size yol gösterir. Çoğunlukla canlı sitelerle çalışıyorsanız URL to Figma sayfasına bakın; giriş gerektiren veya localhost üzerindeki sayfalar için doğru yol Chrome uzantısı. Fiyatlar ayda 10 içe aktarmayla $0'dan başlar; Pro'nun neler eklediğini fiyatlandırma sayfası anlatır.
HTML'i dört adımda Figma'ya dönüştürme
- 01
Eklentiyi açın ve bir kaynak seçin
HTML'inizin nerede olduğuna göre Link, Multiple, Local file, Browser veya AI'ı seçin.
- 02
Ekranları ve seçenekleri belirleyin
Desktop, Laptop, Tablet veya Mobile'ı seçin; Auto Layout, Images veya Hide cookie banners & popups gibi seçenekleri açıp kapatın.
- 03
Eksik fontları çözün
Hiçbir şey oluşturulmadan önce Missing fonts ekranı alternatifler önerir ve seçimlerinizi site bazında hatırlar.
- 04
Sonucu inceleyin
Sonuç ekranı frame'leri, katmanları, Auto Layout oranını ve uyarıları gösterir; herhangi bir frame'in neden absolute kaldığı da dahil.
Dönüşümü düzenlenebilir kılan şey
Piksel değil, yerel katmanlar
Elle çizilmiş herhangi bir şey gibi seçebileceğiniz, yeniden adlandırabileceğiniz ve yeniden stillendirebileceğiniz frame'ler, metinler, vektörler ve görseller.
Doğrulanmış Auto Layout
Yığınlar, boşluklar, iç boşluklar ve hizalama ölçülen geometriden çıkarılır ve korunmadan önce 2 px içinde kontrol edilir.
Gerçek metin stilleri
Karışık stiller, bağlantılar, harf aralığı, satır yüksekliği ve text-transform düzenlenebilir metin olarak gelir.
Gradyanlar, gölgeler, bulanıklık
Doğrusal, radyal ve konik gradyanlar, iç ve dış gölgeler, karışım modları, blur ve backdrop-blur korunur.
Responsive ekranlar
Desktop, Laptop 1280, Tablet 768 ve Mobile 390'ı yakalayın ya da Pro'da tek tıkla tam bir Responsive set alın.
Beş giriş yolu
Bir bağlantıdan, 10'a kadar bağlantıdan, yerel dosyalardan, bir Chrome sekmesinden veya MCP üzerinden bir yapay zekâ aracından içe aktarın.
Düzenlenebilir katmanlar ve ekran görüntüsü
HTML to Figma dönüşümü vaat eden pek çok araç, sayfanın bir resmini yapıştırır. Bu bir mood board için işe yarar ama orada biter: bir başlığı değiştiremez, bir rengi değiştiremez veya bir kartı taşıyamazsınız. HTML to Frames ise yapıyı yeniden kurar.
| Ekran görüntüsü olarak içe aktarma | HTML to Frames | |
|---|---|---|
| Metin | Pikseller | Karışık stilli düzenlenebilir metin |
| İkonlar ve logolar | Pikseller | Düzenlenebilir vektörlere dönüştürülmüş SVG |
| Yerleşim | Düz görsel | Doğrulanmış Auto Layout'lu iç içe frame'ler |
| Renkler | Gözle örneklenir | Kesin değerler, isteğe bağlı renk değişkenleri (Pro) |
| Yeniden boyutlandırma | Görseli gerer | Auto Layout ve kısıtlamalar uyum sağlar |
Dürüst bir istisna var. Katman olarak var olamayan içerikler (gömülü bir harita iframe'i, poster görseli olmayan bir video veya bir WebGL sahnesi) o kutunun ekran görüntüsü olarak gelir. Sayfanın geri kalanı etrafında düzenlenebilir kalır; böylece arka planında video olan bir hero bölümü bile size düzenlenebilir başlıklar, butonlar ve navigasyon verir.
Yine de piksel referansı isterseniz, Pro'da Reference screenshot seçeneği bulunur: içe aktarmanın altına yerleştirilen gizli, kilitli bir katman; böylece yeniden kurulan tasarımı orijinaliyle istediğiniz zaman karşılaştırabilirsiniz. Farka daha derinlemesine bakmak için HTML to canvas ve düzenlenebilir katmanlar yazısını okuyun.
Beş kaynak, tek sonuç
Her kaynak aynı tür çıktıyla sonuçlanır; bu yüzden durumunuza hangisi uyuyorsa onu seçebilirsiniz.
Link ve Multiple
Herkese açık bir URL ya da sırayla işlenen 10'a kadar bağlantı yapıştırın. Her sayfa tuvalde kendi satırı olarak yer alır. Multiple içe aktarma Free dahil her planda kullanılabilir.
Local file
Tek bir HTML dosyasını, tüm site klasörünü (ardından hangi sayfaları istediğinizi seçin) veya bir .zip'i bırakın ya da HTML ve CSS'i doğrudan yapıştırın. Yüklemeler 30 MB'a kadar olabilir ve içe aktarma biter bitmez silinir.
Browser
Ücretsiz Chrome uzantısı tarayıcınızın gördüğünü yakalar: giriş yapılmış paneller, localhost, özel ağlar ve bir sayfanın o anki durumu, örneğin açık bir menü veya doldurulmuş bir form. Bkz. Chrome uzantısından Figma'ya.
Yapay zekâ araçları
Eklentinin AI sekmesinden Claude Code, Claude Desktop, Cursor veya başka bir MCP istemcisini bağlayın; üretilen sayfalar açık eklentinize düşer. Ayrıntılar AI to Figma sayfasında.
Hangi kaynağı seçerseniz seçin, bir içe aktarma tüm ekranlarıyla birlikte bir sayfa sayılır; yani aynı sayfanın Desktop, Tablet ve Mobile yakalaması tek bir içe aktarmadır. Her frame kaynak URL'sini saklar; bu da canlı sayfa değiştiğinde onu tek tıkla yeniden içe aktarabileceğiniz anlamına gelir.
Dönüştürücünün ele aldıkları
Modern CSS, çoğu HTML to Figma aracının sadakatini kaybettiği yerdir. HTML to Frames tarayıcının hesaplanmış sonucunu okur; bu sayede geniş bir özellik yelpazesini ele alır:
- Flexbox ve grid'den gelen yerleşim, tuttuğu yerlerde Auto Layout'a çevrilir (bkz. CSS flexbox ve grid'den Auto Layout'a)
- Farklı renkte tek bir kenar dahil kenarlıklar ve köşe yarıçapı
object-fit,background-size, döşeme ve yüksek çözünürlüklüsrcsetiçeren görsellerclip-path,mask-image,::beforeve::after, CSS sayaçları ve Chrome gibi çizilen liste işaretleri- CSS döndürme ve ölçekleme, opaklık,
filter: grayscale/opacity - Form alanları, üst simge ve alt simge, shadow DOM ve z-index sırası
Bazı şeyler henüz desteklenmiyor: skew ve 3D dönüşümler, path() clip-path'leri, çok katmanlı maskeler ve Display-P3 renkleri. Bunları açıkça listeliyoruz, böylece içe aktarmadan önce ne bekleyeceğinizi bilirsiniz. Tam liste özellikler sayfasında, kurulum soruları ise dokümantasyonda yanıtlanıyor.
Bir şey birebir temsil edilemediğinde sonuç ekranı size söyler. Eksik fontları, uyarıları, Auto Layout alan frame'lerin oranını ve absolute kalan her frame için nedenini listeler. Dönüşümün hangi kısımlarını tekrar kontrol etmeniz gerektiğini asla tahmin etmek zorunda kalmazsınız.
Sıkça sorulan sorular
Hayır. HTML to Frames sayfayı yerel Figma katmanları olarak yeniden kurar: frame'ler, düzenlenebilir metinler, SVG'den vektörler ve görseller. Yalnızca katman olamayan kutular (harita iframe'leri, poster görseli olmayan videolar veya WebGL canvas'ları) o kutunun ekran görüntüsü olarak gelir; etraflarındaki her şey düzenlenebilir kalır.
Beş kaynaktan: herkese açık bir bağlantı, tek bir Multiple içe aktarmada 10'a kadar bağlantı, yerel dosyalar (tek bir HTML dosyası, bir site klasörü, bir .zip veya yapıştırılan kod), ücretsiz uzantı aracılığıyla Chrome'daki bir sekme ve MCP üzerinden bağlanan Claude Code, Claude Desktop veya Cursor gibi yapay zekâ araçları.
Evet. Sayfayı piksel piksel birebir kurduktan sonra eklenti yığınları, boşlukları, iç boşlukları ve hizalamayı çıkarır, uygular ve her alt öğeyi 2 px içinde doğrular. Bir plan başarısız olursa daha basit olanı denenir; olmazsa frame kısıtlamalarla absolute konumlarını korur, böylece tasarım bozulmaz.
Evet. Free plan, içe aktarma başına bir ekranla ayda 10 içe aktarma içerir ve 10 bağlantıya kadar Multiple içe aktarma dahildir. Pro; içe aktarma başına dörde kadar ekran, stiller ve değişkenler, bileşenler, Light + Dark ve daha fazlasını ayda $7'lık lansman fiyatıyla ekler.
Sayfalar izole, sandbox içinde çalışan bir tarayıcıda işlenir. Sonuç bir kez teslim edilir ve ardından bellekten silinir; asla diske yazılmaz ve iş kaydı 15 dakika sonra unutulur. Yüklenen dosyalar içe aktarma biter bitmez silinir.
Eklenti, oluşturmadan önce önerilen alternatiflerle bir Missing fonts ekranı gösterir. Seçimleriniz site bazında ya da tercih ederseniz tüm siteler için hatırlanır; böylece aynı sitenin tekrar içe aktarılmasında yeniden sorulmaz. Font eşleme Free dahil her planda kullanılabilir.
İ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