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.

Ücretli planlarda View veya Collab koltuğuna sahip olan veya Starter planındaki 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 koltuğuna 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 şu anda beta dönemi boyunca ücretsiz olarak sunulmaktadır.

• Yer tutucu görseller oluşturun: Kaynak, yakalanan veya kitaplık görselleri kullanılamadığında, ajanlar izin istedikten ve Figma AI kredi kullanımını bildirdikten sonra generate_image kullanabilir. Oluşturulan görseller upload_assets ile yüklenir ve tasarıma uygulanır.

• Seçili frame'lerden kod oluşturun

  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ı çıkarın

  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 yazın

  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şturun (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ğlanın

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

VS Code

1. ⌘ Shift P kısayolunu kullanarak MCP:Add Server arayın.
2. HTTP seçin.
3. Arama çubuğuna sunucu URL'sini https://mcp.figma.com/mcp 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örürsünüz:

{
  "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. Araçlar listelenmezse VS Code'u yeniden başlatın.

[!NOTE] VS Code'da MCP kullanmak için hesabınızda GitHub Copilot etkinleştirilmiş 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 Ajan Becerileri içeren Figma Eklentisi'ni yüklemektir.

Eklentiyi Cursor'un 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 Ajan 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 Ajan 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 ç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 bu 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, belirli bir tasarım düğümüne erişmek için MCP istemcinizi 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. İstemcinize, seçilen URL'deki tasarımı uygulamanıza yardımcı olması için yönlendirin.

[!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 (isteğe bağlı kod tabanı referansıyla) 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ı 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ı amacı iletmek için Otomatik yerleşim kullanın.

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

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

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 oluştur"
• "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 amaç 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 asistan, özellikle daha fazla araç kullanılabilir hale geldikçe doğru olanı otomatik olarak seçmez. Sonuçlar yanlışsa, 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 rehberlik ayarlayın. 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ğlayın

## 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ı rehberlik 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 parçalar 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ıtlara yol açabilir. Bunun yerine:

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

Bu, bağlamın yönetilebilir kalmasına ve sonuçların hem sizin hem de model için daha öngörülebilir olmasına 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 tüm proje)
• 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 getirmesini sağlayan 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.