Generate Figma Screen

Generate Figma Screen — Kod/Açıklamadan Figma Ekranı

> Design Token Kuralı: Bu skill'deki kod örneklerinde geçen font adları, renk kodları, piksel boyutları yalnızca FORMAT gösterimidir. Çalışma anında tüm design token değerleri (font, renk, boyut, spacing, radius, gölge) kayıtlı kütüphaneden (figma_get_variables, figma_get_styles) veya kullanıcıdan okunmalıdır. Hardcoded token değeri kullanma. Detay: project-context.md → "Design Token Kuralı".

Overview

Bu skill, bir kod tabanından veya metin açıklamasından Figma'da tam sayfa/ekran oluşturur. Temel ilke: hardcode hex renk ve piksel değerleri yerine yayınlanmış design system bileşenlerini (component instance), değişkenlerini (variable) ve stillerini (text/effect style) kullanmak.

Topluluk figma-generate-design skill'inden uyarlanmış, F-MCP Bridge araçlarına göre yeniden yazılmıştır.

Zorunlu: Her figma_execute çağrısından önce [figma-canvas-ops](../figma-canvas-ops/SKILL.md) kılavuzundaki kuralları uygula.

Skill Boundaries

• Bu skill: Figma'da ekran oluşturma/güncelleme (DS bileşen instance'ları ile)
• Figma'dan kod üretmek istiyorsan → [implement-design](../implement-design/SKILL.md)
• Yeniden kullanılabilir bileşen/variant oluşturmak istiyorsan → [generate-figma-library](../generate-figma-library/SKILL.md)
• Code Connect eşlemesi istiyorsan → [code-design-mapper](../code-design-mapper/SKILL.md)

Prerequisites

• F-MCP Bridge plugin bağlı olmalı
• Hedef Figma dosyasında yayınlanmış DS bileşenleri (veya team library erişimi) olmalı
• Kaynak: kod dosyaları veya ekran açıklaması

F-MCP skill koordinasyonu

• Önce (isteğe bağlı): audit-figma-design-system ile mevcut ekranın DS uyumunu kontrol et
• Birlikte: figma-canvas-ops (her figma_execute öncesi zorunlu)
• Sonra: figma-a11y-audit ile erişilebilirlik kontrolü; design-drift-detector ile kod parity'si

Required Workflow

Bu adımları sırayla uygula. Adım atlama.

Step 0: Aktif Tasarım Sistemi Kontrolü (ZORUNLU - v1.8.0+)

Ekran yapmaya başlamadan önce DS context'inin belirli olduğundan emin ol.

1. Read .claude/design-systems/active-ds.md
2. Status alanı:
   ✅ Aktif        → Library Name'i not al, Step 1'e geç
   ❌ Henüz seçilmedi → Kullanıcıya sor:
     "Hangi tasarım sistemi ile ilerleyelim?
      - ❖ SUI (varsa)
      - Material Design
      - Apple HIG
      - Kendi DS'iniz (Figma library URL verin)
      - Hiçbiri (ham Figma)"
3. Kullanıcı yanıtladıktan sonra active-ds.md'yi update et:
   - Status: ✅ Aktif
   - Library Name: 
   - Selected At: 
4. Sonraki turlarda bu soruyu TEKRAR SORMA — active-ds.md zaten dolu.
   Kullanıcı açıkça "DS değiştir" demediği sürece aynı DS'i kullan.

Bypass: Kullanıcı "DS'siz devam et" derse Status: DS bypass mode olarak işaretle. Token binding kuralı esnetilir ama yine de kullanıcıya hardcoded değer kullandığını bildir.

Detay: [figma-canvas-ops SKILL Section 0 — Design System Context](../figma-canvas-ops/SKILL.md#0-design-system-context-zorunlu--v180).

Step 1: Plugin Bağlantısını Doğrula

figma_get_status()

Step 2: Ekranı Anla

Figma'ya dokunmadan önce ne inşa edileceğini anla:

1. Koddan oluşturuluyorsa ilgili kaynak dosyaları oku — sayfa yapısı, bölümler, kullanılan bileşenler
2. Ekranın ana bölümlerini listele (Header, Hero, Content, Footer vb.)
3. Her bölüm için gereken UI bileşenlerini belirle (Button, Input, Card, Nav vb.)

Step 2.5: Tasarım Yönü Belirleme

DS bileşenlerini keşfetmeden ÖNCE, ne inşa edileceğinin estetik yönünü belirle.

Marka Profili Kontrolü

Proje kökünde .fmcp-brand-profile.json varsa:

• aestheticDirection → estetik yön zaten tanımlı, kullan
• typography.displayFont / typography.bodyFont → font seçimi zaten tanımlı, kullan
• typography.rationale → seçim gerekçesi mevcut

Profil Yoksa Kullanıcıya Sor

Amaç: Bu ekran hangi sorunu çözüyor? Kim kullanıyor?

Estetik Yön: Aşağıdakilerden birini seç veya tanımla:

| Yön | Karakteristik | Örnek Referans | |-----|--------------|----------------| | Brutal minimal | Çok beyaz alan, tek font, siyah-beyaz + tek accent | Stripe, Linear | | Maksimalist | Yoğun renk, bold tipografi, katmanlı | Spotify Wrapped, Figma | | Retro-futuristik | Neon + karanlık, monospace, grid | Vercel, Terminal | | Organik / doğal | Yumuşak köşeler, sıcak renkler, el yapımı his | Notion, Calm | | Lüks / rafine | Serif font, düşük kontrast, çok whitespace | Apple, Aesop | | Playful / oyunsu | Renkli, yuvarlak, büyük tipografi | Duolingo, Slack | | Editorial / dergi | Grid bazlı, image-heavy, typographic | Medium, NYT | | Brutalist / ham | Kırık grid, mono font, minimal dekorasyon | Bloomberg, Craigslist | | Soft / pastel | Hafif renkler, yumuşak gölgeler, rounded | Headspace, Airbnb | | Industrial / utiliteryen | Fonksiyonel, data-dense, utility-first | GitHub, Grafana |

Kısıtlamalar: Teknik gereksinimler (framework, performans, a11y)

Farklılaşma: Bu ekranı unutulmaz yapan tek şey ne?

> DS bileşen kütüphanesi olan projelerde: Estetik yön DS'nin belirlediği sınırlar içinde olmalı. DS font, renk ve spacing kararlarını zaten vermiştir. Bu adım DS'yi aşmak için değil, DS bileşenlerini nasıl compose edeceğini yönlendirmek içindir.

Tipografi Stratejisi

| Durum | Font Seçimi | |-------|-------------| | Marka profili var | typography.displayFont + typography.bodyFont kullan | | DS font'ları var | DS font'larını kullan (Inter DS font'uysa Inter DOĞRU — Anti-pattern DEĞİL) | | Ne DS ne profil var | Ayırt edici display font seç (Satoshi, Clash Display, General Sans vb.) + okunaklı body font |

• Display font: başlıklar, hero text, sayfa title
• Body font: paragraflar, açıklamalar, form etiketleri
• Font çifti kararını raporda belirt (neden bu çift?)

Step 3: Design System Keşfi (Cache-First Stratejisi)

Üç şey gerekiyor: bileşenler, variable'lar, stiller.

⚠️ MCP TOOL SEÇİMİ (v1.8.0+):

• F-MCP plugin bağlıysa figma_search_assets veya figma_get_library_variables kullan
• Resmi Figma MCP'nin search_design_system tool'unu ÇAĞIRMA — "Resource links not supported" / "file could not be accessed" hatası verir
• Detay: FMCP_INSTRUCTIONS → "TOOL SELECTION" bölümü

CACHE-FIRST KURALI (MUTLAK ZORUNLU - PRE-FLIGHT BLOCKER):

Figma API'ye gitmeden önce .claude/design-systems// cache'ini kontrol et:

1. Read .claude/design-systems//_meta.md
   ↓
   ✅ Var, sync güncel (24h içinde) → cache'leri kullan, devam et
   ❌ Yok / sync eski / yarım kalmış → Step 3a-3d'yi ÇALIŞTIR ve cache'i doldur,
                                       ANCAK O ZAMAN ekran üretimine başla

Cache eksik veya stale ise ekran üretimi BAŞLAYAMAZ — önce keşif/cache, sonra üretim. Bu, hardcoded fallback'leri ve tekrar tekrar API çağrılarını engeller.

• Text style key'leri → .claude/design-systems//tokens.md (text style key cache)
• Variable key'leri → .claude/design-systems//tokens.md
• Component key'leri + override notları → .claude/design-systems//components.md
• Font ailesi + available weights → .claude/design-systems//tokens.md (Font Weights bölümü)

Cache doldurulduktan sonra her oturumda 24 saat boyunca tekrar API'ye gitmeden okunabilir. Bu, sonraki oturumlarda token tüketimini %60-70 düşürür.

Cache Invalidation: Cache dosyasının başına lastUpdated: YYYY-MM-DD HH:mm ekle. 24 saatten eski cache'ler otomatik yenilenmelidir. Kütüphane güncellendiğinde key'ler değişebilir.

Kütüphane Cache Şablonu

Her DS kütüphanesi .claude/libraries/.md dosyasında şu bölümleri içermeli:

### Text Style Key Cache (importStyleByKeyAsync ile kullan)
| Style Adı | Font | Size | Key |
|-----------|------|------|-----|
| heading/h1 | Bold | 32 | `abc123...` |
| body/regular | Regular | 14 | `def456...` |

### Effect Style Key Cache
| Style Adı | Key |
|-----------|-----|
| shadow/card | `ghi789...` |

### Sık Kullanılan Variable Key Cache
**Renkler:**
| Variable | Key |
|----------|-----|
| bg/primary | `jkl012...` |

**Boyutlar:**
| Variable | Key |
|----------|-----|
| spacing/md | `mno345...` |

### Sık Kullanılan Component Key Cache
| Bileşen | Key | Override Notları |
|---------|-----|------------------|
| Button | `pqr678...` | `Label#id` → TEXT property |
| Input | `stu901...` | Label → nested text (findOne) |

Cache oluşturma: İlk ekran oluşturmada figma_get_styles, figma_get_variables(summary) ve componentProperties ile key'leri topla, .claude/libraries/.md'ye yaz. Sonraki oturumlarda direkt cache'den oku.

3a: Bileşen keşfi

Tercih: önce mevcut ekranları incele. Dosyada aynı DS'yi kullanan ekranlar varsa, figma_execute ile mevcut instance'ları tara:

const frame = figma.currentPage.findOne(n => n.name === "Mevcut Ekran");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Mevcut ekran yoksa figma_search_components ve figma_get_design_system_summary kullan. Geniş ara — birden fazla terim dene:

figma_search_components(query="button", currentPageOnly=false)
figma_search_components(query="input", currentPageOnly=false)
figma_search_components(query="card", currentPageOnly=false)

3b: Variable keşfi

figma_get_variables(verbosity="summary")

Renk, spacing, radius token'larını not al. Gerekirse verbosity="full" ile detay al.

3c: Stil keşfi

figma_get_styles()

Text style ve effect style'ları not al.

3d: DS Variable Key'lerini Hazırla (ZORUNLU)

Ekran oluşturmadan önce kullanılacak tüm DS token'larının variable key'lerini topla. Bu adım atlanamaz.

1. Kütüphane dosyasını oku: .claude/libraries/ dizinindeki kütüphane dosyasından font ailesi, variable collection ve text style bilgilerini al.
2. HEDEF dosyada variable key'lerini çek (DS dosyasına bağlanmak GEREKMEZ):

`` figma_get_library_variables({ libraryName: "❖ SUI" }) ` Veya figma_execute ile: ``js // HEDEF dosyada çalıştır — DS dosyası değil! var cols = await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync(); var target = cols.filter(function(c) { return c.libraryName === "❖ SUI"; }); var results = []; for (var ci = 0; ci { const right = c.x + c.width; if (right > maxX) maxX = right; });

// DS'den arka plan ve spacing variable'larını import et const bgVar = await figma.variables.importVariableByKeyAsync("SURFACEBGKEY"); const paddingVar = await figma.variables.importVariableByKeyAsync("SPACING_KEY");

const frame = figma.createFrame(); frame.name = "Ekran Adı"; frame.x = maxX + 100; frame.y = 0; frame.resize(1440, 900); // Masaüstü varsayılan; mobil için 390x844 frame.layoutMode = "VERTICAL"; frame.primaryAxisSizingMode = "AUTO"; frame.counterAxisSizingMode = "FIXED";

// Arka plan rengini DS variable'ına BAĞLA (hardcoded renk YAZMA) const fills = [{type: "SOLID", color: {r:1,g:1,b:1}}]; // geçici const boundFill = figma.variables.setBoundVariableForPaint(fills[0], "color", bgVar); frame.fills = [boundFill];

// Padding'i DS variable'ına BAĞLA frame.setBoundVariable("paddingLeft", paddingVar); frame.setBoundVariable("paddingRight", paddingVar); frame.setBoundVariable("paddingTop", paddingVar); frame.setBoundVariable("paddingBottom", paddingVar);

return { frameId: frame.id, position: { x: frame.x, y: frame.y } };

### Step 5: Bölüm Bölüm İnşa Et

**Her bölümü ayrı bir `figma_execute` çağrısında oluştur.** Tek çağrıda tüm ekranı oluşturmaya ÇALIŞMA.

Sıra: Üstten alta — Header → Hero → Content → Footer

Her bölüm için:

1. `figma_execute` ile bölüm frame'ini oluştur, DS bileşen instance'larını yerleştir
2. **Tüm renkleri `setBoundVariableForPaint` ile DS variable'ına bağla** — hardcoded renk kullanma
3. **Tüm spacing/padding/radius değerlerini `setBoundVariable` ile bağla** — hardcoded sayı kullanma
4. **Metin node'larına text style ata:** `setTextStyleIdAsync` ile DS text style'ını uygula — hardcoded fontSize/fontName kullanma
5. Oluşturulan node ID'lerini return et
6. `figma_capture_screenshot` ile görsel doğrulama — boundVariables bağlı mı kontrol et

**Metin oluşturma kalıbı (DS'e bağlı):**

```js
await figma.loadFontAsync({ family: "DS_FONT", style: "Regular" });
const textColorVar = await figma.variables.importVariableByKeyAsync("TEXT_COLOR_KEY");

const text = figma.createText();
text.characters = "Metin içeriği";

// Text style uygula (fontSize, fontName, lineHeight hep style'dan gelir)
await text.setTextStyleIdAsync("TEXT_STYLE_ID");

// Metin rengini DS variable'ına bağla
const textFills = [...text.fills];
const boundTextFill = figma.variables.setBoundVariableForPaint(textFills[0], "color", textColorVar);
text.fills = [boundTextFill];

Loading State Karar Ağacı:

Dinamik içerik barındıran her öğe için uygun loading pattern'ını belirle:

| Beklenen Yüklenme Süresi | Loading Pattern | Kullanım | |--------------------------|----------------|----------| | 10 saniye | Progress bar | Dosya yükleme, toplu işlem |

Skeleton türleri:

• Metin bloğu → skeleton-text (tam genişlik × 16px, 2-3 satır)
• Başlık → skeleton-title (200px × 24px)
• Avatar/ikon → skeleton-circle (pulse animasyonlu daire)
• Kart → skeleton-card (başlık + 2 satır metin + görsel alanı)
• Tablo/liste → skeleton-row (satır bazlı tekrarlayan skeleton)

Instance oluşturma kalıbı:

// figma_instantiate_component aracını kullan veya figma_execute içinde:
const component = figma.root.findOne(
  n => n.type === "COMPONENT" && n.name === "Button"
);
const instance = component.createInstance();
parentFrame.appendChild(instance);
// FILL boyutlandırmayı appendChild'DAN SONRA ayarla
instance.layoutSizingHorizontal = "FILL";

Tercihen figma_instantiate_component aracını kullan — daha güvenli ve basit.

Step 5.1: Gestalt İlkeleri ile Spacing Kararları (ZORUNLU)

Tek bir itemSpacing ile tüm bölümü dizme — YANLIŞ. Spacing kararlarında tüm tasarım ilkelerini sentezle:

Gestalt Proximity: İlişkili öğeler yakın, ilişkisiz öğeler uzak.

Card içi mantıksal gruplar (nested frame ile):
├── Header Group (title + subtitle) → iç gap: küçük (sp-050 ~ sp-100)
├── Form Group (inputs + checkbox) → iç gap: küçük-orta (sp-100 ~ sp-150)
├── Action Group (button + register link) → iç gap: küçük (sp-100 ~ sp-150)
├── Social Group (divider + social buttons + legal) → iç gap: küçük-orta (sp-150)
└── Gruplar arası gap: BÜYÜK (sp-300 ~ sp-400)

Similarity: Aynı işlevi gören öğeler aynı text style, renk ve boyutta olmalı. Hierarchy: Büyük/bold = önemli (başlık, CTA), küçük/light = ikincil (legal text, açıklama). Contrast: CTA butonu ve önemli öğeler arka plandan ayrışmalı. Alignment: Tutarlı hizalama ile düzen hissi — tüm child'lar layoutSizingHorizontal="FILL" (appendChild SONRA). White Space: Nefes aldıran boşluklar — ne çok sıkışık ne çok dağınık.

Step 5.15: DS Bileşen Kullanım Kuralı (ZORUNLU)

Önce DS'te o işlevi karşılayan bileşen variant'ını ara. DS'te varsa bileşeni kullan, yoksa raw node oluştur.

| İhtiyaç | YANLIŞ (raw node) | DOĞRU (DS bileşen) | |---------|-------------------|---------------------| | Link text | Text node + Text/link rengi | Button(Type=Link) instance | | İkon göstermek | Rectangle + SVG path | İkon component instance | | Ayırıcı çizgi | Rectangle 1px yükseklik | Divider component instance | | Placeholder input | Text node + gri renk | Input component doğru variant | | Toggle | Checkbox + custom logic | Switch component instance |

Kural: Ekrana koyacağın her UI öğesi için şu soruyu sor: "DS'te bu işlevi karşılayan bileşen var mı?"

• Evet → DS bileşenini kullan, variant/prop

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: atezer
• Source: atezer/FMCP
• License: MIT
• Homepage: https://www.npmjs.com/package/@atezer/figma-mcp-bridge

Install and usage instructions live in the source repository linked above.