Cursor Figma MCP ile Yazılım Bilmeden Tasarımlarınızı Cursor'a Aktarın

Ben bir tasarımcıyım. Çok önceden ufak tefek PHP, HTML ve CSS hariç herhangi bir yazılım bilgim yok. Şu an yaptığım şeyleri yapacak bir yazılım bilgim kesinlikle yok.

Fakat, bir gün bir yiğit geldi. İsmi Cursor.

Yazılım bilmeden yapay zeka ile kodlama kavramı uzun süredir hayatımızda ama hala çok fazla kişi bilmiyor. Ben bir süredir bilsem de bu kodlama sürecine başlamam 2 ay önceye dayanıyor.

Bunu da Github üzerinden takip ediyorum.

Neredeyse başladığımdan beri her gün çeşitli AI coding agent'ları açıp bir şeyler yapmaya çalışıyorum.

Bu süreçte kullandığım araçlar:

1. Windsurf
2. Lovable
3. Bolt
4. Cursor

Her birinin amaçları birbirinden farklı. Lovable ve Bolt ile gerçekten yazılımcılığın Y'sini bilmeden bir şeyler yapmak mümkün. Windsurf ve Cursor biraz daha ileri seviyede diyebilirim. Ama bu yazılım bilmekten çok yazılımın nasıl çalıştığını, hangi ortamları kullanmayı bilmekle alakalı olabilir.

Fakat bu boşluk her geçen gün daha da kapanıyor.

Cursor'da MCP'ler kullanarak Lovable'da yaptığınız şeyleri yapmaya başladınız diyebilirim.

Örneğin Supabase adında bir servis var. Remote database, auth vs. birçok konuda işinize yarıyor. Lovable'da bu servisi otomatik bir şekilde kullanabiliyordunuz. Şimdi ise Supabase MCP'si ile Cursor'u aynı şekilde kullanabiliyorsunuz.

Model Context Protocol (MCP) Nedir?

Model Context Protocol (MCP), yapay zeka asistanlarını çeşitli veri kaynaklarına sorunsuz bir şekilde bağlamak ve bağlama duyarlı etkileşimler sağlamak için tasarlanmış açık bir standarttır. (Microsoft)

Bu MCP'ler sayesinde de birçok aracı Cursor ile bağlayıp kullanabiliyorsunuz.

Figma MCP Nedir?

Figma MCP; Cursor, Windsurf, Cline gibi yapay destekli kodlama araçlarının Figma tasarım dosyalarınıza erişmesini sağlar. Cursor, Figma tasarım verilerine erişebildiğinde, ekran görüntülerini yapıştırmak gibi alternatif yaklaşımlara göre tasarımları doğru bir şekilde tek seferde çekmede çok daha iyidir.

Çünkü bu erişim kabiliyeti sayesinde, elementlerin CSS kodlarını görebilir ve buradaki kodlardan font detaylarını, renk detaylarını, gölge detaylarını, border detaylarını ve daha birçok farklı detayı görebilir.

Örneğin bir buton tasarlardınız ve bu butonun tüm tasarımsal detaylarını Cursor'a vermek istiyorsunuz. Ekran görüntüsüyle bunu yapması için komut verebilir ya da adım adım her şeyi siz söyleyerek yaptırabilirsiniz. Bu durumda Cursor hem daha fazla kredi harcar hem de tutarlı olmayabilir.

Fakat Figma MCP kullandığınızda, sadece ilgili frame'in linkini kopyalayarak çok daha tutarlı ve kolay şekilde bu işlemi yapabilirsiniz.

Figma MCP Cursor'a Nasıl Kurulur?

Gereklilikler:

1. Figma hesabı (ücretsiz sürüm yeterli)
2. Cursor IDE (ücretsiz limitlerde deneyebilirsiniz ama abonelik ilerleyen aşamalarda gerekli)

Figma API Anahtarı Alma

1. Figma arayüzünü açın
2. Bildirim ikonuna tıklayın
3. Açılan pencerede en sağdaki ayar ikonuna tıklayın
4. Açılan pencerede en sağdaki Security'ye tıklayın
5. Aşağıya inin ve "Personal Access Tokens" alanını bulun
6. "Generate new token" yazısına tıklayın
7. Token ismini girin, süresini seçin ve Generate Token butonuna tıklayın
8. Bu kodu kopyalayın ve bir yere kaydedin.

Olası bir güncelleme durumunda bu şekilde alamayabilirsiniz. Lütfen Figma dokümantasyonunu inceleyin.

Figma MCP'yi Cihazınızda Çalıştırma

1. Eğer kurulu değilse, bilgisayarınıza terminal aracılığıyla homebrew kurun

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Eğer kurulu değilse, bilgisayarınıza homebrew kurduktan sonra node.js kurun

brew install node

3. Daha sonra GLips/Figma-Context-MCP'yi yine terminal'den çalıştırın.
   Aldığınız Figma API anahtarını <your-figma-api-key> ile değiştirin.

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

Yani komut şuna benzemeli:

npx figma-developer-mcp --figma-api-key=abcd-efgh-1234-xyz

Cursor'a Figma MCP Bağlantısını Ekleme

Figma MCP'yi terminalinizde çalıştırdıktan sonra aşağıdaki kodu Cursor MCP'lerinize ekleyin.

1. Cursor'u açın, sağ üstten Cursor > Ayarlar > Cursor Setting'e tıklayın
2. MCP butonuna tıklayın, "Add new global MCP server" butonuna tıklayın
3. Açılan sayfaya aşağıdaki kodu yapıştırın, <your-figma-api-key> alanını Figma'dan aldığınız kodla değiştirmeyi unutmayın.
4. Cmd + S yaparak kaydedin ve sayfayı kapatın.

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

Figma MCP Nasıl Kullanılır?

Figma MCP'yi terminalde aktif edip Cursor'a MCP olarak ekledikten sonra yapmanız gereken şey gayet basit.

1. "Bu Figma tasarımındaki (figma tasarımı linki) tasarımı %100 olarak tasarlamanı istiyorum" yazıp gönderin
2. Sonucu bekleyin
3. İnceleyin ve eksikleri yapması için tekrar komut verin.

Figma MCP'yi verimli kullanmak için dikkat etmeniz gereken bazı şeyler var. Tam anlamıyla her şeyi aktarmak bazen mümkün olmayabilir, ne gibi mi?

Dikkat edilmesi gerekenler:

1. Vektör bazlı görselleri aktarmaz: Eğer vektörel bir illüstrasyon kullanıyorsanız onu Figma içinde .png veya .jpg'ye çevirip o şekilde kullanmalısınız.
2. Çok büyük sayfaları aktaramaz: Örneğin çok uzun bir landing page veya dolu bir dashboard linklediniz, bunu yapmayabilir en azından normal Sonnet 3.5 modeli bunu yapamaz. Çok büyük tasarımlar için context window'u daha fazla olan Sonnet 3.7 Max gibi bir modeli seçmelisiniz. Unutmayın bu model diğerinden daha fazla kredi tüketir.

Önerilerim:

1. Tüm sayfa aktarımı genelde çok sağlıklı çalışmayabilir. Çok fazla bileşen olacağı için Cursor bunları işlerken zorluk yaşayabilir. Eğer tüm sayfayı deniyorsanız sabırlı olun ve ilk taslaktan sonra parça parça düzeltme yapın.
2. Bileşen bazlı aktarım benim önerdiğim yöntem olacaktır. Örneğin bir landing page aktarıyorsanız önce hero section sonra altındaki section gibi parça parça ilerlemek en sağlıklısı olur. Veya dashboard yapıyorsanız, dashboard'ın kendi gövdesini önce, sonra içindeki kartları tek tek yapmanızı öneririm.

Sonuç

Kapanış

Figma MCP, yapay zeka destekli kodlama dünyasında önemli bir adım. Bu yazıda bahsettiğim yöntemlerle, tasarımcılar olarak yazılım bilgimiz olmasa da projelerimizi hayata geçirebiliyoruz. Cursor ve Figma entegrasyonu sayesinde tasarımdan koda geçiş artık çok daha kolay. Bu teknolojiler her geçen gün gelişmeye devam ederken, ben de denemelerimi sürdürüp yeni keşiflerimi sizlerle paylaşacağım. Siz de kendi deneyimlerinizi paylaşmaktan çekinmeyin :)