Çoğu tasarım niyetinin kaybolduğu yer hand-off'tur
Tasarımcı Figma dosyası gönderir. Geliştirici inşa eder. Üç ay sonra canlı ürün tasarlananın ~%80'idir, kalan %20 ince ama birikimli yanlış hizalanmadır.Tasarım token'ları — gerçek hand-off
- Figma'da değişken olarak tanımlanan renkler, boşluk, tipografi, radii.
- Tokens Studio ile export.
- Style Dictionary CSS/JS/native stillere dönüştürür.
- Kod token'ları tüketir, sabit kodlanmış değerleri değil.
Bileşen kütüphane paritesi
- Figma bileşenleri kod bileşenlerine 1:1 eşlenir.
- Aynı adlar, varyantlar, prop yapısı.
- Figma bileşeninden Storybook girişlerine link.
- Uyumsuzluk belgelenir ve takip edilir.
Hand-off dosyası
- Özellik / akışa göre düzenlenmiş sayfalar.
- Tüm artboardlar etiketli.
- Kapsanan durumlar (varsayılan, hover, focus, active, disabled, error, loading).
- Tasarlanmış boş durumlar.
- Veri varyasyonları (uzun isimler, eksik veri, sınır durumlar).
- Belirgin olmayan davranışta annotations.
- Kullanılan bileşenler (ayrılmış katmanlar değil).
- Responsive bileşenler için auto-layout.
Comp'ta olmayan spec'ler
- Animasyon / hareket — yön, süre, easing.
- Etkileşim — click, hover, drag, swipe'ta ne olur.
- Doğrulama — hata ne zaman gösterilir, mesaj nedir.
- API davranışı — ne async yüklenir, ne bloklar.
- Sınır durumlar — uzun stringler, boş diziler, hata yanıtları.
- Erişilebilirlik — klavye gezinme, ekran okuyucu, ARIA etiketleri.
Belge değil, konuşma
- Async: tasarımcı dosyayı annotations ile gönderir.
- Sync: 30 dk walkthrough, tasarımcı + mühendis + PM.
- Async: mühendis planlar, follow-up sorar.
- Sync: implementasyona tasarım QA.
- Async: düzeltmeler, iyileştirme.
Tasarım QA — inşa sonrası inceleme
- Lansman öncesi tasarım incelemesi.
- Yan yana karşılaştırma: comp vs inşa edilen.
- Tasarımcı uyuşmazlıkları işaretler.
- Triyaj: must-fix, should-fix, accept-as-built.
- Belgelenmiş güncellemeler.
Yardımcı eklentiler
- Tokens Studio — token export.
- Storybook entegrasyonu — Figma bileşenlerini Storybook hikâyelerine bağlar.
- Specify — tasarım sistemi varlık dağıtımı.
Mühendislik ekipleri için
- "X olursa ne olmalı" sorun, varsaymayın.
- "Doğru hissediyor" diye UX dokunuşları eklemeyin — işaretleyin ve sorun.
- Piksel itme sistemden daha az önemlidir.
- Implementasyon karmaşıklığını erken yüzeye çıkarın.
Tasarım ekipleri için
- Neyin pahalı/ucuz olduğunu yaklaşık olarak anlayın.
- "Sadece küçük bir değişiklik" tahmini iki tarafta da yanlıştır.
- Tasarım sistemi temel olduğunda iterasyon daha hızlıdır.
- Özel bileşenlerin süregelen bakım maliyeti vardır.
Uyaracağımız bir desen
"Detayları kodda çözeriz." Detaylar — focus, loading, sınır durumlar — front-end işinin %30'u.Her zaman karşılığını veren bir desen
Haftalık tasarım/mühendislik inceleme toplantısı. 30 dakika.Hand-off süreciniz nedir?
The handoff is where most design intent is lost
The designer ships a Figma file. The developer builds. Three months later the live product is ~80 % of what was designed, with the remaining 20 % being subtle but cumulative misalignment.Design tokens — the actual handoff
- Colours, spacing, typography, radii defined in Figma as variables.
- Tokens exported via Tokens Studio.
- Style Dictionary transforms to CSS/JS/native styles.
- Code consumes tokens, not hard-coded values.
Component library parity
- Figma components map to code components 1:1.
- Same names, variants, prop structure.
- Storybook entries linked from Figma component.
- Mismatch documented and tracked.
The hand-off file
- Pages organised by feature / flow.
- All artboards labelled.
- States covered (default, hover, focus, active, disabled, error, loading).
- Empty states designed.
- Data variations (long names, missing data, edge cases).
- Annotations on non-obvious behaviour.
- Components used (not detached layers).
- Auto-layout for responsive components.
Specs that aren't in the comp
- Animation / motion — direction, duration, easing.
- Interaction — what happens on click, hover, drag, swipe.
- Validation — when does error show, what's the message.
- API behaviour — what's loaded async, what blocks.
- Edge cases — long strings, empty arrays, error responses.
- Accessibility — keyboard nav, screen reader, ARIA.
The conversation, not the document
- Async: designer ships file with annotations.
- Sync: 30-min walkthrough, designer + engineer + PM.
- Async: engineer plans, asks follow-up.
- Sync: design QA on implementation.
- Async: fixes, refinement.
Design QA — post-build review
- Pre-launch design review.
- Side-by-side: comp vs built.
- Designer flags discrepancies.
- Triage: must-fix, should-fix, accept-as-built.
- Documented updates.
Plugins that help
- Tokens Studio — token export.
- Storybook integration — links Figma components to stories.
- Specify — design system asset distribution.
For engineering teams
- Ask "what should happen if X" before assuming.
- Don't add unstated UX touches because they "feel right" — flag and ask.
- Pixel-pushing matters less than the system.
- Surface implementation complexity early.
For design teams
- Understand approximately what's expensive vs cheap.
- "Just a small change" is usually wrong on both sides.
- Engineering iteration is faster when the design system is the foundation.
- Custom components have ongoing maintenance cost.
One pattern we'd warn about
"We'll just figure it out in code." Details — focus, loading, edge cases — are 30 % of front-end work.One pattern that always pays off
Weekly design/engineering review meeting. 30 minutes.What's your handoff process?
