⟦MARKA1⟧ ⟦MARKA3⟧: ⟦MARKA2⟧'yi ⟦MARKA0⟧'ya ve Yapay Zeka Kodlama Ajanlarına Bağlama

Figma çerçevesinin ekran görüntüsünü alıp Claude Code'a yapıştırmak, titreşimleri elde etmenin yoludur. Figma ve MCP'yi birbirine bağlamak, tasarım sisteminize en ince ayrıntısına kadar uyan bileşenleri elde etmenin yoludur.

Bu iki iş akışı arasındaki fark yaklaşık beş dakikalık bir kurulum süresidir. Çoğu tasarımcı bunu yapmamıştır çünkü her eğitim videosu bunu teknikmiş gibi gösterir. Oysa öyle değil. Tek bir komut ve Figma içindeki bir düğmeyi etkinleştirmekten ibarettir. İşte hepsi bu.

Bağlantı kurulduktan sonra, yapay zeka ajanı "20 piksel boşluk"un ne anlama geldiğini tahmin etmeyi bırakır ve atadığınız gerçek aralık belirtecini okumaya başlar. Renkleri uydurmayı bırakır ve gerçek paletinizden çekmeye başlar. Düğmenizi yaklaşık olarak hesaplamayı bırakır ve zaten oluşturduğunuz düğmeyi çağırmaya başlar. Bu yalnızca diğer uçtaki tasarım sistemi gerçekse çalışır.

MCP bir çevirmen, sihirli değnek değil

MCP, Model Bağlam Protokolü'i temsil eder. Anthropic, 2024'ün sonlarında piyasaya sürüldü. Figma, 2025'te bunun için resmi bir sunucu yayınladı. 2026'da kullanmaya değer her yapay zeka aracı bunu destekliyor.

MCP'i yapay zeka ajanları için bir USB portu gibi düşünün. MCP'den önce, bir yapay zeka modeliyle konuşmak isteyen her araç özel bir entegrasyon oluşturmak zorundaydı. MCP'den sonra, araçlar sadece protokolü konuşuyor ve MCP'i bilen herhangi bir ajan bunları okuyabiliyor. Figma, GitHub, Slack, Linear, dosya sisteminiz, veritabanlarınız, her neyse. Tek bir protokol, standartlaştırılmış, yeniden kullanılabilir.

Figma'nin MCP sunucusunun özel olarak yaptığı şey: Figma dosyalarınızın içindeki yapısal verileri bağladığınız herhangi bir yapay zeka ajanına sunar. Çerçeve kimlikleri, katman adları, iç içe geçmiş bileşenler, aralık değerleri, renk değişkenleri, tipografi stilleri, otomatik düzen ayarları, hepsi. Yapay zeka, dosyanızın JPEG görüntüsünün nasıl göründüğünü değil, dosyanızın gerçekte ne içerdiğini okur.

MCP sihir değil. Bir kablo. İşin her iki ucunda da iyi olması gerekiyor.

Figma'nin MCP sunucusunun gerçekte neleri açığa çıkardığı

Sunucu, yapay zeka ajanlarına Figma verilerinizin belirli bir kümesine okuma erişimi sağlar. Tam olarak neyi görüp neyi göremeyeceğini bilmek hem sonuçlar hem de güvenlik açısından önemlidir.

| Yapay Zeka Neleri Okuyabilir | Neden Önemli |

|------------------|----------------|

| Çerçeve yapısı (Kimlikler, adlar, hiyerarşi) | Ajan neyi hedefleyeceğini bilir |

| Otomatik düzen ayarları (yön, boşluk, dolgu) | Boşluklar tam olarak çevrilir |

| Değişken referansları (renk belirteçleri, boşluk belirteçleri, tipografi) | Çıktı sisteminizle eşleşir |

| Bileşen örnekleri ve geçersiz kılmalar | Ajan mevcut bileşenleri çağırır |

| Metin stilleri ve içerik | Kopya doğru yere düşer |

| Görüntü doldurma (varsayılan olarak yalnızca URL'ler, piksel verileri değil) | Görüntüler temiz bir şekilde referanslandırılmıştır |

Okuyamadığı şeyler: Yetkilendirmediğiniz özel dosyalar, bu dosyaya bağlı olmayan diğer ekip kütüphaneleri, yorumlar, sürüm geçmişi veya işaret ettiğiniz belirli dosyanın dışındaki herhangi bir şey.

Bu kapsam önemlidir çünkü kötü eğitilmiş bir yapay zekanın Figma çalışma alanınızda dolaşamayacağı anlamına gelir. Ona verdiğiniz şeyi okur, daha fazlasını değil.

Claude Code'e yükleyin (beş dakika)

Eğer Claude Code zaten çalışıyorsa (değilse, Claude Code Tasarımcılar için'ye bakın), MCP bir yapılandırma düzenlemesi uzaklığındadır.

Adım 1: Figma masaüstünde, Tercihler'e gidin ve Geliştirici Modu ayarları altında "Yerel MCP sunucusunu etkinleştir" seçeneğini etkinleştirin. Figma, makinenizde varsayılan portta bir sunucu başlatacaktır.

Adım 2: Terminalinizde Claude Code ayar dosyasını açın:

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

Bu tek komut, Figma'nin yerel MCP sunucusunu Claude Code ile kaydeder. JSON düzenlemesi yok, yapılandırma dosyası arama yok.

Adım 3: Claude Code'i yeniden başlatın. Bir sonraki oturumunuzda, Claude Code otomatik olarak Figma'nin kullanılabilir olduğunu görecektir.

Claude Code oturumu içinde /mcp ile doğrulayın. Figma'nin listelendiğini görmelisiniz.

Kullanmak için, komut istemine bir Figma URL'si yapıştırın. Claude Code, çerçeveyi bir ekran görüntüsü değil, MCP aracılığıyla çözer ve gerçek yapıyla çalışır.

Cursor'a Kurulumu (beş dakika sürer)

Cursor kullanıcıları için akış biraz farklı, ancak fikir aynı.

Adım 1: Yukarıdakiyle aynı. Figma'in yerel MCP sunucusunu Figma masaüstünde etkinleştirin.

Adım 2: Cursor'da Ayarlar'ı açın, MCP bölümüne gidin, "MCP Sunucusu Ekle"ye tıklayın. Şunu yapıştırın:

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

Adım 3: Kaydedin ve Cursor'ı yeniden başlatın. Figma, aracı panelinde kullanılabilir bir veri kaynağı olarak görünecektir.

Cursor, MCP'ü Claude Code'e göre biraz daha görsel olarak ele alıyor ve sunucu başına kullanıcı arayüzüne dayalı bir geçiş sağlıyor. İşlevsel olarak, iki deneyim de aynı: Figma URL'sini yapıştırıyorsunuz, ajan gerçek çerçeveyi okuyor ve çıktı sisteminizle eşleşiyor.

Kilidini açtığı beş iş akışı

Tasarım-kodlama doğruluğu. Figma çerçeve URL'sini yapıştırıyorsunuz. Claude Code katman yapısını, otomatik düzen değerlerini, değişken bağlamalarını ve bileşen örneklerini çekiyor. Oluşturulan React bileşeni, gerçek Düğmenizi, gerçek Kartınızı ve gerçek boşluk belirteçlerinizi kullanıyor. Yaklaşım yok, uydurma sınıflar yok. Bu, amiral gemisi iş akışıdır ve sadece beş dakikalık kurulumu bile buna değer.

Code Connect doğrulaması. Eğer zaten Figma'nın Code Connect özelliğini (Figma bileşenlerini kod bileşenlerinize eşleyen) kullanıyorsanız, MCP, ajanın kod oluştururken eşlemeyi doğrulamasına olanak tanır. Code Connect'in zaten kaydettiği bir bileşeni kopyalayan yeni bir bileşen oluşturmaz. Daha az kazara yeniden icat.

Değişken senkronizasyon kontrolleri. Diyelim ki geçen hafta bir renk token'ını yeniden adlandırdınız. Claude Code'e sorun: "Bu Figma URL'sindeki çerçeveyi okuyun ve mevcut token dosyamızla eşleşmeyen tüm değişken referanslarını listeleyin." Tek geçişte sapmaları işaretleyecektir. Bu eskiden bir geliştiriciyle 45 dakikalık bir Loom oturumuydu.

Ekran görüntüsünden bileşene geri dönüş. Eğer MCP dosyayı okuyamazsa (müşteriye ait, paylaşılmayan veya otomatik yerleşim çerçevesi değilse), aracı görüntü analizine geri döner. Şunları karıştırabilirsiniz: Kendi çalışmalarınız için MCP, tek seferlik müşteri referansları için ekran görüntüleri. Aynı komut, ikisi de çalışır.

Tasarım Kalite Kontrolü. Ters yön. Claude Code'den dağıtılmış bir sayfa ekran görüntüsünü bir Figma çerçevesiyle karşılaştırmasını isteyin: "İşte üretim sayfasının URL'si. İşte eşleşmesi gereken Figma URL'si. Görsel farklılıkları listeleyin." Bu, "tasarımcı onayladı ancak geliştirici yanlış dolgu gönderdi" sorununu üretime ulaşmadan önce yakalar.

| İş Akışı | MCP Olmadan | MCP ile |

|----------|-------------|----------|

| Tasarımdan koda | Vibes tabanlı, manuel düzeltme gerektirir | Token doğruluğunda, ilk geçişte kullanılabilir |

| Kod Bağlantısı | Ayrı manuel adım | Otomatik doğrulama |

| Değişken sapması | Manuel denetim, saatler | Tek satırlık komut, dakikalar |

| Ekran görüntüsü yedekleme | Sahip olduğunuz tek seçenek | MCP kullanılamadığında yedekleme |

| Tasarım Kalite Güvencesi | Manuel karşılaştırma | Saniyeler içinde fark raporu |

Daha fazla yapay zeka iş akışı dökümü istiyorsanız, Brainy Kağıtlar'ün geri kalanına göz atın. MCP'ü ekibinizin tüm tasarımdan koda işlem hattına entegre etmek istiyorsanız, Brainy'ı işe alın'e bakın.

Güvenlik: Figma'in gördükleri ve yapay zekânızın gördükleri

İki ayrı soru, ikisini de anlamak önemli.

Figma'in gördükleri. MCP sunucusu, Figma'in sunucularında değil, makinenizde yerel olarak çalışır. Figma, MCP'i etkinleştirdiğinizi ve hangi dosyalara erişildiğini görür, çünkü kimlik doğrulama Figma oturumunuz üzerinden gerçekleşir. Kurumsal hesaplar için yöneticiler, yerel MCP'i kuruluş düzeyinde devre dışı bırakabilir.

Yapay zekâ aracısının gördükleri. Yapıştırdığınız Figma dosya URL'si ne olursa olsun. Aracı, tüm Figma çalışma alanınıza göz atma erişimine sahip değildir. Özellikle referans göstermediğiniz sürece diğer ekip kitaplıklarını görmez. Yorumları, sürüm geçmişini veya ilgisiz dosyaları görmez. Her komut istemi, ona verdiğiniz şeye göre kapsamlandırılır.

Makinenizden çıkanlar. Claude Code'ü Anthropic'in API'si ile kullanıyorsanız, talep ettiğiniz çerçeve verileri komut istemi bağlamının bir parçası olarak Anthropic'ye gönderilir. Figma dosyanız gizli müşteri çalışmaları veya yayınlanmamış ürün tasarımları içeriyorsa bu önemlidir. Hassas dosyalarda MCP'ü bağlamadan önce ekibinizin yapay zeka politikasını okuyun.

Çoğu tasarım çalışması için bu sorun değil. Düzenlemeye tabi sektörler veya katı veri maddeleri içeren gizlilik sözleşmeleri için önce kontrol edin.

Figma MCP'nin hala yetersiz kaldığı noktalar

Dürüst olun. Bu, Nisan 2026'daki Figma MCP sürümüdür, cilalanmış bir gelecek sürümü değil.

Görüntü varlığı işleme sınırlıdır. MCP, ajana gerçek piksel verilerini değil, görüntü doldurma URL'lerini verir. Görüntünün yoğun kompozisyonel iş yaptığı düzenlerde, ajan yine de tahmin etmek zorundadır.

Prototipler ve etkileşimler çevrilemez. MCP statik yapıyı ortaya çıkarır. Figma dosyanızda prototip bağlantıları, fareyle üzerine gelme durumları, akıllı animasyon veya varyant değiştirme varsa, ajan bunların hiçbirini görmez. Animasyon mantığını yine de elle yazmanız gerekir.

Eklentiler okunamaz. Bir Figma eklentisi dosyanızda içerik (grafikler, simgeler, veri görselleştirmeleri) oluşturduysa, ajan çıktıyı statik bir katman olarak görür. Eklentinin mantığını yeniden oluşturamaz.

Performans, büyük dosyalarda düşer. 500'den fazla kare içeren bir dosyanın çözümlenmesi, 20 kare içeren bir dosyaya göre daha uzun sürer. En iyi sonuçlar için tek bir devasa dosya yerine, kapsamlı sayfalarda çalışın.

Otomatik yerleşim varsayımları önemlidir. Aracı, Figma çerçeveleriniz otomatik yerleşimi doğru şekilde kullandığında en temiz çıktıyı üretir. Mutlak konumlandırılmış serbest biçimli düzenler kötü çevrilir. Bu bir Figma disiplin problemidir, MCP problemi değil, ancak burada en belirgin şekilde ortaya çıkar.

Bunların hiçbiri sorun teşkil etmez. Hepsi, MCP'i iyi bir hızlı mühendislik ile eşleştirmek için nedenlerdir, körü körüne güvenmek için değil.

SSS

Figma MCP ücretsiz mi?

Evet. MCP sunucusu, Figma masaüstü sürümüne ek bir ücret ödemeden entegre edilmiştir. Figma ve yapay zeka aracınız (Claude, Cursor, vb.) için ödeme yaparsınız. Bağlantının kendisi ücretsizdir.

Figma MCP web sürümünde çalışıyor mu?

Yerel MCP sunucusu, Figma masaüstü sürümünün bir özelliğidir. Yalnızca web kullanıcıları henüz buna erişemez. Ciddi tasarım-kodlama çalışmaları için masaüstü sürümü zaten daha iyi bir kurulumdur.

MCP'yi aynı anda birden fazla yapay zeka aracıyla kullanabilir miyim? Evet. Birden fazla ajan aynı yerel MCP sunucusunu okuyabilir. Claude Code, Cursor, Claude Masaüstü ve diğer tüm MCP uyumlu istemciler aynı anda bağlanabilir.

Bir oturum sırasında Figma dosyalarını değiştirirsem ne olur?

Ajan, verdiğiniz URL'deki çerçeveyi çözümler. URL'leri değiştirmek bağlamları değiştirir. Hiçbir şeyi yeniden başlatmadan tek bir görüşmede birden fazla dosyaya referans verebilirsiniz.

MCP, Figma Geliştirici Modu'nun yerini mi alıyor?

Hayır. Geliştirici Modu, insan odaklı inceleme aracıdır. MCP ise ajan odaklı veri katmanıdır. Birbirlerini tamamlayıcıdırlar. Aslında, Geliştirici Modu'nun gösterdiği veriler, MCP'in ajana sunduğu verilerle aynıdır.

Ekran görüntüsü almayı bırakın Figma

Her tasarım ekibinin ortak bir kötü alışkanlığı vardır: Figma çerçevesinin ekran görüntüsünü almak, ChatGPT veya Claude'e yapıştırmak ve kod istemek. Çıktı her zaman titreşimlerdir, asla token'lar değildir. Sonra titreşimleri elle düzeltmek için bir saat harcarsınız.

Beş dakikalık kurulumla bu iş akışı ölür. Ajan gerçek çerçeveyi okur. Boşluklar gerçektir. Bileşenler gerçek bileşenlerdir. Token'lar gerçek token'lardır. Kod ilk seferde gönderilebilirliğe daha yakın çıkar.

Figma'te MCP'i etkinleştirin. AI aracınıza bağlayıcıyı kurun. Ekran görüntüleri değil, URL'ler yapıştırın.

"MCP'ten önce" ve "MCP'ten sonra" arasındaki çıktı kalitesi farkı oldukça belirgin. Bu, modern tasarımcının araç setindeki dakika başına en büyük yatırım getirisi sağlayan kurulumdur.

Figma'in ekran görüntüsünü almayı bırakın.