Figma eklentisi · Chrome uzantısı · MCP
Her web sayfası, gerçek Figma katmanları olarak.
HTML to Frames; canlı URL'leri, yerel HTML'i, Chrome sekmelerini ve yapay zekâ ile üretilmiş kodu düzenlenebilir, responsive Figma frame'lerine dönüştürür. Auto Layout doğrulanarak uygulanır, böylece tasarımınız asla bozulmaz.
Free plan: ayda 10 içe aktarma. Hesap yok, kredi kartı yok.
Yakında Figma Community'de
- Doğrulanmış Auto Layout
- Desktop · Tablet · Mobile
- Değişkenler ve stiller
- Bileşenler ve hover durumları
Beş giriş yolu. Tek temiz sonuç.
- LinkHerkese açık herhangi bir URL'yi yapıştırın.
- MultipleTek seferde 10 bağlantıya kadar, her planda.
- Local fileHTML dosyası, site klasörü, .zip veya yapıştırılan kod.
- BrowserGiriş gerektiren sayfalar, localhost, açık menüler.
- Yapay zekâ araçlarıClaude, Cursor ve her MCP istemcisi.
Nasıl çalışır
URL'den Auto Layout frame'lerine dört adımda
Bu, eklentinin gerçek akışı: Figma içinde kullanacağınız panelin ta kendisi.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
3 frame içe aktarıldı
77 frame'in 60'ında Auto Layout · 23 renk değişkeni · 19 metin stili · 10 bileşen
- 01
Bağlantıyı yapıştırın
Ya da bir klasör bırakın, kod yapıştırın, bir Chrome sekmesi gönderin veya yapay zekâ aracınızın bir sayfa göndermesine izin verin.
- 02
Ekranlarınızı seçin
Desktop, sitenin kendi tasarım genişliğinde açılır: tahmin edilmez, ölçülür. Tablet ve Mobile'ı tek tıkla ekleyin.
- 03
İçe aktarın
İzole bir tarayıcı sayfayı sıradan bir ziyaretçinin gördüğü gibi işler, çerez bannerlarını gizler ve tembel yüklenen (lazy) içeriği yükler.
- 04
Hemen düzenleyin
Frame'ler, metinler, vektörler ve görseller Auto Layout, değişkenler, metin stilleri ve bileşenlerle birlikte gelir.
2 px
Auto Layout, tarayıcının kendi yerleşimiyle 2 px tolerans içinde karşılaştırılarak kontrol edilir.
%86–97
Test ettiğimiz gerçek sitelerde Auto Layout alan frame'lerin oranı.
10
Tek bir Multiple içe aktarmadaki bağlantı sayısı; Free planda da dahil.
4
Pro'da içe aktarma başına ekran: Desktop, Laptop, Tablet ve Mobile.
Rakamlar gerçek siteler üzerinde yaptığımız kendi testlerimizden; pazarlama hesabı değil.
Auto Layout motoru
Tasarımınızı asla bozmayan Auto Layout
Çoğu dönüştürücü bir yerleşim tahmin eder ve umar. HTML to Frames önce sayfayı piksel piksel birebir kurar, ardından içten dışa doğru çalışır: tarayıcının ölçtüğü geometriden yığınları, kaydırmalı satırları, boşlukları (gap), iç boşlukları (padding) ve hizalamayı çıkarır, Auto Layout'u uygular ve her alt öğenin konumunu kontrol eder. Herhangi bir şey 2 px'ten fazla kayarsa daha basit bir plan denenir; o da tutmazsa frame, mantıklı kısıtlamalarla (constraints) birlikte tam konumlarını korur. Sonuç ekranı, bir frame'in neden absolute kaldığını bile size söyler.
- Ortalanmış içerik Center, eşit kartlar Fill olur
- Max-width kapsayıcılar yeniden boyutlandırırken ortada kalır
- Absolute frame'ler Stretch, Scale, Center veya Min/Max kısıtlamaları alır
- Tanılama listesi, absolute konumda kalan her frame'i açıklar
Özellikler
Aksi halde elle yeniden kuracağınız her şey
HTML to Frames sayfayı bir tarayıcının yerleştirdiği gibi okur, ardından Figma katmanlarını bir tasarımcının kuracağı gibi yazar.
Doğrulanmış Auto Layout
Satırlar, yığınlar ve ızgaralar Auto Layout'a dönüşür. Her frame uygulandıktan sonra kontrol edilir; eşleşmezse geri alınır.
Responsive set
Desktop, Tablet ve Mobile tek içe aktarmada; paralel yakalanır ve yan yana yerleştirilir.
Ölçülen site genişliği
Desktop, sayfanın gerçek tasarım genişliğinde açılır: tam genişlik (full-bleed) düzenlerde 1920, kutulu sitelerde kutu genişliği.
Değişkenler ve stiller
Renkler, sitenin CSS token'larına göre adlandırılan değişkenlere; tipografi ve gölgeler stillere dönüşür. Mevcut olanlar yeniden kullanılır.
Bileşenler ve hover
Tekrarlanan kartlar, butonlar ve menü öğeleri instance'larıyla birlikte bileşene; hover görünümleri varyantlara dönüşür.
Light + Dark modları
Tek içe aktarma, iki mod: Light ve Dark değerlerine sahip bir değişken koleksiyonu ve her ekranın koyu bir kopyası.
Prototipe hazır
Bağlantılar tıklanabilir kalır, içe aktarılan sayfalar birbirine bağlanır, sabit header'lar ve kaydırma alanları Present modunda çalışır.
Font eşleme
Eksik fontlar mı var? Yerine geçecekleri bir kez seçin; site bazında hatırlanır.
Tasarımı gereği gizli
Sonuçlar bir kez teslim edilir ve asla diske yazılmaz. Yüklenen dosyalar içe aktarma bittiğinde silinir.
Tasarım sistemine duyarlı
Tasarım sisteminize oturan içe aktarmalar
Birden fazla kullanılan renkler değişkene dönüşür; varsa sitenin kendi CSS custom property'lerine göre adlandırılır, örneğin brand/primary. Tipografi metin stillerine, tekrarlanan gölgeler gölge stillerine dönüşür. Snap to my file's styles (dosyamın stillerine oturt) ile sizinkine neredeyse aynı olan renkler ve tipografi kendi değişkenlerinize ve stillerinize eşlenir; böylece içe aktarılan tasarım sanki dosyanızda kurulmuş gibi görünür.
- Site başına 96'ya kadar renk değişkeni ve 48 metin stili
- Dosyanızda zaten var olan değişkenleri ve stilleri yeniden kullanır
- Light + Dark, iki modlu tek bir koleksiyonda yakalanır
- Default / Hover varyantlı ve hover etkileşimli bileşenler
Web ile Figma arasında çalışanlar için yapıldı
Ürün ve UI tasarımcıları
Yeniden tasarıma ekran görüntüsünden değil, gerçeğinden başlayın. Boşlukları, tipografiyi ve renkleri saniyeler içinde denetleyin.
Tasarım ajansları
Müşterinin mevcut sitesini teklif için aynı gün Figma'ya taşıyın. Beş kullanıcılık Team planı.
Tasarım sistemi ekipleri
Bir ürünün gerçekte kullandığı her rengi ve metin stilini, değişkenlerinize eşlenmiş olarak bulun.
Front-end geliştiriciler
localhost veya staging çalışmalarınızı tasarımcılara düzenlenebilir Figma frame'leri olarak teslim edin.
Yapay zekâ ile üretenler
Claude Code, Claude Desktop veya Cursor'dan arayüzü doğrudan Figma dosyanıza gönderin.
Öğrenciler
Harika web sitelerini katman katman söküp nasıl yapıldıklarını öğrenin.
Düzenlenebilir katmanlar, ekran görüntüsünden ve sıfırdan çizmekten iyidir
| Ekran görüntüsü | Elle yeniden çizim | HTML to Frames | |
|---|---|---|---|
| Düzenlenebilir metin | Hayır | Evet | Evet |
| Auto Layout | Hayır | Evet, elle | Evet, doğrulanmış |
| Değişkenler ve stiller | Hayır | Elle | Üretilir veya yeniden kullanılır |
| Tablet ve mobil | Ayrı yakalamalar | Saatlerce ek iş | Tek içe aktarma |
| Bir sayfa için süre | Saniyeler | Saatler | Saniyelerden bir dakikaya |
Adil fiyatlandırma, lansman indirimi dahil
Ücretsiz başlayın. Pro, lansmanda ayda $7'a sınırsız; erken müşteriler bu fiyatı korur.
- Ayda 10 içe aktarma
- İçe aktarma başına 1 ekran
- Multiple içe aktarma: 10 bağlantıya kadar
- Link, yerel dosyalar, Chrome uzantısı, yapay zekâ araçları
- Doğrulanmış Auto Layout
- Ölçülen site genişliği
- Font eşleme
- Prototip bağlantıları
Pro
Lansman fiyatıSınırsız içe aktarma ve tüm araç seti, Figma içinden satın alınır.
- Sınırsız içe aktarma (adil kullanım: ayda 1.000)
- İçe aktarma başına 4 ekrana kadar
- Stiller ve değişkenler
- Snap to my file's styles
- Bileşenler ve hover varyantları
- Light + Dark değişken modları
- Özel genişlikler
- Ayrıntılı katmanlar, referans ekran görüntüsü, ek bekleme
- Pro'daki her şey
- Tek lisans anahtarında 5 kullanıcı
- Sınırsız içe aktarma (adil kullanım: ayda 5.000)
- Kullanıcı hakları kişiler arasında taşınabilir
Sayfalarınız bizim verimiz değil
Sayfalar izole, sandbox içinde çalışan bir tarayıcıda işlenir. Sonuç eklentinize bir kez teslim edilir, ardından silinir; asla diske yazılmaz. Yüklenen dosyalar içe aktarma biter bitmez silinir. Çerez yok, analitik yok, reklam yok.
Blog
Tüm yazılarCSS to Figma Auto Layout: flexbox ve grid eşleme rehberi
Flexbox ve Figma Auto Layout birbirine benzer, ama aynı model değildir. Bu teknik rehber CSS özelliklerini Auto Layout ayarlarına eşliyor, doğrulamanın neden önemli olduğunu açıklıyor ve temiz içe aktarılan CSS'in nasıl yazılacağını gösteriyor.
10 dk okumalocalhost to FigmaLocalhost to Figma: Chrome uzantısıyla her sayfayı yakalayın
Bazı sayfalara URL ile içe aktarma ulaşamaz: localhost build'iniz, giriş arkasındaki bir panel, şu anda açık olan bir menü. Ücretsiz HTML to Frames Chrome uzantısı bunları kendi tarayıcınızdan yakalar ve düzenlenebilir Figma katmanlarına dönüştürür.
9 dk okumaAI to FigmaAI to Figma: Claude ve Cursor arayüzünü MCP ile Figma'ya gönderin
Yapay zekâ kodlama araçları dakikalar içinde çalışan bir arayüz oluşturabiliyor, ama tasarımcıların ona hâlâ Figma'da ihtiyacı var. Claude Code, Claude Desktop veya Cursor'ı MCP üzerinden HTML to Frames'e nasıl bağlayacağınızı ve ekran görüntüsü yerine düzenlenebilir katmanları nasıl alacağınızı anlatıyoruz.
9 dk okumaSıkça sorulan sorular
Web sayfalarını gerçek, düzenlenebilir Figma katmanlarına dönüştüren bir Figma eklentisidir. Canlı bir URL'yi, aynı anda 10'a kadar bağlantıyı, yerel bir HTML dosyasını veya site klasörünü, yapıştırılan kodu, Chrome uzantısıyla yakalanan bir sekmeyi ya da bir yapay zekâ aracının MCP üzerinden gönderdiği HTML'i içe aktarabilirsiniz. Sayfalar metin, vektör ve görsellerle birlikte frame olarak gelir; Auto Layout, değişkenler, stiller ve bileşenlerle.
Hayır. Her başlık düzenleyebileceğiniz bir metin katmanı, her ikon bir vektör ve her bölüm bir frame'dir. Yalnızca HTML olmayan içerikler (iframe içindeki bir harita, bir WebGL sahnesi veya poster görseli olmayan bir video) o kutunun görseli olarak yerleştirilir; böylece sayfanın geri kalanı tamamen düzenlenebilir kalır.
Eklenti Auto Layout'u uygular, ardından her alt öğenin konumunu tarayıcının yerleşimiyle 2 px içinde doğrular. Bir frame tutmazsa daha basit bir yerleşim dener ya da kısıtlamalarla absolute konumları korur. Gerçek siteler üzerindeki testlerimizde frame'lerin %86–97'si Auto Layout aldı; geri kalanlar nedeniyle birlikte listelenir.
Evet, ücretsiz HTML to Frames Chrome uzantısıyla. Uzantı sekmeyi kendi tarayıcınızda yakalar (giriş yapılmış paneller, localhost, özel ağlar, açık menüler ve doldurulmuş formlar dahil) ve panoya kopyalayarak ya da Send to Figma ile eklentiye gönderir.
Sitenin ölçülen tasarım genişliğinde Desktop, Laptop 1280, Tablet 768 ve Mobile 390; Pro'da ayrıca özel genişlikler. Responsive set, Desktop, Tablet ve Mobile'ı tek tıkla içe aktarır. Free, içe aktarma başına bir ekran içerir; Pro ve Team dörde kadar.
Free ile ayda 10 içe aktarma hakkınız olur. Pro sınırsızdır (adil kullanım); lansmanda ayda $7, normalde $9'dır ve Figma içinden satın alınır. Team lansmanda ayda $22, normalde $29'dur; ortak lisans anahtarıyla beş kullanıcı içindir. Bir içe aktarma, tüm ekranlarıyla birlikte bir sayfadır.
İzole bir tarayıcıda işlenir, eklentinize bir kez teslim edilir ve ardından bellekten silinir; asla diske yazılmaz. Yüklenen dosyalar içe aktarma bittiğinde kaldırılır. Eklenti Figma dosyanızı okumaz ve Figma'dan adınızı veya e-posta adresinizi almayız.
Evet. Claude Code, Claude Desktop, Cursor veya başka bir MCP istemcisini eklentinin AI sekmesinden bağlayın. Ardından yapay zekâ aracınız import_html veya import_url çağırabilir; sayfa açık Figma dosyanıza düşer ve kendi planınızla içe aktarılır.
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