Yıllardır aynı yöne gidiyorduk: Figma'dan koda. Tasarımcı çizer, geliştirici kodlar, bir şeyler kaybolur, herkes üzülür.

Şimdi tam tersi de mümkün.

Claude Code, Figma'nın MCP (Model Context Protocol) entegrasyonuyla birleşince ortaya ilginç bir şey çıktı: Çalışan bir UI'ı alıp doğrudan Figma frame'ine dönüştürebiliyorsunuz. Topluluk buna "Code to Canvas" diyor. Ve bu isim boşuna değil. 🎨

Rakamlar Ne Diyor?

Durumun ciddiyetini bir kaç rakamla anlatalım.

275.000+ YouTube görüntülemesi: Entegrasyonun duyurulmasından sonraki ilk 30 günde, yalnızca YouTube'da bu kadar izlenme toplandı. Tasarım araçları dünyasında bu tip bir ilgi için aylar gerekir normalde.

WorldofAI ve DesignCourse gibi büyük kanallar konuyu detaylı inceledi; 50K-87K arası görüntülenme aldılar. (Bunlar "ne harika!" videoları değil, saatlerce süren gerçek tutorial'lar.) 📊

Felix Lee'nin 50 dakikalık workshop'u ise topluluğun yüzeysel içerikten sıkıldığını, derine gitmeye hazır olduğunu gösteriyor. Hype değil, öğrenme talebi var.

Ama YouTube sadece buzdağının görünen kısmı. Asıl rakamlar ekosistem tarafında:

• Framelink Figma MCP (topluluk tarafından geliştirilen açık kaynak sunucu): GitHub'da 5.200+ yıldız, npm'de 114.000+ toplam indirme, haftalık 11.500+ indirme. Bir MCP sunucusu için bu ciddi rakamlar.
• Figma'nın resmi MCP sunucusu artık beta'dan çıkıp genel kullanıma açıldı — ve sadece Claude Code değil, VS Code, Cursor, Windsurf, Codex ile de çalışıyor.
• GitHub Copilot entegrasyonu 6 Mart 2026'da duyuruldu — Figma MCP artık VS Code içinden doğrudan kullanılabiliyor. Bu, kullanıcı tabanını dramatik şekilde genişletiyor.
• Figma Console MCP (community projesi): 84+ araç sunan, FigJam ve Slides desteği de eklenmiş alternatif bir MCP sunucusu. "Cloud Mode" ile web tabanlı AI istemcilerinden de bağlanabiliyorsunuz.

Yani mesele tek bir araç değil — bir ekosistem oluşuyor. 🌱

Asıl Devrim Ne?

Şöyle düşün: Elinizde yıllardır production'da çalışan bir ürün var. Tasarım dosyası kaybolmuş, component library dağınık, design token diye bir şey yok. (Hepimizin başına geldi.)

Şimdiye kadar ne yapıyorduk? Ya sıfırdan çiziyorduk ya da "geliştirici nasıl yazmışsa öyle kalsın" deyip geçiyorduk.

Claude Code to Figma ile şunu yapabiliyorsunuz: Canlı ürünü Claude Code'a veriyorsunuz, o çalışan UI'ı Figma'ya düzenlenebilir frame olarak aktarıyor. Tersine mühendislik. Tek tıkla değil ama eskiye kıyasla inanılmaz hızlı. 🚀

Bu "Code to Canvas" paradigması aslında şunu söylüyor: Kod artık sadece tasarımın çıktısı değil, tasarım sürecinin bir girdisi olabilir.

Ve bu iki yönlü. Figma'nın blog yazısında bunu çok net ifade ediyorlar: "Bazen iş kodla başlar. Bazen canvas'ta. Çoğu zaman ikisinin arasında bir yerde." Claude Code ile Figma arasında gerçek bir ping-pong yapabiliyorsunuz — kodda bir şey üret, Figma'ya at, orada düzenle, tekrar koda çek. Bu döngü ilk kez bu kadar akıcı.

Tamam Ama Kurulum?

Şimdi gelelim gerçeğe.

YouTube'daki içeriklerin büyük çoğunluğunun "nasıl kurulur", "MCP nedir", "bağlantı kuramıyorum" başlıklı olduğunu görünce anlıyorsunuz: Bu araç kullanıma hazır ama kuruluma hazır olmak başka bir şey.

MCP'yi (Model Context Protocol) kurmak biraz sabır istiyor. Araçların birbirleriyle konuşabilmesi için birkaç adım atlıyorsunuz. Sihirli bir "bağla ve çalıştır" butonu yok henüz. 😅

İki yol var, ve hangisini seçtiğiniz önemli:

1. Remote MCP Server (önerilen): Figma'nın kendi barındırdığı endpoint'e bağlanıyorsunuz (https://mcp.figma.com/mcp). Daha geniş özellik seti — özellikle "Write to Canvas" özelliği sadece remote server'da çalışıyor. Claude Code'da /mcp yazıp OAuth ile bağlanıyorsunuz.
2. Desktop MCP Server: Figma masaüstü uygulaması üzerinden lokal çalışıyor (localhost:3845). Daha kısıtlı ama kurumsal ortamlar için tercih edilebilir.

Bu bir engel mi? Hayır. Ama "tasarımcı için 5 dakikada hazır" diye bir şey de değil şu an. Beklentileri doğru kurmak önemli.

Ve bir gerçek daha: Fiyatlandırma. Starter plan kullanıcıları ve View/Collab seat'ler ayda sadece 6 tool call yapabiliyor. Tek bir component üretmek bile 3 call harcayabiliyor (screenshot + context + variables). Yani ciddi kullanım için Professional plan'da Dev veya Full seat gerekiyor. Figma forumlarında ücretli kullanıcıların bile rate limit sorunları yaşadığını görüyoruz — altyapı hâlâ oturuyor.

Gerçekten Ne Kadar İyi?

Burada dürüst olalım.

Güçlü olduğu yer: Canlı, çalışan UI'ları yakalamak. Statik HTML'den çok daha iyi iş çıkarıyor. HTML to Design ile karşılaştırıldığında, gerçek interaction state'leri ve layout'ları yakalayabilmesi ciddi bir fark yaratıyor.

Zorlandığı yer: Design token'ları ve component hiyerarşisi. Japonya'dan bir test ekibi bunu doğrulamak için özellikle inceleme yaptı — token yapısının ve component nesting'in ne kadar korunduğu hâlâ tartışmalı. Küçük projeler için sorun değil, büyük design system'lar için biraz daha dikkat gerekiyor. 🔍

Bilmeniz gereken sınırlamalar:

• Mevcut kodu güncelleyemiyor: Claude Code sıfırdan component üretmede harika, ama tasarım değiştiğinde mevcut koda cerrahi müdahale yapamıyor — genellikle yeniden üretim veya manuel düzenleme gerekiyor.
• Çoklu ekran akışları ekstra iş: Bir carousel veya onboarding akışı gibi çok ekranlı bir flow'u dönüştürmek her frame'i ayrı ayrı işlemeyi gerektiriyor. Her adım daha fazla token, daha fazla zaman.
• Prescriptive vs Descriptive çıktı meselesi: Figma'nın resmi MCP'si React + Tailwind formatında "prescriptive" kod üretiyor — leading-[22.126px] gibi garip değerlerle. Framelink gibi topluluk alternatifleri ise "descriptive" veri gönderiyor: "bu elemanın 1px border'ı ve 16px padding'i var." LLM kendi codebase'inize uygun şekilde implement etsin diye. Hangisini kullandığınız, çıktı kalitesini doğrudan etkiliyor.

(Kısacası: Harika bir başlangıç noktası, ama çıkan sonucu körü körüne kullanmayın.)

Figma'nın Daha Büyük Hamlesi: "Skills" Sistemi

Burada dikkat çekici bir gelişme daha var. Figma, MCP sunucusuna "Skills" adında bir katman ekledi. Skills nedir? Markdown dosyaları — evet, düz metin. Ama bu metin dosyaları AI agent'lara "Figma'da nasıl çalışılır" kurallarını öğretiyor.

Mesela bir skill dosyası şunu söyleyebilir: "Önce get_design_context çalıştır, sonra get_screenshot al, sonra implement et." Bu, aslında tasarım sürecini kodlama sürecine dönüştürmek — ve bunu yapan kişi tasarımcı olabiliyor.

Figma kendi skill'lerini sunuyor, topluluk kendi skill'lerini yazıyor. Bu, ileride design system yönetiminin "prompt engineering" ile kesiştiği bir noktaya evrilecek gibi görünüyor.

2026'da Tasarımcı Olmak

Şimdi biraz daha büyük resme bakalım.

Bu entegrasyon bize şunu söylüyor: Kod okuyabilen, development sürecini anlayan, araçları bağlayabilen tasarımcılar artık farklı bir ligte oynuyor.

"Figma kullanıyorum" yeterliydi bir zamanlar. Şimdi soru şu: Figma'yı neyle, nasıl, ne amaçla kullanıyorsun?

Claude Code to Figma bir araç. Ama arkasındaki beceri seti — tersine mühendislik yapabilmek, kod-tasarım döngüsünü iki yönde yönetebilmek, MCP gibi protokolleri anlayabilmek — bunlar 2026'nın tasarımcı yetkinlikleri. 💡

Hadi Ne Yapacaksın?

Konuşmak güzel ama aksiyona geçelim:

1. MCP kurulumunu dene. Resmi Figma dokümantasyonu var, YouTube'da adım adım tutorial'lar var. Bir öğleden sonrana değer.

2. Mevcut bir ürünü tersine mühendislik et. Üretimde olan küçük bir UI al, Claude Code ile Figma'ya aktar, ne kadar iyi çalıştığını kendi gözlerinle gör.

3. Token ve component kalitesini test et. Çıkan dosyayı eleştirel gözle incele. Ne korunmuş, ne kaybolmuş? Bu analiz sana aracın sınırlarını öğretir — ki bu, onu doğru kullanmanın temelidir.

4. Framelink vs Figma resmi MCP'yi karşılaştır. Aynı frame'i iki farklı MCP ile dene. Prescriptive vs descriptive çıktı farkını kendi gözlerinle gör. Bu, hangi workflow'un sana uyduğunu anlamak için en iyi yol.

5. Rate limit'leri hesapla. Starter plan'daysan 6 call/ay sınırın var. Ciddi kullanım planlıyorsan, plan ve seat tipini gözden geçir.
​
​Tasarım-kod uçurumu kapanmıyor, ama köprüler kurulmaya başladı. Geçip geçmeyeceğin sana kalmış. 🧱