MCP bağlantısı
AI to Figma: Claude veya Cursor'da üretilen arayüzü Figma'ya gönderin
Yapay zekâ aracınızı MCP üzerinden HTML to Frames'e bağlayın. Oluşturduğu sayfalar açık eklentinize düzenlenebilir, Auto Layout'lu katmanlar olarak düşer.
- Claude Code, Claude Desktop, Cursor ve diğer MCP istemcileriyle çalışır
- Üç araç: import_html, import_url, import_status
- Token yalnızca hash olarak saklanır
Yakında Figma Community'de
Yapay zekâdan Figma'ya geçiş, bir üretim sorunundan çok bir iş akışı sorunudur. Claude ve Cursor gibi araçlar dakikalar içinde HTML olarak ikna edici bir açılış sayfası veya panel üretebilir, ancak bu çıktı bir kod dosyasında ya da tarayıcı önizlemesinde yaşar. Bir ekiple incelemek, mevcut bir tasarım sistemiyle birleştirmek veya görsel olarak iterasyona devam etmek için Figma'da, ekran görüntüsü olarak değil, katmanlar olarak bulunması gerekir.
EUREKA!'nın Figma eklentisi HTML to Frames tam da bunun için bir MCP bağlantısı sunar. Eklentinin AI sekmesini açın, gösterdiği token'ı ve kurulum parçacığını kopyalayın ve Claude Code, Claude Desktop, Cursor veya herhangi bir MCP istemcisine ekleyin. Yapay zekâ aracınız böylece üç araç kazanır: yazdığı HTML'i göndermek için import_html (2 MB'a kadar), bir sayfayı adresinden içe aktarmak için import_url ve bir işin durumunu kontrol etmek için import_status.
Yapay zekâ bunlardan birini çağırdığında sayfa açık HTML to Frames eklentinize düşer ve kendi planınız ve ayarlarınızla içe aktarılır. Diğer tüm içe aktarmalarla aynı sonucu alırsınız: düzenlenebilir metin, vektörler, görseller, doğrulanmış Auto Layout ve Pro'da değişkenler, stiller ve bileşenler.
Bu; yapay zekâ ile prototip yapıp sonucu elle iyileştirmek isteyen tasarımcılar, arayüz üretip tasarım ekibine teslim etmesi gereken geliştiriciler ve yapay zekâ taslaklarının mevcut stillerine oturmasını isteyen ekipler için kullanışlıdır.
Yapay zekâ ile üretilen arayüzü MCP ile Figma'ya aktarma rehberi tam bir oturumu adım adım anlatır. Dönüşümün neleri koruduğunu görmek için HTML to Figma sayfasını okuyun; token ve verilerin nasıl işlendiği için güvenlik sayfasına bakın.
Bir yapay zekâ aracını Figma'ya bağlamak
- 01
Eklentide AI sekmesini açın
Figma'da HTML to Frames'i başlatın ve bağlantı token'ınızı almak için AI sekmesine geçin.
- 02
Kurulumu aracınıza kopyalayın
Kopyala-yapıştır kurulumunu Claude Code, Claude Desktop, Cursor veya başka bir MCP istemcisine yapıştırın.
- 03
Yapay zekâdan bir sayfa göndermesini isteyin
Yapay zekâ, yazdığı HTML ile import_html'i ya da bir adresle import_url'i çağırır.
- 04
Figma'da inceleyin
Eklentiyi açık tutun; sayfa oraya düşer ve düzenlenebilir katmanlar olarak içe aktarılır.
MCP bağlantısı yapay zekânıza ne kazandırır
Yapay zekâ aracınızla çalışır
Claude Code, Claude Desktop, Cursor veya MCP destekleyen herhangi bir istemci.
import_html
Yapay zekânın ürettiği HTML'i, önce kaydetmeden veya barındırmadan, 2 MB'a kadar gönderin.
import_url
Yapay zekânın herkese açık bir sayfayı adresinden içe aktarmasına izin verin; örneğin bulduğu bir referansı.
import_status
Yapay zekâ, başlattığı bir içe aktarmanın durumunu kontrol edebilir.
Sisteme uygun çıktı
Pro'da Snap açıkken yapay zekâ taslakları dosyanızdaki en yakın renk ve metin stillerine bağlanır.
Hash'lenmiş token
Bağlantı token'ı yalnızca hash olarak saklanır ve sayfalar en fazla 30 dakika bellekte bekler.
Claude Code, Claude Desktop ve Cursor için MCP kurulumu
Model Context Protocol (MCP), yapay zekâ araçlarının harici araçları çağırmasını sağlayan açık bir standarttır. HTML to Frames içe aktarma işlevini bir MCP sunucusu olarak sunar; böylece MCP destekleyen her istemci Figma'ya sayfa gönderebilir.
Bağlantı bilgilerini almak
Figma'da HTML to Frames'i açın ve AI sekmesine gidin. Size kişisel bir token ve istemciniz için kopyala-yapıştır bir kurulum gösterir. Yapılandırmayı elle yazmanız gerekmez.
Claude Code
Sunucuyu AI sekmesindeki kurulumla ekleyin, ardından Claude'dan oluşturduğu sayfayı Figma'ya göndermesini isteyin. Claude, dosya içeriğiyle import_html'i çağıracaktır.
Claude Desktop
Sağlanan parçacığı kullanarak sunucuyu Claude Desktop'ın MCP yapılandırmasına ekleyin; değişikliği algılamazsa uygulamayı yeniden başlatın. HTML to Frames araçları ardından sohbette görünür.
Cursor
Sunucuyu aynı bilgilerle Cursor'ın MCP ayarlarına ekleyin. Ajan, siz editörde çalışırken üretilen bir sayfayı veya bir URL'yi içe aktarabilir.
Diğer MCP istemcileri
MCP sunucularını destekleyen her istemci aynı token ile bağlanabilir. OAuth kullanan claude.ai web bağlayıcılarının henüz desteklenmediğini unutmayın.
Her istemci için tam adımlar dokümantasyonda güncel tutulur.
Yapay zekâ taslaklarını sürdürülebilir bir tasarıma dönüştürmek
Yapay zekâ ile üretilen HTML küçük açılardan tutarsız olma eğilimindedir: her butonda biraz farklı bir mavi, neredeyse aynı üç font boyutu, birkaç piksel değişen boşluklar. Olduğu gibi içe aktarıldığında bu, dağınık bir tasarım dosyasına dönüşür. HTML to Frames size bunu içeri alırken temizleyecek araçlar verir.
- Doğrulanmış Auto Layout. Üretilen CSS'teki flexbox ve grid yerleşimleri, her alt öğenin 2 px içinde kaldığı yerlerde Auto Layout frame'lerine dönüşür; böylece taslağı yeniden düzenlemek kolaylaşır.
- Stiller ve değişkenler (Pro). Tekrar tekrar kullanılan renkler ve tüm CSS custom property'leri değişkene dönüşür; metin ve gölge stilleri oluşturulur.
- Snap to my file's styles (Pro). Sisteminizle birebir eşleşmeyen değerler mevcut en yakın renk ve metin stillerinize oturur; böylece yapay zekâ taslakları sisteme uygun gelir.
- Bileşenler (Pro). Tekrarlanan kartlar, butonlar ve liste öğeleri instance'lı bileşenlere dönüşür.
Pratik bir döngü şöyle görünür: yapay zekâdan bir yerleşim isteyin, Figma'ya gönderin, görsel olarak düzenleyin, ardından bir sonraki iterasyon için değişiklikleri yapay zekâya tarif edin. Her tur yeni frame'ler olarak gelir; böylece tuvalde sürümlerin bir geçmişini tutarsınız.
İçe aktarma sizin planınızı kullandığı için diğer tüm içe aktarmalarla aynı limitler geçerlidir. Ayrıntılar için fiyatlandırma sayfasına bakın.
Yapay zekâ bağlantısının gizliliği ve limitleri
Bir yapay zekâ aracını bir tasarım dosyasına bağlamak, nelerin paylaşıldığı konusunda haklı sorular doğurur. MCP bağlantısı şu şekilde ele alınır.
Token
Bağlantı token'ınız bizim tarafımızda yalnızca hash olarak saklanır. Onu bir parola gibi değerlendirin ve paylaşılan depolardan uzak tutun: bir istemcinin eklentinize sayfa göndermesini sağlayan şey odur.
Aktarım sırasındaki sayfalar
Yapay zekânın gönderdiği sayfalar, açık eklentiniz onları alana kadar en fazla 30 dakika bellekte bekler. URL içe aktarmaları, diğer tüm içe aktarmalar için kullanılan aynı izole, sandbox içindeki tarayıcıda işlenir ve sonuçlar asla diske yazılmaz.
Figma dosyanız
Yapay zekâ bu bağlantı üzerinden Figma dosyanızı okuyamaz. Eklentinin kendisi de dosyanızın içeriğini okumaz; yeni katmanlar yazar ve yalnızca kendi frame'lerinin metadata'sını okur.
Limitler
import_html2 MB'a kadar HTML kabul eder.- Sayfaların düşmesi için eklentinin Figma'da açık olması gerekir.
- Her sayfa planınızda bir içe aktarma sayılır.
- claude.ai web bağlayıcıları (OAuth) henüz desteklenmiyor.
Güvenlik sayfası veri saklama ayrıntılarının tamamını içerir.
Sıkça sorulan sorular
Claude Code, Claude Desktop, Cursor ve MCP sunucularını destekleyen diğer tüm istemciler. Bunları size bir token ve kopyala-yapıştır kurulum veren eklentinin AI sekmesinden bağlarsınız. OAuth kullanan claude.ai web bağlayıcıları henüz desteklenmiyor.
Üç araç: import_html, yapay zekânın yazdığı HTML'i 2 MB'a kadar gönderir; import_url, herkese açık bir sayfayı adresinden içe aktarır; import_status ise yapay zekânın bir içe aktarmanın ilerlemesini kontrol etmesini sağlar. Sayfalar açık eklentinize düşer ve sizin ayarlarınızla içe aktarılır.
Evet. Yapay zekâ aracınızın gönderdiği sayfalar Figma'daki açık HTML to Frames eklentinize teslim edilir. En fazla 30 dakika bellekte beklerler; eklenti kısa süreliğine kapalıysa, bu süre içinde yeniden açmak sayfaları almasını sağlar.
Hayır. MCP bağlantısı yapay zekânın yalnızca içe aktarılacak sayfalar göndermesine ve durumlarını kontrol etmesine izin verir. Eklentinin kendisi de dosyanızın içeriğini okumaz; yeni katmanlar yazar ve yalnızca oluşturduğu frame'lerin kaynak URL ve genişlik gibi metadata'sını okur.
Ayrı bir fiyatlandırma yoktur. Yapay zekânın gönderdiği bir sayfa kendi planınızla içe aktarılır ve diğer tüm kaynaklar gibi bir içe aktarma sayılır. Free plan ayda 10 içe aktarma içerir; Pro ve Team adil kullanım sınırı dahilinde sınırsızdır.
Pro'da Styles & variables ve Snap to my file's styles'ı açın. Birebir eşleşmeler mevcut değişkenlerinizi ve stillerinizi yeniden kullanır; yakın ama birebir olmayan değerler en yakın renk ve metin stilinize oturur; böylece üretilen sayfalar sisteminize bağlı olarak gelir.
İ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