AI to Figma: Claude ve Cursor arayüzünü MCP ile Figma'ya gönderin

Yapay zekâ kodlama asistanları artık birkaç dakika içinde ikna edici bir açılış sayfası, ayarlar ekranı veya panel üretebiliyor. Sorun, bu arayüzün nereye vardığıdır: ekibinizin tasarımı incelediği, not aldığı ve iyileştirdiği Figma dosyasından uzakta, bir kod editöründe veya yerel bir önizlemede.

Bu rehber, bu boşluğu bir AI to Figma bağlantısıyla nasıl kapatacağınızı gösteriyor. HTML to Frames; Claude Code, Claude Desktop, Cursor veya herhangi bir MCP istemcisinin sayfaları doğrudan açık Figma eklentinize göndermesini sağlayan bir MCP bağlantısı sunar; sayfalar orada Auto Layout ile gerçek, düzenlenebilir katmanlara dönüştürülür.

Burada “AI to Figma” ne anlama geliyor

İnsanların AI to Figma dediği iki çok farklı şey var:

1. Bir prompt'tan Figma içinde tasarım üreten yapay zekâ.
2. HTML ve CSS yazan yapay zekâ ve bu kodu Figma katmanlarına dönüştüren bir köprü.

HTML to Frames ikincisini yapar. Yapay zekâ aracınız iyi yaptığı işi, yani front-end kodu yazmayı sürdürür; eklenti de zaten her web sayfası için yaptığı dönüşümü yapar: frame'ler, metinler, vektörler, görseller, değişkenler ve Auto Layout. Sonuç, canlı bir siteyi içe aktarmakla aynı kalitededir, çünkü aynı yakalama hattından geçer. Ürün özeti için AI to Figma sayfasına bakın.

MCP bağlantısı nasıl çalışır

Model Context Protocol (MCP), yapay zekâ araçlarının harici araçları çağırması için standart bir yoldur. HTML to Frames'i bir MCP sunucusu olarak bağladığınızda yapay zekâ aracınız üç araç kazanır:

Sayfa Figma'daki açık eklentinize düşer ve kendi planınızla içe aktarılır; yani olağan plan kuralları geçerlidir: içe aktarma başına ekran, stiller ve değişkenler, bileşenler vb.

Yapay zekâ aracına geri ne döner

Yapay zekâ Figma dosyanızı geri almaz. Sayfanın teslim edildiğini doğrulayan bir araç çağrısı yanıtı alır ve o içe aktarmanın durumunu kontrol etmek için import_status'u çağırabilir. Tasarım işinin kendisi Figma'da, eklentinin içinde gerçekleşir; frame'leri, katmanları, Auto Layout oranını ve varsa uyarıları içeren sonuç ekranını orada görürsünüz. Bu bilinçli bir tercihtir: eklenti Figma dosyanızın içeriğini okumaz; bu yüzden dosyanızla ilgili hiçbir şey yapay zekâya geri akmaz.

Kurulum: yapay zekâ aracınızı eklentinin AI sekmesinden bağlayın

Kurulumu her yapay zekâ istemcisi için bir kez yaparsınız. Her şey eklentide başlar.

1. Figma'da HTML to Frames'i açın ve AI sekmesine gidin.
2. Token'ınızı alın. AI sekmesi size bir bağlantı token'ı verir. Ona bir parola gibi davranın.
3. İstemcinizi seçin. AI sekmesi desteklenen istemciler için kopyala-yapıştır kurulum gösterir.
4. Kurulumu istemcinize tam olarak gösterildiği gibi yapıştırın (istemci bazında ayrıntılar aşağıda).
5. Yeni MCP sunucusunu algılaması için istemciyi yeniden başlatın veya yenileyin.
6. Çalışırken eklentiyi Figma'da açık tutun. Sayfalar açık eklentiye teslim edilir.

Claude Code

Claude Code, MCP sunucularını yapılandırmasından okur. AI sekmesinin Claude Code için verdiği kurulumu kopyalayın ve talimatlara göre çalıştırın veya yapıştırın. Ardından yeni bir oturum başlatın ve Claude'dan araçlarını listelemesini isteyin; import_html, import_url ve import_status'u görmelisiniz.

Claude Desktop

Claude Desktop, MCP sunucularını uygulamanın geliştirici ayarlarından açabileceğiniz yapılandırma dosyasında tutar. AI sekmesindeki parçacığı bu dosyaya yapıştırın, kaydedin ve Claude Desktop'ı tamamen yeniden başlatın. Araçlar yeni bir sohbetin araçlar menüsünde görünür.

Cursor

Cursor, MCP sunucularını ayarlarında listeler. AI sekmesindeki parçacıkla yeni bir sunucu ekleyin, kaydedin ve sunucunun üç araçla bağlı göründüğünü doğrulayın.

Diğer MCP istemcileri

Aracınız MCP destekliyorsa aynı token ve kurulum geçerlidir. AI sekmesindeki genel kurulumu kullanın ve istemcinizin sunucuları kaydetme biçimine uyarlayın.

Henüz desteklenmiyor: claude.ai web bağlayıcıları

claude.ai web bağlayıcıları (OAuth) henüz desteklenmiyor. Claude'un tarayıcı sürümünde çalışıyorsanız HTML'i orada üretin, kaydedin ve bunun yerine eklentinin Local file veya Paste code kaynağıyla içe aktarın. Ya da işi bugün MCP ile bağlanan Claude Code veya Claude Desktop'a taşıyın.

Gizlilik: token'ınıza ve sayfalarınıza ne olur

Yapay zekâ iş akışları, kodun ve tasarımların nereye gittiği konusunda haklı sorular doğurur. Bağlantının yaptıkları:

• Bağlantı token'ınız yalnızca hash olarak saklanır. Servis onu kontrol edebilir, ancak token'ın kendisini saklamaz.
• Sayfalar en fazla 30 dakika bellekte bekler. Eklentiniz bir sayfayı bu süre içinde almazsa sayfa silinir.
• İşleme izole, sandbox içinde çalışan bir tarayıcıda gerçekleşir. Sonuç bir kez teslim edilir, ardından bellekten silinir ve asla diske yazılmaz.
• Eklentide, uzantıda veya web sitesinde çerez, analitik veya izleme pikseli yoktur.
• Figma'dan adınızı veya e-posta adresinizi asla almayız; hesap tanımlayıcısı Figma kullanıcı kimliğinizden türetilir.

Ayrıntıların tamamı güvenlik sayfasında.

Bilmeye değer limitler

• HTML boyutu: import_html 2 MB'a kadar kabul eder. Büyük base64 görselleri satır içine nadiren gömün; mümkünse barındırılan görsellere bağlantı verin.
• import_url için yalnızca herkese açık URL'ler. Yapay zekânın önizlemesi localhost üzerinde çalışıyorsa, ya yapay zekânın HTML'i doğrudan import_html ile göndermesini sağlayın ya da çalışan sayfayı localhost ve giriş gerektiren sayfaları destekleyen Chrome uzantısıyla yakalayın.
• Plan kullanımı geçerlidir. Her sayfa planınızda bir içe aktarma sayılır. Free ayda 10 içe aktarma ve içe aktarma başına 1 ekran verir; Pro ve Team adil kullanım dahilinde sınırsızdır ve içe aktarma başına 4 ekrana kadar izin verir. Fiyatlandırma sayfasına bakın.
• Her sayfayla aynı dönüştürme kuralları. Iframe'ler, WebGL canvas'ları ve poster görseli olmayan videolar kutularının ekran görüntüsüne dönüşür. Skew ve 3D dönüşümler henüz dönüştürülmüyor.

Denenecek prompt'lar

Bağlandıktan sonra yapay zekâyla normalde nasıl konuşuyorsanız öyle konuşur ve sonucu Figma'ya göndermesini söylersiniz. İyi çalışan bazı prompt'lar:

1. “Flexbox kullanan sade HTML ve CSS ile üç kademeli bir fiyatlandırma sayfası oluştur, ardından import_html ile Figma'ya gönder.”
2. “Az önce oluşturduğun ayarlar ekranını al, CSS'i satır içine al ve Figma'ya aktar. Sonra import_status'u kontrol et.”
3. “Staging sitemiz bu herkese açık URL'de. Fiyatlandırma ve kayıt sayfalarını import_url ile Figma'ya aktar.”
4. “Bu hero bölümünün iki varyasyonunu oluştur: biri sola hizalı başlıklı, diğeri ortalanmış. Her birini ayrı bir içe aktarma olarak Figma'ya gönder.”
5. “Bu kart ızgarasını renkler için CSS custom property'leri kullanarak yeniden yaz, ardından değişkenler aktarılsın diye içe aktar.”

Temiz Figma çıktısı için prompt yazmak

CSS'ini biraz yönlendirdiğinizde yapay zekâ daha iyi içe aktarılan kod yazar:

• Kardeş öğeler arasında margin yerine gap ile flexbox ve grid isteyin. Bunlar Auto Layout'a temiz şekilde eşlenir; bkz. CSS flexbox ve grid'den Auto Layout'a.
• Renkler için CSS custom property'leri isteyin. Styles & variables açıkken (Pro) --brand-primary, bir brand/primary değişkenine dönüşür.
• Görsellerin içine gömülmüş metin değil, gerçek metin isteyin; böylece her başlık düzenlenebilir kalır.
• İçe aktarma başına bir sayfa isteyin; uzun, çok ekranlı belgeleri incelemek daha zordur.

Tasarım ve kod döngüsü

Asıl değer tek bir içe aktarmada değil. Tasarım ile kodun birbirinden uzaklaşmayı bıraktığı bir döngüdedir.

1. Prompt: yapay zekâ kodda ilk sürümü oluşturur.
2. İçe aktarma: yapay zekâ onu import_html veya import_url ile Figma'ya gönderir.
3. Figma'da inceleme: tasarımcılar Auto Layout frame'leriyle boşlukları, tipografiyi, rengi ve yerleşimi düzenler, yorum ekler ve alternatifler keşfeder.
4. Değişiklikleri geri anlatma: yapay zekâya neyin değiştiğini söyleyin ya da ilgili değerleri yapıştırın ve kodu güncellemesine izin verin.
5. Kodun artık eşleştiğini doğrulamak için yeniden içe aktarın ve önceki frame ile karşılaştırın.

Kimler yararlanır

• Tasarımcılar yapay zekâ prototiplerini elle yeniden çizmeyi bırakır ve düzenlenebilir frame'lerden başlar.
• Front-end geliştiriciler, ekran görüntüsü dışa aktarmadan gerçek çıktı üzerinde tasarım incelemesi alır.
• Ürün yöneticileri, bir prompt'u bir paydaş toplantısı için incelenebilir bir Figma sayfasına dönüştürebilir.
• Tek başına ürün geliştirenler, her iterasyonun görsel kaydını tek bir dosyada tutar.

AI to Figma ve diğer yollar

Eklentinin üç yolu da aynı motoru kullanır. MCP sadece kopyala-yapıştır adımını ortadan kaldırır ve kontrolü yapay zekâya bırakır. Auto Layout doğrulanır: her alt öğenin konumu 2 px içinde kontrol edilir; bir yerleşim tutmazsa daha basit bir plan denenir ya da frame absolute konumlarını korur. Tasarım asla bozulmaz. Bu konuda daha fazlası Auto Layout'un açıklaması yazısında.

Sorun giderme

• Yapay zekâ aracın kullanılamadığını söylüyor. Sunucuyu ekledikten sonra istemciyi yeniden başlatın ve parçacığın değiştirilmeden yapıştırıldığını kontrol edin.
• İçe aktarma hiç görünmüyor. Eklentinin Figma'da açık olduğundan emin olun. Sayfalar 30 dakikaya kadar bekler; eklentiyi açın, bu süre içinde sayfaları alacaktır.
• Token reddedildi. AI sekmesinden yeni bir token oluşturun ve istemcinin kurulumunu güncelleyin.
• Yerleşim tuhaf görünüyor. Bir frame'in neden absolute kaldığını açıklayan sonuç ekranı tanılamasını kontrol edin ve yapay zekâdan o bölüm için flexbox veya grid kullanmasını isteyin.

Başlarken

Eklentiyi açın, AI sekmesine gidin ve bir istemciyi bağlayın. Yapay zekâ aracınızdan küçük bir bileşen oluşturmasını ve Figma'ya göndermesini isteyin; tam bir ekran için ona güvenmeden önce nasıl davrandığını görürsünüz. Dokümantasyon AI sekmesini anlatıyor; özellikler ise içe aktarmanın desteklediği her şeyi listeliyor.