Design Handoff: Tasarımı Developer'a Teslim Etme Rehberi

Seviye: Orta Kategori: UX Design Son güncelleme: Ocak 2025

Giriş

"Bu tasarımda eksik şeyler var." "Hover state nerede?" "Bu spacing kaç piksel?" "Mobile'da ne oluyor?"

Tanıdık geldi mi? Kötü handoff'un belirtileri bunlar.

Design handoff, tasarımın geliştirme ekibine teslim edilme süreci. Ama "Figma linkini atıyorum, görüşürüz" demek değil. Eksik teslim = developer frustrasyonu, geri dönüşler, zaman kaybı, hatalı implementasyon.

İyi handoff = sorunsuz geliştirme, tasarıma sadık implementasyon, mutlu takım.

Bu yazıda etkili handoff'un nasıl yapılacağını, nelerin dahil edilmesi gerektiğini ve developer iş birliğini öğreneceksin.

Design Handoff Nedir?

[CALLOUT BOX] Design Handoff: Tamamlanmış tasarımın, developer'ların doğru şekilde implemente edebilmesi için gerekli tüm bilgi, asset ve dokümantasyonla birlikte geliştirme ekibine teslim edilme süreci. [/CALLOUT BOX]

Handoff sadece dosya paylaşımı değil:

Tasarım kararlarının açıklanması
Tüm state ve varyasyonların gösterilmesi
Teknik spec'lerin belirtilmesi
Belirsizliklerin giderilmesi
Sürekli iletişim

Neden Handoff Önemli?

1. Doğru implementasyon

Tasarımın amaçlandığı gibi kodlanması.

2. Zaman tasarrufu

Geri dönüşler, sorular, düzeltmeler azalır.

3. Developer memnuniyeti

Eksik bilgiyle çalışmak frustrasyona yol açar.

4. Kalite

Detaylar atlanmaz, edge case'ler düşünülmüş olur.

5. Takım ilişkisi

İyi iş birliği = güçlü ilişki

**%50+**

Kötü handoff nedeniyle geliştirme süresine eklenen tahmini oran

Handoff Öncesi Checklist

Teslim etmeden önce şunları kontrol et:

Tasarım Kalitesi

✓ Yap:

✗ Yapma:

Organizasyon

✓ Yap:

✗ Yapma:

Dokümantasyon

✓ Yap:

✗ Yapma:

Handoff İçeriği

1. Tüm State'ler

Her interaktif element için:

Element	Gerekli State'ler
Buton	Default, Hover, Active/Pressed, Disabled, Loading
Input	Default, Focus, Filled, Error, Disabled, Read-only
Checkbox/Radio	Unchecked, Checked, Indeterminate, Disabled
Link	Default, Hover, Visited, Active
Card	Default, Hover (tıklanabilirse), Selected
Dropdown	Closed, Open, Option hover, Selected

2. Responsive Varyasyonlar

Minimum:

Mobile (375px - 414px)
Desktop (1440px)

İdeal:

Mobile (375px)
Tablet (768px)
Desktop (1440px)
Large desktop (1920px) - opsiyonel

Breakpoint'lerde ne değişiyor açıkça göster.

3. Interaction ve Animasyon

Belirtilmesi gerekenler:

Trigger: Ne zaman tetikleniyor?
Duration: Ne kadar sürüyor?
Easing: Hareket eğrisi (ease-out, ease-in-out vb.)
Properties: Neler değişiyor? (opacity, transform, color)

Örnek not:

Dropdown açılış:
- Trigger: Click
- Duration: 200ms
- Easing: ease-out
- Animation: opacity 0→1, translateY -8px→0

4. Spacing ve Boyutlar

Figma otomatik gösterir ama kritik spacing'leri vurgula:

Component içi padding
Elementler arası gap
Section spacing
Page margin

5. Typography Spec

Element	Font	Size	Weight	Line Height	Color
H1	Inter	48px	Bold (700)	56px	#111827
H2	Inter	36px	Semibold (600)	44px	#111827
Body	Inter	16px	Regular (400)	24px	#374151
Caption	Inter	12px	Regular (400)	16px	#6B7280

6. Color Tokens

Token	Hex	Kullanım
primary-500	#6366F1	Primary butonlar, linkler
primary-600	#4F46E5	Hover state
neutral-100	#F3F4F6	Arka plan
neutral-900	#111827	Başlık metni
error-500	#EF4444	Hata mesajları
success-500	#10B981	Başarı mesajları

7. Asset'ler

Export edilmesi gerekenler:

İkonlar (SVG)
İllüstrasyonlar (SVG veya PNG)
Fotoğraflar (optimized JPG/WebP)
Logo varyasyonları

Export ayarları:

SVG: Outline strokes, flatten transforms
PNG: 1x, 2x, 3x (mobil için)
JPG: Quality 80-90%, progressive

8. Edge Case'ler

Düşünülmesi gereken durumlar:

Metin:

Çok uzun metin (truncate mı, wrap mı?)
Çok kısa metin
Farklı diller (genişleme)

Veri:

Boş state (hiç veri yok)
Yükleniyor state
Hata state
Çok fazla veri (pagination, infinite scroll)

Kullanıcı:

İlk kullanım
Geri dönen kullanıcı
Yetkisiz erişim

Figma Dev Mode

Figma'nın developer'lar için optimize edilmiş görünümü.

Özellikler

Inspect:

CSS properties
iOS/Android kod snippet'leri
Spacing ve boyutlar
Color values

Code:

Otomatik kod üretimi
CSS, Swift, Kotlin seçenekleri

Compare:

Versiyonlar arası fark görme
Değişen elementleri highlight

Developer İçin Figma Tipleri

Viewer: Sadece bakabilir Dev Mode access: Inspect yapabilir, asset export edebilir

Dev Mode Kullanımı

Figma'da sağ üstten "Dev Mode" toggle
Element seç, sağ panelde specs gör
Kod snippet kopyala
Asset export et

💡

💡 Developer'a sadece "ready for dev" olan sayfaları paylaş. Work-in-progress karışıklık yaratır.

Dokümantasyon Yaklaşımları

In-File Dokümantasyon

Figma dosyası içinde notlar.

Yöntemler:

Sticky notes / Comment
Annotation frames
Cover page ile genel bakış
Flow diyagramları

Avantaj: Her şey tek yerde Dezavantaj: Karmaşıklaşabilir

External Dokümantasyon

Ayrı döküman (Notion, Confluence, Google Docs).

İçerik:

User flow açıklamaları
Business logic
API gereksinimleri
Acceptance criteria

Avantaj: Detaylı açıklama imkanı Dezavantaj: Senkronizasyon sorunu

Hibrit Yaklaşım

Figma'da görsel spec'ler
External doc'ta logic ve flow
İkisini bağla (linkler)

Developer İş Birliği

Handoff Toplantısı

Büyük feature'larda walkthrough yap:

[ADIM LİSTESİ]

Genel bakış (5 dk) Feature amacı, kullanıcı değeri
Flow walkthrough (10-15 dk) Baştan sona kullanıcı akışı
Detaylar (10-15 dk) State'ler, edge case'ler, animasyonlar
Sorular (10 dk) Developer soruları, belirsizlikler
Sonraki adımlar (5 dk) Timeline, communication plan [/ADIM LİSTESİ]

Continuous Collaboration

Handoff tek seferlik değil, sürekli süreç.

Önerilen pratikler:

Developer'ı erken dahil et (tasarım aşamasında)
Küçük parçalar halinde teslim et
Düzenli sync toplantıları
Slack/Teams'te hızlı sorular için kanal
Implementation review yap

Feedback Loop

Developer implementasyonu gördükten sonra:

Tasarıma uygun mu?
Neler farklı?
Teknik kısıtlar var mı?
İyileştirme önerileri?

Naming Convention

Tutarlı isimlendirme, handoff'u kolaylaştırır.

Layer Naming

❌ Kötü: Rectangle 23, Frame 456, Group 12
✅ İyi: btn-primary, card-product, input-email

Page Naming

Cover
—
1. Onboarding
2. Dashboard
3. Profile
—
Components
Tokens
Archive

Frame Naming

Screen/State/Variant formatı:
- Login/Default
- Login/Error
- Login/Loading
- Dashboard/Desktop
- Dashboard/Mobile

Yaygın Sorunlar ve Çözümler

"Hover state yok"

[COMPARISON] ❌ Problem: Sadece default state teslim edilmiş ✅ Çözüm: Her interaktif element için tüm state'leri hazırla [/COMPARISON]

"Mobile'da ne oluyor?"

[COMPARISON] ❌ Problem: Sadece desktop tasarımı var ✅ Çözüm: En az mobile + desktop, breakpoint davranışlarını belirt [/COMPARISON]

"Bu spacing kaç piksel?"

[COMPARISON] ❌ Problem: Tutarsız spacing, ölçüm zor ✅ Çözüm: 8px grid kullan, spacing token'ları tanımla, Auto Layout kullan [/COMPARISON]

"Uzun metin olunca ne olacak?"

[COMPARISON] ❌ Problem: Edge case düşünülmemiş ✅ Çözüm: Uzun/kısa metin varyasyonlarını göster, truncate kurallarını belirt [/COMPARISON]

"Bu renk token'ı hangisi?"

[COMPARISON] ❌ Problem: Hardcoded renkler ✅ Çözüm: Design token'lar tanımla, Figma'da styles kullan [/COMPARISON]

Handoff Araçları

Araç	Özellik
Figma Dev Mode	Native, ücretsiz inspect
Zeplin	Detaylı spec, style guide
Avocode	Multi-platform export
InVision Inspect	InVision entegrasyonu
Storybook	Component dokümantasyonu

Modern yaklaşımda Figma Dev Mode çoğu ihtiyacı karşılıyor.

Handoff Checklist (Son Kontrol)

Teslim öncesi final checklist:

✓ Yap:

✗ Yapma:

20 dakika

✏️

Şimdi Sen Dene

20 dakika

Görev: Mevcut bir Figma tasarımını handoff için hazırla.

Senaryo: Basit bir login formu (email, password, submit button)

Adımlar:

State'leri oluştur (8 dk)
- Input states: default, focus, filled, error
- Button states: default, hover, disabled, loading
- Form states: default, submitting, error
Notlar ekle (5 dk)
- Error mesajı ne zaman görünür?
- Loading animasyonu nasıl?
- Başarılı login sonrası ne olur?
Naming düzenle (3 dk)
- Layer'ları anlamlı isimlendir
- Tutarlı convention kullan
Export kontrol (4 dk)
- Hangi asset'ler export edilmeli?
- Export ayarları doğru mu?

Kontrol soruları:

Developer sadece bu dosyaya bakarak implement edebilir mi?
Eksik bilgi var mı?
Sorulacak soru kalır mı?

📝

Özet

Handoff = tasarımın tüm detaylarıyla developer'a teslimi
Sadece dosya linki değil, tam dokümantasyon
Tüm state'ler gerekli: default, hover, active, disabled, error, loading
Responsive varyasyonlar: minimum mobile + desktop
Interaction/animasyon notları: trigger, duration, easing
Design token'lar: color, typography, spacing
Edge case'ler: uzun metin, boş veri, hata durumları
Figma Dev Mode developer'ların inspect yapmasını sağlar
Naming convention tutarlı olmalı
Handoff tek seferlik değil, continuous collaboration

İlgili İçerikler

Önceki: Usability Metrics ve KPI'lar

Sonraki: Design QA ve Review (yakında)

İlgili konular:

İlgili Roadmap: UX Designer Roadmap → Workflow & Process

Kaynaklar

Derinleşmek istersen:

Figma Dev Mode (Resmi döküman)
Design Handoff - InVision (İngilizce)
Designer-Developer Collaboration - NNGroup (İngilizce)