Figma MCP — Tasarımdan Koda

Figma'nın resmi MCP sunucusu: seçili tasarımın yapısını, değişkenlerini ve stillerini Claude'a verir; ekran görüntüsünden tahmin yerine gerçek tasarım verisiyle kod üretilir. Uzak (OAuth) veya masaüstü Dev Mode ile çalışır.

# Figma MCP — Tasarımdan Koda

Figma'nın resmi MCP sunucusu. Claude'a tasarım dosyasının **gerçek yapısını**
verir: katmanlar, auto-layout, değişkenler (design token), stiller, bileşenler.
Ekran görüntüsünden tahmin etmek yerine tasarım verisinden kod üretilir —
piksel piksel doğru arayüz demek.

- **Uç (endpoint):** `https://mcp.figma.com/mcp`
- **Taşıma:** Streamable HTTP (uzak)
- **Kimlik doğrulama:** OAuth — tarayıcıda Figma hesabınla giriş yaparsın

## Hızlı kur

```bash
claude mcp add --transport http figma https://mcp.figma.com/mcp
```

Sonra Claude Code'u yeniden başlat → `/mcp` → **figma** → **Authenticate**.

Alternatif: Figma masaüstü uygulamasında **Dev Mode MCP Server**'ı açarsan
(Preferences → Enable Dev Mode MCP Server) yerel sunucu da kullanılabilir:

```bash
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
```

## Ne yapar

- Seçili frame/bileşenin yapısını ve stillerini okuma
- Design variable'ları (renk, spacing, tipografi token'ları) çekme
- Bileşen ve varyant bilgisi alma
- Frame görselini referans olarak getirme

## Örnekler

> "Figma'da seçili kartı Tailwind + shadcn/ui bileşeni olarak yaz."
> "Bu tasarımdaki renk değişkenlerini CSS custom property olarak çıkar."
> "Şu frame'in linkini veriyorum, mobil uyumlu React bileşeni üret: ..."

## Not

En iyi sonuç için tasarımda auto-layout ve değişken kullanılmış olmalı —
sunucu ne kadar yapısal veri bulursa kod o kadar isabetli olur.