Figma'nın MCP (Model Context Protocol) sunucusu, Figma tasarım dosyalarınız ile Claude Code ve Cursor gibi kodlama ajanları arasında doğrudan bir bağlantı kurar. Tasarımları manuel olarak koda çevirmek yerine — boşluk değerlerini incelemek, hex renkleri kopyalamak, bileşen yapılarını yeniden oluşturmak — kodlama ajanı Figma dosyanızı doğrudan okur ve tasarım sisteminizle eşleşen kod üretir.
MCP bağlantısı çift yönlüdür. Kodlama ajanları Figma'dan tasarım verilerini okur (bileşenler, değişkenler, düzen yapısı). Ayrıca tuvale geri yazabilirler — kodlanmış durumları, duyarlı varyantları ve uygulanmış ekranları tasarımcı incelemesi için düzenlenebilir Figma katmanları olarak göndererek. Bu, geleneksel tasarım-teslim darboğazını tamamen ortadan kaldırır.
Temel Çıkarım
Kurulum 10 dakikadan az sürer, hiçbir maliyet gerektirmez (MCP beta süresince ücretsiz) ve tasarımdan koda iş akışını anında dönüştürür. Kodlama ajanı tasarım sistemi bağlamınızı görür — bileşenler, renkler, boşluk belirteçleri — ve eşleşen kod üretir. Artık boşluk değerlerini tahmin etmeye veya ekran görüntülerinden renkleri yaklaşık olarak belirlemeye gerek yok. MCP sunucusu, ürün ekiplerinin on yıldır istediği tasarım araçları ile kod editörleri arasındaki köprüdür.
MCP Mimarisini Anlamak
MCP (Model Context Protocol), Anthropic tarafından oluşturulan ve AI ajanlarının harici veri kaynaklarına bağlanmasını sağlayan açık bir standarttır. Claude ile Google Drive, Slack ve GitHub gibi araçlar arasındaki bağlantıları destekleyen protokolün aynısıdır. Figma'nın MCP sunucusu, tasarım dosyalarınızı bu protokol aracılığıyla açığa çıkararak MCP uyumlu herhangi bir kodlama ajanı tarafından okunabilir hale getirir.
| Bileşen | Ne Yapar | Kim Sağlar |
|---|---|---|
| Figma MCP Sunucusu | Tasarım verilerini MCP protokolü ile açığa çıkarır | Figma (mcp.figma.com/mcp adresinde barındırılır) |
| Kodlama Ajanı (istemci) | Tasarım verilerini okur ve kod üretir | Claude Code, Cursor, Windsurf, vb. |
| Kimlik Doğrulama | Figma hesabı ile OAuth | Figma girişiniz |
| Açığa çıkan veri | Bileşenler, değişkenler, stiller, düzen | Figma dosyalarınız |
| Yazma erişimi | Kodlanmış durumları tuvale geri gönderir | /figma-use becerisi ile |
Kurulum: Claude Code (5 Dakika)
Adım 1: Terminalinizi açın ve proje dizininize gidin.
Adım 2: Claude Code'u MCP sunucusu yapılandırılmış olarak başlatın. Figma MCP sunucusunu Claude Code yapılandırmanıza ekleyin (genellikle ~/.claude/mcp_servers.json veya projenizin .mcp.json dosyasında):
Adım 3: Claude Code ilk kez Figma MCP sunucusuna bağlandığında, OAuth ile kimlik doğrulaması yapmanız istenecek — Figma hesabınızla giriş yapın. Bu, tasarım dosyalarınıza okuma erişimi verir.
Adım 4: Claude Code'a bir Figma dosyasını tanımlamasını isteyerek bağlantıyı test edin: "[Figma dosya URL'sini yapıştır] adresindeki Figma dosyasını oku ve bileşen yapısını tanımla." Bileşen adları, değişkenler ve düzen bilgilerini döndürürse bağlantı çalışıyor demektir.
Kurulum: Cursor (5 Dakika)
Adım 1: Cursor Ayarları → MCP Sunucuları'nı açın.
Adım 2: Şu URL ile yeni bir MCP sunucusu ekleyin: https://mcp.figma.com/mcp
Adım 3: İstendiğinde OAuth ile kimlik doğrulaması yapın — yukarıdakiyle aynı Figma girişi.
Adım 4: Cursor'ın AI sohbetinde Figma dosyanıza referans verin: "[Figma URL] adresindeki tasarımı oku ve Tailwind CSS kullanarak başlık bölümü için bir React bileşeni oluştur." Cursor tasarım bağlamını okur ve eşleşen kod üretir.
📬 Bundan değer mi alıyorsunuz?
Haftada bir uygulanabilir AI içgörüsü. Ayrıca abone olduğunuzda ücretsiz prompt paketi.
Ücretsiz abone ol →MCP Sunucusunun Açığa Çıkardığı Veriler
Kodlama ajanının neyi "görebileceğini" anlamak, daha iyi promptlar yazmanıza ve Figma dosyalarınızı MCP okunabilirliği için düzenlemenize yardımcı olur:
| Veri Türü | Açığa Çıkan | Kodlama Ajanları Nasıl Kullanır |
|---|---|---|
| Bileşenler | Ad, özellikler, varyantlar, örnekler | Kod bileşen kütüphanelerine eşler |
| Renk değişkenleri | Ad, hex değeri, koleksiyonlar | CSS değişkenleri veya Tailwind yapılandırmasına eşler |
| Metin stilleri | Font, boyut, ağırlık, satır yüksekliği | Tipografi sınıflarına eşler |
| Boşluk | Dolgu, boşluk, kenar boşluğu değerleri | Boşluk belirteçlerine eşler |
| Düzen | Otomatik düzen yönü, hizalama, sarma | Flexbox/grid özelliklerine eşler |
| Katman hiyerarşisi | Ebeveyn-çocuk ilişkileri | DOM yapısına eşler |
Pratik sonuç: Figma'da şeyleri ne kadar iyi adlandırırsanız, kodlama ajanı onları o kadar iyi anlar. "Button/Primary/Large" temiz bir şekilde kod bileşenine eşlenir. "Frame 147" ajana yararlı hiçbir şey söylemez. Bu, Design Agent için hazırlanmayla aynı prensiptir — iyi organize edilmiş tasarım sistemleri, AI'nın tasarım mı yoksa kodlama mı yaptığına bakılmaksızın daha iyi AI çıktısı üretir.
Uygulamada Çift Yönlü İş Akışı
MCP'nin gerçek gücü sadece Figma'dan okumak değil — döngüyü tamamlayan geri yazma kabiliyetidir. Bir geliştirici tasarımcının belirtmediği sınır durumları uyguladığında (hata durumları, yükleme durumları, boş durumlar, duyarlı kesme noktaları), bu uygulamalar Figma tuvaline düzenlenebilir çerçeveler olarak geri gönderilebilir. Tasarımcı, kod önizlemesine geçmeden gerçek kodlanmış durumları inceler.
Bu iş akışı, tasarım-geliştirme sürtüşmesinin en yaygın kaynağını ortadan kaldırır: "tasarlananlar" ile "yapılanlar" arasındaki boşluk. MCP ile her iki taraf da aynı gerçeklik kaynağından çalışır ve değişiklikler çift yönlü olarak yayılır. Detaylı adım adım iş akışı Figma + Claude Code rehberimizde yer almaktadır.
MCP bağlantılı ajanları kullanırken daha iyi promptlar için — ister tasarımları okumak ister kod üretmek için olsun — ücretsiz Prompt Optimizer daha doğru çıktı üreten yapıyı ekler. ChatGPT, Claude ve Gemini içinde tek tıkla optimizasyon için TresPrompt bunu doğrudan kenar çubuğunuza getirir.
Sık Sorulan Sorular
MCP sunucusu ücretsiz mi?
Evet — MCP sunucusu beta döneminde ücretsizdir. MCP bağlantıları için AI kredisi tüketilmez. Figma, MCP'nin beta sonrası fiyatlandırmasını açıklamamıştır, ancak sunucu altyapı maliyetleri minimumdur (hesaplama değil, okuma erişimi), bu nedenle ücretsiz veya çok düşük maliyetli kalması muhtemeldir.
MCP, Claude Code ve Cursor dışındaki araçlarla da çalışır mı?
Evet — MCP uyumlu herhangi bir ajan bağlanabilir. Bu, Windsurf, Cline ve MCP protokolünü destekleyen diğer araçları içerir. Sunucu URL'si (https://mcp.figma.com/mcp) hangi istemcinin bağlandığına bakılmaksızın aynıdır.
MCP erişimim olan herhangi bir Figma dosyasını okuyabilir mi?
Evet — MCP, Figma hesap izinlerinizi miras alır. Figma'da bir dosyayı görüntüleyebiliyorsanız, MCP onu okuyabilir. Erişiminiz yoksa, MCP onu okuyamaz. Bu, takım dosyaları, paylaşılan dosyalar ve kişisel dosyalarınızın tümünün MCP aracılığıyla erişilebilir olduğu anlamına gelir.
Kodlama ajanının Figma dosyamı değiştirme riski var mı?
Geri yazma kabiliyeti isteğe bağlıdır ve belirli bir beceri (/figma-use) kullanır. Ajan, kodlanmış durumları tuvale geri göndermesi açıkça talimatlandırılmadıkça dosyanızı değiştirmez. Okuma erişimi varsayılandır; yazma erişimi kasıtlı çağrı gerektirir. Yazma erişimi ile bile ajan, mevcut olanları değiştirmek yerine yeni çerçeveler oluşturur, böylece orijinal tasarımlarınız korunur.
Kod yazmıyorsam bile MCP kurmalı mıyım?
Kod yazmayan bir tasarımcıysanız, MCP'nin doğrudan sınırlı değeri vardır — öncelikle tasarımlarınızı okuyan kodlama ajanları içindir. Ancak MCP'nin nasıl çalıştığını anlamak, onu kullanan geliştiricilerle daha etkili işbirliği yapmanıza yardımcı olur. Ayrıca tasarım analizi, araştırma ve dokümantasyon üretimi için Figma dosyalarınızı Claude.ai'ya bağlayarak deneyim yapabilirsiniz (kod yazmadan bile).
Açıklama: Bu makaledeki bazı bağlantılar ortaklık bağlantılarıdır. Sadece kişisel olarak test ettiğimiz ve düzenli kullandığımız araçları öneriyoruz. Tam açıklama politikamıza bakın.