Figma

Figma MCP Sunucu Rehberi

Figma MCP sunucusu, Figma tasarım dosyalarından kod üreten yapay zeka ajanlarına önemli tasarım bilgileri ve bağlam sağlayarak Figma'yı doğrudan iş akışınıza getirir.

[!NOTE] Figma'dan veri okuyan Figma MCP sunucu araçları için hız sınırları geçerlidir. Figma dosyalarına yazan bazı araçlar hız sınırlarından muaftır.

Starter planındaki veya ücretli planlarda View ya da Collab oturumuna sahip kullanıcılar ayda en fazla 6 araç çağrısıyla sınırlandırılacaktır.

Professional, Organization veya Enterprise planlarında Dev veya Full oturumuna sahip kullanıcılar için, Tier 1 Figma REST API ile aynı limitleri izleyen dakika başına hız sınırları geçerlidir. Figma'nın REST API'sinde olduğu gibi, Figma hız sınırlarını değiştirme hakkını saklı tutar.

Figma MCP sunucu belgelerinin tamamı için geliştirici belgelerimize bakın. Figma MCP sunucusunu ve ilgili kaynakları (bu beceriler dahil) kullanarak Figma Geliştirici Şartları'nı kabul etmiş olursunuz. Bu beceriler şu anda Beta özelliği olarak sunulmaktadır.

Özellikler

• Kanvasa yazma (yalnızca uzak sunucu): MCP istemcinizden doğrudan yerel Figma içeriği oluşturun ve değiştirin. Doğru becerilerle ajanlar, tasarım sisteminizi kaynak olarak kullanarak Figma dosyalarınızda frame'ler, bileşenler, değişkenler ve otomatik yerleşim oluşturabilir ve güncelleyebilir.

  Not: Figma'nın yapay zeka ajanlarını destekleme şeklini hızla geliştiriyoruz. Kanvasa yazma özelliği sonunda kullanım başına ücretli bir özellik olacak, ancak beta dönemi boyunca şu anda ücretsiz olarak sunulmaktadır.

• Seçili frame'lerden kod üretme

  Bir Figma frame'i seçin ve koda dönüştürün. Yeni akışlar oluşturan veya uygulama özellikleri üzerinde yinelemeler yapan ürün ekipleri için harikadır.

• Tasarım bağlamını çıkarma

  Değişkenleri, bileşenleri ve yerleşim verilerini doğrudan IDE'nize çekin. Bu, özellikle tasarım sistemleri ve bileşen tabanlı iş akışları için kullanışlıdır.

• Code Connect ile daha akıllı kod yazma

  Gerçek bileşenlerinizi yeniden kullanarak çıktı kalitesini artırın. Code Connect, üretilen kodunuzun kod tabanınızla tutarlı kalmasını sağlar.

  Code Connect hakkında daha fazla bilgi edinin →

• Web sayfalarından Figma tasarımları oluşturma (kademeli olarak sunuluyor)

  Yapay zeka kodlama ajanınızdan doğrudan bir web sayfasını Figma tasarımına yakalayın, içe aktarın veya dönüştürün.

Kurulum ve Yapılandırma

Figma MCP sunucusuna bağlanma

Farklı MCP istemcileri biraz farklı kurulumlar gerektirir. Figma MCP sunucusuna bağlanmak için belirli istemciniz için aşağıdaki talimatları izleyin.

VS Code

1. ⌘ Shift P kısayolunu kullanarak MCP:Add Server araması yapın.
2. HTTP seçeneğini seçin.
3. Sunucu URL'sini https://mcp.figma.com/mcp arama çubuğuna yapıştırın. Ardından Enter tuşuna basın.
4. Sunucu kimliği istendiğinde figma girin.
5. Bu sunucuyu genel olarak mı yoksa yalnızca geçerli çalışma alanı için mi eklemek istediğinizi seçin. Onaylandıktan sonra, mcp.json dosyanızda şuna benzer bir yapılandırma göreceksiniz:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. ⌥⌘B veya ⌃⌘I kullanarak sohbet araç çubuğunu açın ve Agent moduna geçin.
7. Sohbet açıkken, Figma MCP sunucu araçlarının kullanılabilir olduğunu doğrulamak için #get_design_context yazın. Hiçbir araç listelenmezse VS Code'u yeniden başlatın.

[!NOTE] VS Code'da MCP kullanmak için hesabınızda GitHub Copilot etkin olmalıdır.

Daha fazla bilgi için VS Code'un resmi belgelerine bakın.

Cursor

Cursor'da Figma MCP sunucusunu kurmanın önerilen yolu, MCP sunucu ayarlarının yanı sıra yaygın iş akışları için Agent Becerileri içeren Figma Eklentisi'ni yüklemektir.

Eklentiyi Cursor'ın ajan sohbetine aşağıdaki komutu yazarak yükleyin:

/add-plugin figma

Eklenti şunları içerir:

• Figma MCP sunucusu için MCP sunucu yapılandırması
• Tasarımları uygulama, Code Connect aracılığıyla bileşenleri bağlama ve tasarım sistemi kuralları oluşturma becerileri
• Figma MCP sunucusundan doğru varlık işleme kuralları

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

Claude Code'da Figma MCP sunucusunu kurmanın önerilen yolu, MCP sunucu ayarlarının yanı sıra yaygın iş akışları için Agent Becerileri içeren Figma Eklentisi'ni yüklemektir.

Eklentiyi Anthropic'in resmi eklenti pazarından yüklemek için aşağıdaki komutu çalıştırın.

claude plugin install figma@claude-plugins-official

Anthropic'in Claude Code Eklentileri ve Agent Becerileri hakkında daha fazla bilgi edinin.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Gemini CLI için Figma uzantısını aşağıdaki komutu çalıştırarak yükleyin:

gemini extensions install https://github.com/figma/mcp-server-guide

Kurulduktan sonra, gemini komutunu çalıştırarak Figma ile kimlik doğrulaması yapın ve ardından CLI içinde aşağıdaki komutu çalıştırın:

/mcp auth figma

Uzantıyı kaldırmak için:

gemini extensions uninstall figma

Diğer düzenleyiciler

Streamable HTTP destekleyen diğer kod düzenleyicileri ve araçlar da Figma MCP sunucusuna bağlanabilir.

Farklı bir düzenleyici veya araç kullanıyorsanız, Streamable HTTP tabanlı iletişimi desteklediğini doğrulamak için belgelerini kontrol edin. Destekliyorsa, Figma MCP sunucusunu aşağıdaki yapılandırmayı kullanarak manuel olarak ekleyebilirsiniz:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

MCP istemcinizi yönlendirme

Figma MCP sunucusu, LLM'lerin Figma'daki tasarımları çevirmesine yardımcı olan bir dizi araç sunar. Bağlandıktan sonra, MCP istemcinizi belirli bir tasarım düğümüne erişmesi için yönlendirebilirsiniz.

Yapay zeka istemcinize Figma tasarım bağlamı sağlamak için:

1. Figma'da bir frame veya katmanın bağlantısını kopyalayın.
2. İstemcinizden seçilen URL'deki tasarımı uygulamanıza yardımcı olmasını isteyin.

[!NOTE] İstemciniz seçilen URL'ye gidemez, ancak MCP sunucusunun hangi nesne hakkında bilgi döndüreceğini belirlemesi için gereken node-id'yi çıkaracaktır.

Araçlar ve beceriler

Figma, Figma MCP sunucusu tarafından sağlanan araçların bir listesini geliştirici belgelerinde tutar.

Ayrıca, desteklenen ajanlar için Figma eklentisine dahil edilen beceriler hakkında Figma Yardım Merkezi'nde daha fazla bilgi edinebilirsiniz. Ajana bağlı olarak, connector, extension veya power terimlerini de görebilirsiniz; bunlar aynı beceri setini içerir.

Bu depo ayrıca Figma eklentisiyle birlikte gelmeyen bağımsız iş akışı becerileri de içerir:

• workflow-skills/video-interaction-mapper: UI kayıtlarını açıklamalı Figma storyboard'lara dönüştürür
• workflow-skills/generate-project-plan: Bir PRD'yi (artı isteğe bağlı kod tabanı referansı) FigJam proje planı panosuna dönüştürür

MCP en iyi uygulamaları

Üretilen kodun kalitesi birkaç faktöre bağlıdır. Bazıları sizin tarafınızdan, bazıları da kullandığınız araçlar tarafından kontrol edilir. Temiz ve tutarlı çıktı için bazı öneriler:

Daha iyi kod için Figma dosyanızı yapılandırın

Tasarım amacınız için en iyi bağlamı sağlayın, böylece MCP ve yapay zeka asistanınız sisteminizle açık, tutarlı ve uyumlu kod üretebilir.

• Yeniden kullanılan her şey için bileşenler kullanın (butonlar, kartlar, girişler vb.)
• Bileşenleri Code Connect aracılığıyla kod tabanınıza bağlayın. Kodda tutarlı bileşen yeniden kullanımı elde etmenin en iyi yolu budur. Bu olmadan model tahmin yürütür.
• Boşluk, renk, yarıçap ve tipografi için değişkenler kullanın.
• Katmanları anlamsal olarak adlandırın (ör. CardContainer, Group 5 değil)
• Duyarlı niyeti iletmek için Otomatik yerleşim kullanın.

[!TIP] Kod üretmeden önce frame'in beklendiği gibi davrandığını kontrol etmek için Figma'da frame'i yeniden boyutlandırın.

• Açıklamalar ve geliştirici kaynakları kullanın bir şeyin nasıl davranması, hizalanması veya yanıt vermesi gerektiği gibi yalnızca görsellerden yakalanması zor olan tasarım niyetini iletmek için.

Yapay zekayı yönlendirmek için etkili istemler yazın

MCP, yapay zeka asistanınıza yapılandırılmış Figma verileri sağlar, ancak sonucu yönlendiren sizin isteminizdir. İyi istemler şunları yapabilir:

• Sonucu çerçeveniz veya stil sisteminizle hizalayın
• Dosya yapısını ve adlandırma kurallarını izleyin
• Belirli yollara kod ekleyin (ör. src/components/ui)
• Yeni dosyalar oluşturmak yerine mevcut dosyalara kod ekleyin veya değiştirin
• Belirli yerleşim sistemlerini izleyin (ör. grid, flexbox, absolute)

Örnekler:

• "Bu frame'den iOS SwiftUI kodu üret"
• "Bu yerleşim için Chakra UI kullan"
• "src/components/ui bileşenlerini kullan"
• "Bunu src/components/marketing/PricingCard.tsx ekle"
• "Stack yerleşim bileşenimizi kullan"

İstemleri bir ekip arkadaşına verilen özet gibi düşünün. Net niyet daha iyi sonuçlara yol açar.

Gerektiğinde belirli araçları tetikleyin

MCP farklı araçları destekler ve her biri yapay zeka asistanınıza farklı türde yapılandırılmış bağlam sağlar. Bazen, özellikle daha fazla araç kullanılabilir hale geldikçe, asistan doğru olanı otomatik olarak seçmez. Sonuçlar istenen gibi değilse, isteminizde açık olmayı deneyin.

• get_design_context, Figma seçiminizin yapılandırılmış bir React + Tailwind temsilini sağlar. Bu, yapay zeka asistanınızın isteminize bağlı olarak herhangi bir çerçeveye veya kod stiline çevirebileceği bir başlangıç noktasıdır.
• get_variable_defs, seçiminizde kullanılan değişkenleri ve stilleri çıkarır (renk, boşluk, tipografi vb.). Bu, modelin üretilen kodda belirteçlerinize doğrudan başvurmasına yardımcı olur.

Örneğin, belirteçler yerine ham kod alıyorsanız, şöyle bir şey deneyin:

• "Bu frame'de kullanılan değişken adlarını ve değerlerini al."

Özel kurallar ekleyin

Yeni bir geliştirici için işe alım notları gibi, çıktıyı tutarlı tutmak için proje düzeyinde yönergeler belirleyin. Bunlar şunlar gibi şeylerdir:

• Tercih edilen yerleşim ilkelleri
• Dosya organizasyonu
• Adlandırma desenleri
• Neyin sabit kodlanmaması gerektiği

Bunu, MCP istemcinizin talimat dosyaları için kullandığı herhangi bir biçimde sağlayabilirsiniz.

Örnekler:

Tutarlı iyi çıktı sağlama

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Genel kalite kuralları

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Bunları bir kez eklemek, tekrarlayan istem ihtiyacını önemli ölçüde azaltabilir ve ekip arkadaşlarının veya ajanların aynı beklentileri tutarlı bir şekilde izlemesini sağlar.

Kuralların nasıl yapılandırılacağı için IDE'nizin veya MCP istemcinizin belgelerini kontrol ettiğinizden emin olun ve ekibiniz için en iyi sonucu vereni bulmak için denemeler yapın. Açık ve tutarlı yönergeler genellikle daha az ileri geri ile daha iyi, daha yeniden kullanılabilir koda yol açar.

Büyük seçimleri parçalara ayırın

Daha hızlı ve daha güvenilir sonuçlar için ekranları daha küçük parçalara (bileşenler veya mantıksal bölümler gibi) bölün.

Büyük seçimler araçları yavaşlatabilir, hatalara neden olabilir veya özellikle modelin işlemesi için çok fazla bağlam olduğunda eksik yanıtlarla sonuçlanabilir. Bunun yerine:

1. Daha küçük bölümler veya bireysel bileşenler için kod üretin (ör. Kart, Başlık, Kenar Çubuğu)
2. Yavaş veya takılmış hissediyorsanız, seçim boyutunuzu azaltın

Bu, bağlamı yönetilebilir ve sonuçları hem sizin hem de model için daha öngörülebilir tutmaya yardımcı olur.

Çıktıda bir şey doğru görünmüyorsa, genellikle temellere geri dönmek yardımcı olur: Figma dosyasının nasıl yapılandırıldığı, istemin nasıl yazıldığı ve hangi bağlamın gönderildiği. Yukarıdaki en iyi uygulamaları izlemek büyük bir fark yaratabilir ve genellikle daha tutarlı, yeniden kullanılabilir koda yol açar.

Ajanınıza Make bağlamı getirme

Make + MCP entegrasyonu, prototipleri tasarımdan üretime taşımayı kolaylaştırır. Make projelerini MCP üzerinden doğrudan ajanınıza bağlayarak, kaynakları çıkarabilir ve bunları kod tabanınızda yeniden kullanabilirsiniz. Bu, prototipleri gerçek uygulamalara genişletirken sürtünmeyi azaltır ve tasarım niyetinin uygulamaya sadık bir şekilde aktarılmasını sağlar.

Bu entegrasyon ile şunları yapabilirsiniz:

• Proje bağlamını doğrudan Make'ten getirin (tek tek dosyalar veya projenin tamamı)
• Sıfırdan başlamak yerine mevcut kod bileşenlerini kullanmayı isteyin
• Prototipleri gerçek verilerle genişletin ve tasarımları daha hızlı doğrulayıp üretime hazır hale getirin

Nasıl çalışır

[!NOTE] Bu entegrasyon, ajanınızın Make projelerinden doğrudan bağlam getirmesine olanak tanıyan MCP kaynaklar yeteneğini kullanır. Yalnızca MCP kaynaklarını destekleyen istemcilerde kullanılabilir.

Make'ten kaynak getirme adımları

1. Geçerli bir Make bağlantısı sağlayarak ajanınızdan bağlam getirmesini isteyin
2. Make projenizden mevcut dosyaların bir listesini alın
3. İstendiğinde getirmek istediğiniz dosyaları indirin

Örnek iş akışı

Hedef: Make'te tanımlanan tasarım ve davranışla eşleşen bir açılır pencere bileşenini üretim kod tabanınızda uygulayın.

1. Make proje bağlantınızı ajanınızla paylaşın.
2. Ajana şu komutu verin: "Bu Make dosyasındaki açılır pencere bileşeni davranışını ve stillerini almak ve bunu kendi açılır pencere bileşenimi kullanarak uygulamak istiyorum."

Ajanınız Make'ten ilgili bağlamı getirecek ve mevcut açılır pencere bileşeninizi prototipin işlevselliği ve stilleriyle genişletmenizde size rehberlik edecektir.

Simge Yönergeleri

Bu depoda bulunan simgeleri görüntülemek için Figma Marka Kullanım Yönergeleri bölümüne bakın.