Figma Prototype Flow — Ekranlar Arası Navigasyon ve Animasyon

Otonom çalışma ilkesi (v1.9.9+): Bu skill varsayılan olarak otonom çalışır. Screen envanteri, button text heuristic'i, animasyon eşleme ve bağlantı oluşturma kullanıcı onayı gerektirmeden yürütülür. Kullanıcıya yalnızca kritik dallanma noktalarında sorulur: (1) heuristic hedef çözümleyemediğinde, (2) 50+ bağlantı tespit edildiğinde, (3) orphan/circular overlay bulunduğunda, (4) autonomy_mode=Onaylı seçildiğinde her adımda.

Overview

Bu skill, Figma sayfasındaki ekranlar (FRAME'ler) arasında prototip bağlantıları, animasyonlar ve flow starting point'i otomatik oluşturur. Figma Prototype panel'inin tüm özellikleri (9 trigger, 8 action, 9 transition tipi × 4 yön, 11 easing, scroll behavior, overlay ayarları) desteklenir.

Temel ilke: Kullanıcının ekranlarını tarar, button/link text'lerinden niyeti çıkarır, navigasyon haritasını üretir ve setReactionsAsync ile Figma reactions API'sini çağırır. Her şey plugin context'inde çalışır, REST API gerekmez.

Skill Boundaries

• Bu skill: prototip bağlantı + animasyon + flow starting point + scroll behavior
• Ekran üretimi → generate-figma-screen
• Code Connect eşlemesi → code-design-mapper
• A11y focus order → figma-a11y-audit
• Handoff diagram → ai-handoff-export

Prerequisites

• F-MCP Bridge plugin bağlı (figma_get_status yeşil dönmeli)
• Hedef sayfada en az 2 FRAME
• Ekranlar içinde Button/Link instance'ları isimlendirilmiş olmalı (navigasyon haritası için — isimlendirilmemiş jenerik Rectangle'lar yakalanmaz)

F-MCP skill koordinasyonu

• Önce: generate-figma-screen veya fmcp-screen-recipes ile ekranlar üretilmiş olmalı
• Birlikte: figma-canvas-ops (her figma_execute öncesi zorunlu)
• Sonra: figma-a11y-audit (focus sırası cross-check), ai-handoff-export (flow diagram)

Required Workflow

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

Step 0: Ön koşullar ve Otonom Mod Ayarı

1. figma_get_status() → plugin bağlı mı?
2. .claude/design-systems/active-ds.md kontrolü (DS context bilgisi için)
3. autonomy_mode girdisini oku:
   - "Otonom" → varsayılan, kritik dallanmalarda sor
   - "Onaylı" → her Step sonunda kullanıcıya özet + AskUserQuestion

Step 1: Screen Envanteri

// Plan A: figma_get_file_data(depth=1) ile üst seviye FRAME listesi
const data = await figma_get_file_data({ depth: 1, verbosity: "standard" });
// Plan B (daha zengin): figma_execute ile page.children filtrele
// return figma.currentPage.children.filter(c => c.type === "FRAME").map(f => ({ id: f.id, name: f.name, width: f.width, height: f.height }));

Çıktı tablosu:

Rol tahmini regex'leri (case-insensitive):

• Login: /^(login|giriş|sign ?in)/i
• Home / Dashboard: /^(home|anasayfa|dashboard|main)/i
• Register: /^(register|kayıt|sign ?up)/i
• ForgotPassword: /^(forgot|şifre)/i
• Check Email: /^(check email|e-posta kontrol|onay)/i
• Settings / Profile: /^(settings|ayarlar|profile|profil)/i
• Onboarding: /^(onboard|welcome|hoşgeldin)/i

Eşleşme yoksa rol = Generic; heuristic'te kullanıcıya sorulur.

Step 2: Navigasyon Haritası (Heuristic-Based)

2a. Etkileşimli eleman tespiti

Her frame içinde:

frame.findAll(n =>
  (n.type === "INSTANCE" && /button|btn|cta|link|action/i.test((n.mainComponent?.name || n.name))) ||
  (n.type === "TEXT" && n.parent?.type !== "TEXT" && /^(Giriş|Kayıt|Şifre|Devam|Geri|İptal|Tamam|Login|Sign|Back|Cancel|Submit|Continue)/i.test(n.characters || "")) ||
  (n.type === "FRAME" && /clickable|hotspot|tappable/i.test(n.name))
)

Button text'i: button.findOne(t => t.type === "TEXT")?.characters ile okunur.

2b. Button text → hedef heuristic tablosu (TR + EN)

2c. Frame adı çözümleme

Heuristic'teki "Muhtemel hedef rol" → sayfadaki frame adıyla eşle:

• Regex: home → /home|dashboard|anasayfa|main/i
• TR↔EN yaklaşıklığı: home ≈ anasayfa, register ≈ kayıt, success ≈ onay

Eşleşme yoksa → destination: "?" → kullanıcıya sor (kritik dallanma).

2d. Otonom mod davranışı

• autonomy_mode=Otonom (varsayılan): Heuristic %100 eşleşen bağlantılar otomatik uygulanır. Sadece destination: "?" olan satırlar için AskUserQuestion.
• autonomy_mode=Onaylı: Tüm harita markdown tablo olarak AskUserQuestion ile sunulur, kullanıcı satır-bazlı onaylar.

Çıktı formatı (her iki modda gösterilir):

| # | Kaynak | Button | → Hedef | Action | Transition | Mod |
|---|--------|--------|---------|--------|------------|-----|
| 1 | Login  | "Giriş Yap" | Home     | NAVIGATE | SLIDE_IN/RIGHT | auto |
| 2 | Login  | "Kayıt Ol"  | Register | NAVIGATE | SLIDE_IN/RIGHT | auto |
| 3 | Login  | "Devam"     | ?        | ?        | ?              | ask  |

Step 3: Reactions Oluştur (Chunking Kuralı)

3a. Ölçek tespiti

3b. Animasyon standartları (FUTURE.md:232-241)

3c. Her bağlantı için tool çağrısı

await figma_create_prototype_connection({
  sourceNodeId: button.id,
  destinationNodeId: homeFrame.id,
  trigger: "ON_CLICK",
  action: "NAVIGATE",
  transitionType: "SLIDE_IN",
  direction: "RIGHT",
  duration: 300,
  easing: "EASE_OUT"
});

Çoklu trigger: Aynı node'a birden fazla reaction gerekiyorsa (hover + click aynı button'da), default replace: false sayesinde append edilir.

Step 4: Flow Starting Point

// autonomy_mode=Otonom: starting_screen="auto" ise ilk Login/Onboarding/Home tipi frame seçilir
const start = startingScreen === "auto"
  ? screens.find(s => ["Login","Onboarding","Home"].includes(s.role)) || screens[0]
  : screens.find(s => s.id === startingScreen);

await figma_set_flow_starting_point({
  nodeId: start.id,
  name: flowName,
  description: `Auto-generated by figma-prototype-flow skill on ${new Date().toISOString()}`
});

Step 5: Scroll Behavior (Opsiyonel)

Sayfada scroll gereken ekranlar varsa (uzun content, header'ı sticky yapılacak element):

// Ana frame vertical scroll
await figma_set_scroll_behavior({ nodeId: frame.id, overflowDirection: "VERTICAL" });
// Header sticky
await figma_set_scroll_behavior({ nodeId: header.id, scrollBehavior: "FIXED" });

Otonom modda: frame height > viewport height ise otomatik overflowDirection: "VERTICAL" öner.

Step 6: Validasyon

const audit = await figma_get_prototype_connections({ pageScope: true });

Kontroller:

• Haritadaki her kaynağın audit.connections[] içinde en az 1 reaction'ı var mı?
• Tüm destinationId'ler hâlâ çözülüyor mu? (silinen frame → orphan)
• audit.flowStartingPoints doldu mu?
• Circular overlay var mı? — OVERLAY graph DFS, A→B→A kontrolü

Orphan veya circular bulunursa → kritik dallanma, kullanıcıya rapor.

Step 7: Dokümantasyon

• figma_capture_screenshot({ nodeId: pageRoot, scale: 1 }) ile flow overview
• JSON özet → ai-handoff-export ile uyumlu şekilde prototypeFlow anahtarı altında
• Mermaid graph TD diagram (handoff entegrasyonu için)

Final Türkçe rapor:

✅ Flow "Login Akışı" oluşturuldu
   - 12 bağlantı (11 auto, 1 manual)
   - Flow starting point: Login / Mobile
   - Orphan reaction: 0
   - Circular overlay: 0
   - Screenshot: ~/.fmcp/screenshots/<timestamp>-<nodeId>.png

Türkçe Karakter Kuralı (ZORUNLU)

Tüm çıktılarda Türkçe karakterler (ş, ç, ğ, ö, ü, ı, İ) doğru kullanılmalı. Her Write sonrası bozuk encoding kontrolü:

grep -P "[ÃÄ]" <dosya>

Hata Yonetimi

Çıktı Formatı

Her oturum sonunda kullanıcıya:

• Toplam bağlantı sayısı (auto + manual ayrımı)
• Flow starting point: ad + node id
• Validasyon raporu: orphan reactions, circular overlays, eksik bağlantılar
• Screenshot path: flow overview
• Animasyon kullanım özeti: kaç SLIDE_IN, kaç DISSOLVE, kaç SMART_ANIMATE

Evolution Triggers

• Figma Plugin API yeni Transition tipi eklerse → transitionType enum'a ekle
• SET_VARIABLE / CONDITIONAL action v2'de desteklenecek → ayrı tool adı önerisi: figma_create_prototype_variable_action (gelecek sürüm, henüz YOK)
• ON_KEY_DOWN gamepad desteği gerekirse → device enum zaten mevcut (XBOX_ONE/PS4/SWITCH_PRO)
• batch modu eklenirse → 100+ bağlantı için performans iyileşir (şu an her çağrı tek reaction = N roundtrip)
• Smart Animate için otomatik child matching heuristics → kullanıcı matchLayers seçmek zorunda kalmaz
• Overlay preset konumlar (centered/top/bottom) — şu an sadece manual overlayRelativePosition