Cursor ve diğer yapay zeka destekli kodlama araçlarına bu Model Context Protocol sunucusu ile Figma dosyalarınıza erişim izni verin.

Cursor'un Figma tasarım verilerine erişimi olduğunda, ekran görüntüsü yapıştırmak gibi alternatif yöntemlere kıyasla tasarımları çok daha iyi bir şekilde tek seferde doğru uygulayabilir.

Hızlı başlangıç talimatlarını görün →

Demo

Cursor'da Figma tasarım verilerini kullanarak bir UI oluşturma demosunu izleyin

Nasıl çalışır

1. IDE'nizin chat penceresini açın (örneğin Cursor'da agent modu).
2. Bir Figma dosyası, frame veya grup bağlantısını yapıştırın.
3. Cursor'a Figma dosyası ile bir şey yapmasını söyleyin — örneğin tasarımı uygulayın.
4. Cursor, Figma'dan ilgili metadata'yı alacak ve kodunuzu yazmak için kullanacaktır.

Bu MCP sunucusu özellikle Cursor ile kullanım için tasarlanmıştır. Figma API'den yanıt vermeden önce, cevabı basitleştirir ve çevirir, böylece modele sadece en ilgili layout ve styling bilgileri sağlanır.

Modele sağlanan bağlam miktarını azaltmak, yapay zekanın daha doğru olmasına ve yanıtların daha ilgili olmasına yardımcı olur.

Başlarken

Birçok kod editörü ve diğer yapay zeka istemcileri MCP sunucularını yönetmek için bir yapılandırma dosyası kullanır.

figma-developer-mcp sunucusu, yapılandırma dosyanıza aşağıdakini ekleyerek yapılandırılabilir.

NOT: Bu sunucuyu kullanmak için bir Figma erişim token'ı oluşturmanız gerekir. Figma API erişim token'ı oluşturmaya ilişkin talimatlar burada bulunabilir.

MacOS / Linux

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "mcpServers": {
    "Framelink MCP for Figma": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Veya env alanında FIGMA_API_KEY ve PORT değerlerini ayarlayabilirsiniz.

Framelink MCP for Figma'yı yapılandırma hakkında daha fazla bilgiye ihtiyacınız varsa, Framelink belgelerine bakın.

Star History

Daha Fazlasını Öğrenin

Framelink MCP for Figma basit ama güçlüdür. Framelink sitesinde daha fazlasını öğrenerek en iyi şekilde yararlanın.