Figma'dan Claude Code'a: Tasarımcılar İçin Oyun Kitabı

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   ÖNCE (Teslimat Cehennemi)            SONRA (Vibe Coding)             │
4│   ───────────────────────              ───────────────────              │
5│                                                                         │
6│   Tasarım                              Tasarım                          │
7│      ↓                                    ↓                             │
8│   Spesifikasyon dokümanı              Claude, Figma'yı doğrudan okur   │
9│      ↓                                    ↓                             │
10│   Geliştirici yorumlar                 Siz yönlendirirsiniz: "Bunu oluştur"│
11│      ↓                                    ↓                             │
12│   İnceleme                             Prodüksiyon kodu                 │
13│      ↓                                    ↓                             │
14│   Geri bildirim döngüsü ×10           Yayınla 🚀                       │
15│      ↓                                                                  │
16│   "Yeterince yakın"                   Süre: Dakikalar                  │
17│                                                                         │
18│   Süre: Haftalar                                                        │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Profil (sol üst) → Ayarlar → Güvenlik
2→ Kişisel erişim token'ları → Yeni token oluştur → Hemen kopyala

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Claude Code'da şunu yazın: /mcp
2Şunu görmelisiniz: figma ✓ bağlandı

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         FIGMA DOSYANIZ                                  │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  CLAUDE'UN OKUYABİLDİKLERİ                                     │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Katman adları ve hiyerarşisi   ✓ Auto Layout ayarları       │   │
9│   │  ✓ Renkler (dolgu, kontur)        ✓ Bileşen varyantları        │   │
10│   │  ✓ Tipografi stilleri             ✓ Boşluk ve dolgu            │   │
11│   │  ✓ Efektler (gölge, bulanıklık)   ✓ Kısıtlamalar               │   │
12│   │  ✓ Tasarım token'ları/değişkenler ✓ Metin içeriği              │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  CLAUDE'UN OKUYAMADIKLARI                                       │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Gerçek görüntü pikselleri    ✗ Prototip etkileşimleri       │   │
19│   │  ✗ Yorumlar ve geri bildirimler ✗ Sürüm geçmişi                │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Figma tasarımımı şuradan oku:
2https://www.figma.com/design/[DOSYA-ID-NİZ]/[DOSYA-ADI]
3
4Bana şunları ver:
51. Sayfa yapısına genel bakış
62. Ana bölümlerin listesi
73. Kullanılan renk paleti
84. Tipografi stilleri
95. Tanımlayabildiğin herhangi bir bileşen

1Figma dosyasından şunları çıkar ve oluştur:
2
31. Şunları içeren bir Tailwind konfigürasyonu:
4   - Tasarımla eşleşen özel renkler
5   - Yazı tipleri ve boyutları
6   - Gördüklerine dayalı boşluk ölçeği
7
82. Yedek olarak CSS değişkenleri dosyası
9
10Renkleri anlamsal isimler olarak biçimlendir (primary, secondary, accent, neutral).

1Figma dosyamdaki [BİLEŞEN ADI]'na bak.
2
3Şunları yapan bir React bileşeni oluştur:
4- Tam stil ile eşleşsin (renkler, boşluk, tipografi)
5- Tailwind CSS kullansın
6- Tanımladığım tüm varyantları desteklesin (varsa)
7- TypeScript ile tamamen tiplendirilmiş olsun
8- Tasarıma dayalı fare üzerine gelme/odaklanma durumlarını içersin

1Figma tasarımımdan [BÖLÜM ADI] bölümünü oluştur.
2
3Gereksinimler:
4- Tasarımla tam olarak eşleşsin
5- Duyarlı (responsive) olsun:
6  - Mobil (<768px): [düzeni tanımla]
7  - Masaüstü (≥768px): [düzeni tanımla]
8- Anlamsal HTML kullan (section, nav, main, article)
9- Tasarımdaki tüm metin içeriğini içersin

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP EYLEMDE                                   │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA TASARIM    │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Tasarım dosyaları│  │  Tel kafesler &   │  │  AI tarafından    │
12│  → Prodüksiyon   │  │  kullanıcı akışları│  │  oluşturulan UI  │
13│  kodu             │  │  → Çalışan uygulama│  │  → Kod tabanına  │
14│                   │  │                   │  │  ekle             │
15│                   │  │                   │  │                   │
16│  ⭐ EN ÇOK       │  │  🎯 GÜÇLÜ         │  │  ⚡ EN HIZLI      │
17│  KULLANILAN       │  │                   │  │                   │
18└───────────────────┘  └───────────────────┘  └───────────────────┘
19        │                       │                       │
20        ▼                       ▼                       ▼
21┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
22│ "Açılış sayfami   │  │ "Kullanıcı akışımı│  │ "Bu Make          │
23│ bu Figma          │  │ oku ve Next.js    │  │ tasarımını al ve  │
24│ tasarımından      │  │ rota yapısını     │  │ mevcut portföy    │
25│ oluştur"          │  │ oluştur"          │  │ uygulamama ekle"  │
26└───────────────────┘  └───────────────────┘  └───────────────────┘

1ADIM 1                    ADIM 2                    ADIM 3
2───────────────────────────────────────────────────────────────────
3"Tasarım sistemi         "Temel bileşenleri      "Bu bileşenleri
4dosyamı oku ve           oluştur: Button,        kullanarak ana
5tüm token'ları çıkar"    Card, Input, Badge"     sayfayı oluştur"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10               ADIM 4: Sayfaları tek tek ekle
11               "Şimdi fiyatlandırma sayfasını oluştur"
12               "Şimdi hakkımızda sayfasını oluştur"

1"[URL]'yi oku, token'ları çıkar, tüm bölümleriyle tam sayfayı oluştur,
2duyarlı hale getir, Next.js + Tailwind kullan. Başla."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Figma dosyanız iyi organize edilmiş, doğru         │
6     │     adlandırma ve Auto Layout kullanılmışsa en iyi      │
7     │     şekilde çalışır                                     │
8     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokenlar│ → │ Atomlar │ → │ Moleküller│ → │Bölümler │ → │  Sayfa  │
3│ (renkler,│   │ (buton, │   │ (kart,   │   │ (hero,  │   │ (tam    │
4│ yazılar) │   │ giriş)  │   │ nav)     │   │ altbilgi)│  │ sayfa)  │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  ADLANDIRMA                                                            │
3│  [ ] Katmanlar anlamsal isimler kullanır  hero-section ✓   Frame 427 ✗│
4│  [ ] Bileşenler açıkça adlandırılmış    Button/Primary ✓  Component 1 ✗│
5│  [ ] Varyantların açıklayıcı özellikleri var  size=lg ✓   variant=2 ✗ │
6├─────────────────────────────────────────────────────────────────────────┤
7│  YAPI                                                                   │
8│  [ ] Tüm kapsayıcılarda Auto Layout var  Flexbox hazır ✓  Kesin karmaşa ✗│
9│  [ ] Düz hiyerarşi (minimum iç içelik)  Temiz DOM ✓      Div çorbası ✗ │
10│  [ ] Bölümler açıkça ayrılmış           Kolay ayrıştırma ✓  Kaos ✗     │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKENLAR                                                               │
13│  [ ] Renkler stil olarak tanımlanmış    Çıkarılabilir ✓  Sabit kodlu ✗  │
14│  [ ] Tipografi metin stilleri olarak    Tutarlı ✓        Rastgele ✗    │
15│  [ ] Boşluk tutarlı                     Sistematik ✓     Keyfi ✗       │
16└─────────────────────────────────────────────────────────────────────────┘

11. KATMANLARI CSS SINIFLARI GİBİ ADLANDIRIN
2   nav-links ✓    Group 5 ✗
3
42. BÖLÜM BÖLÜM ÇALIŞIN
5   Hero → Özellikler → Referanslar → Altbilgi
6   (Tüm sayfayı bir kerede istemeyin)
7
83. DOĞRUDAN FIGMA'YA ATIF YAPIN
9   "Özellikler bölümündeki karta bak"
10   (Değil: "Yuvarlak köşeli bir kart oluştur")
11
124. ÖNCE VARLIKLARI DIŞA AKTARIN
13   Görsellerin manuel olarak dışa aktarılması gerekir → /public klasörü
14   Sonra Claude'a şunu söyleyin: "Hero görseli /public/hero.png dizininde"
15
165. TEKNOLOJİ YIĞININIZI BAŞTAN PAYLAŞIN
17   "Next.js 14 + Tailwind + TypeScript kullanıyorum"
18   (Claude sizin kurallarınıza uyacaktır)

1Figma tasarımımı koda dönüştürmek istiyorum.
2
3Figma URL'si: [URL'NİZİ YAPIŞTIRIN]
4
5Teknoloji: Next.js 14 + Tailwind CSS + TypeScript
6
7Lütfen:
81. İlk olarak, tasarımı analiz et ve ne gördüğünü söyle
92. Renk paletini çıkar ve bir Tailwind konfigürasyonu oluştur
103. Sonra sana hangi bölümü önce oluşturmamı istediğimi söyleyeceğim
11
12Adım adım ilerleyelim.