🧩 MCP Figma Code Project
Bu proje, Figma tasarımlarını otomatik olarak React bileşenlerine dönüştüren bir sistemin örnek uygulamasıdır. Proje, MCP (Model Context Protocol), Cursor AI, Next.js, ve Figma API teknolojilerini bir araya getirerek tasarım → koda dönüşüm sürecini otomatikleştirir.
🚀 Proje Özeti
Manuel olarak yapılan arayüz kodlama işlemleri zaman kaybına ve hatalara yol açmaktadır. Bu proje, Figma tasarımlarını API aracılığıyla alıp otomatik şekilde Next.js bileşenlerine çevirir. Ayrıca kullanıcı girişi (login), dashboard yönlendirmesi ve yetkilendirme (auth) örnekleri içerir.
⚙️ Kullanılan Teknolojiler
- Next.js 15
- TypeScript
- Tailwind CSS
- Figma API
- MCP (Model Context Protocol)
- Cursor AI IDE
- Node.js & npm
- Git & GitHub
📦 Kurulum
# 1. Depoyu klonla
git clone https://github.com/ahmet02022/mcp-figma-code.git
# 2. Proje klasörüne gir
cd mcp-figma-code
# 3. Gerekli paketleri yükle
npm install
# 4. Ortam değişkenlerini ekle (.env dosyası)
FIGMA_TOKEN=figd_************
FIGMA_FILE_KEY=************
AUTH_SECRET=super-long-random-secret-change-me-1234567890abcd
# 5. Geliştirme modunda çalıştır
npm run dev
## 🌐 Live Demo
Projenin canlı versiyonunu aşağıdaki bağlantıdan görüntüleyebilirsiniz:
👉 [https://dainty-longma-dfb22e.netlify.app/](https://dainty-longma-dfb22e.netlify.app/)