figma-mcp-server

Tuncaysukan/figma-mcp-server

3.2

If you are the rightful owner of figma-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

Figma MCP Server automatically converts Figma designs into React, HTML, Vue, or Flutter code.

Tools
3
Resources
0
Prompts
0

Figma MCP Server

Figma tasarımlarınızı otomatik olarak React, HTML, Vue veya Flutter koduna dönüştüren bir Model Context Protocol (MCP) server'ı.

Özellikler

  • 🎨 Figma tasarımlarını otomatik kod üretimi
  • ⛛️ React, HTML, Vue ve Flutter desteği
  • 🎯 Belirli komponentler için kod üretimi
  • 🎨 Renk ve tipografi stillerini çıkarma
  • 🔄 Cursor IDE ile tam entegrasyon

Kurulum

  1. Bağımlılıkları yükleyin:
npm install
  1. .env.example dosyasını .env olarak kopyalayın ve Figma token'ınızı ekleyin:
cp .env.example .env

  1. Figma Access Token alın:

    • Figma Settings sayfasına gidin
    • "Personal access tokens" bölümünden yeni token oluşturun
    • Token'ı .env dosyasına ekleyin

  2. Projeyi derleyin:

npm run build

Cursor'da Kullanım

  1. Cursor ayarlarınızı açın (Ctrl+Shift+P -> "Preferences: Open User Settings")

  2. MCP ayarlarını düzenleyin (%APPDATA%\Code\User\globalStorage\rooveterinaryinc.roo-cline\settings\cline_mcp_settings.json):

{
  "mcpServers": {
    "figma-mcp-server": {
      "command": "node",
      "args": ["C:\\Users\\Tncy\\Desktop\\chextaapp\\figma-mcp-server\\dist\\index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token-here"
      }
    }
  }
}
  1. Cursor'ı yeniden başlatın

Kullanım Örnekleri

1. Figma Dosyasını Görüntüleme

Cursor chat'te:

Figma dosyamı göster: figma.com/file/ABC123...

2. Kod Üretme

Bu Figma tasarımından React komponenti oluştur: figma.com/file/ABC123...

veya

Bu Figma frame'ini HTML'e çevir: figma.com/file/ABC123... (node-id: 123:456)

veya

Bu Figma tasarımından Flutter widget oluştur: figma.com/file/ABC123...

3. Stilleri Çıkarma

Bu Figma dosyasındaki renk paletini ve tipografiyi çıkar: figma.com/file/ABC123...

Mevcut Araçlar

get_figma_file

Figma dosyasının tüm yapısını alır.

Parametreler:

  • fileKey (string): Figma dosya anahtarı (URL'den)

generate_code_from_figma

Figma tasarımından kod üretir.

Parametreler:

  • fileKey (string): Figma dosya anahtarı
  • nodeId (string, opsiyonel): Belirli bir node ID
  • framework (string): 'react', 'html', 'vue' veya 'flutter'

get_figma_styles

Dosyadaki renk ve tipografi stillerini çıkarır.

Parametreler:

  • fileKey (string): Figma dosya anahtarı

Geliştirme

# Geliştirme modunda çalıştır (otomatik yeniden derleme)
npm run dev

# Server'ı başlat
npm start

Notlar

  • Figma dosya anahtarı, Figma URL'inizdeki /file/ kısmından sonraki kısımdır
    • Örnek: https://www.figma.com/file/ABC123xyz/Dosya-Adi -> ABC123xyz
  • Node ID'yi almak için Figma'da bir frame'e sağ tıklayın ve "Copy/Paste as" -> "Copy link" seçin

Lisans

MIT