[Aior]

Ç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?