Yeni Kullanıcı Karşılama Ekranı Tasarımı

Sen Figma AI aracısın. Aşağıdaki talimata göre mobil uygulama için bir hoş geldin ekranı (onboarding welcome screen) tasarla ve her bileşeni Figma'nın auto-layout kurallarına göre yapılandır. UYGULAMA BİLGİLERİ: Uygulama adı: [UYGULAMA ADI] Hedef platform: [IOS / ANDROID / HER İKİSİ] Marka ana rengi: [ANA RENK HEX] Marka ikincil rengi: [IKINCIL RENK HEX] Tipografi stili: [MODERN / KLASIK / PLAYFUL] Hedef kitle: [HEDEF KITLE] EKRAN YAPISI — aşağıdaki katman sırasına göre oluştur: 1. FRAME - Frame adı: "Welcome Screen - [UYGULAMA ADI]" - Boyut: iPhone 14 Pro (393x852px) ve Android (360x800px) için ayrı frame oluştur - Arka plan: [ANA RENK HEX] %8 opaklıkta gradient veya düz beyaz 2. HERO GÖRSEL ALANI (üst %45) - Yüksek kaliteli bir illustrasyon placeholder (image fill) ekle - Köşe yarıçapı: 24px - Margin: 24px yatay, 48px üst - Figma AI komutu: "Generate a warm, welcoming hero illustration for [UYGULAMA ADI] app, [HEDEF KITLE] audience, [TIPOGRAFI STILI] style" 3. METİN BLOĞU (orta %30) - Başlık: "Hoş Geldin, [KULLANICI ADI]!" Font weight: Bold, Boyut: 28px, Renk: #1A1A2E - Alt başlık (hoş geldin e-postasıyla aynı mesajı yansıt): "[KARSILAMA MESAJI]" Font weight: Regular, Boyut: 16px, Renk: #6B7280, Line height: 24px - Metin bloğu hizalaması: Center - Auto-layout: Vertical, Gap: 12px, Padding: 0 32px 4. ÖZELLİK NOKTALARI (opsiyonel, 3 madde) - Her madde için: ikon (16px) + kısa metin (14px) kombinasyonu - Layout: Horizontal auto-layout, Gap: 8px - 3 maddeyi dikey olarak listele, Gap: 16px - Figma AI komutu: "Generate 3 feature highlight rows with icons for [UYGULAMA ADI], matching [ANA RENK HEX] brand color" 5. CTA BUTON ALANI (alt %25) - Birincil buton: "Hemen Başla" Renk: [ANA RENK HEX], Metin: Beyaz, Height: 56px, Corner radius: 16px, Full width (margin: 24px yatay) - İkincil bağlantı: "Zaten hesabım var, giriş yap" Renk: [ANA RENK HEX], Underline, Font size: 14px - Butonlar arası gap: 16px - Alt güvenlik notu: "Kredi kartı gerekmez · İstediğin zaman iptal et" (12px, #9CA3AF) 6. COMPONENT AYARLARI - Tüm metin katmanlarını "Text Style" olarak kaydet - Butonları "Button/Primary" ve "Button/Ghost" component olarak tanımla - Renkleri "Color Style" olarak Figma kütüphanesine ekle - Her bileşene açıklayıcı layer adı ver (İngilizce, kebab-case) 7. PROTOTIP AKIŞI - "Hemen Başla" butonuna tıklandığında → Ana ekrana (Home) yönlendir - Transition: Smart Animate, Easing: Ease Out, Duration: 300ms - "Giriş yap" bağlantısına tıklandığında → Login ekranına yönlendir 8. DEVELOPER HANDOFF NOTLARI - Her bileşen için inspect panelinde spacing token değerlerini göster - Renk değerlerini HEX ve RGB formatında belirt - Export ayarı: PNG @2x ve @3x, SVG ikonlar için KALİTE KONTROLÜ: Tasarımı tamamladıktan sonra şunları kontrol et: - Kontrast oranı WCAG AA standardını karşılıyor mu? (metin/arka plan) - Tüm dokunma hedefleri minimum 44x44px boyutunda mı? - Auto-layout kırılıyor mu? Farklı içerik uzunluklarında test et. - Hoş geldin e-postasındaki marka sesi ve görsel kimlikle tutarlı mı?