Handoff רע = פרויקטים מתעכבים בשבועות. Handoff נכון = engineers שאוהבים את העיצוב. הנה איך.

הבעיה הכי נפוצה

Designer מסיים design ומכריז ‘הכל שם ב-Figma’.

Engineer פותח – חסרים spacing, states, animations, edge cases.

שבועיים של שאלות, changes, frustration.

Design System Foundation

לפני שmatchings design ל-engineer – שיהיה design system.

Colors: tokens ({{primary}}, {{surface}} וכו’).

Typography: scale מוגדר (h1, h2, body, caption).

Spacing: 4px/8px grid.

Components: buttons, inputs, cards – shared library.

Engineer מיישם design system פעם אחת. אח”כ כל screen – מהיר.

Figma Best Practices

Auto layout: EVERY frame. Flexbox in Figma.

Components: לא sections copied. Real components with variants.

Constraints: define what happens when parent resizes.

Named layers: not ‘Rectangle 12’. Semantic names.

States לכל אינטראקציה

Buttons: default, hover, focus, active, disabled, loading.

Inputs: empty, filled, focused, error, disabled.

Cards: default, hover, selected.

Screens: loading, empty, error.

אם אלה חסרים – engineer יעשה את זה לבד. Result: inconsistent.

Edge Cases

Long text: מה קורה אם השם 100 characters? Truncation? Wrap?

Empty state: אין data? Skeleton loading? Illustration?

Error state: 500 server error? What screen?

Slow connection: 5 second load?

Design them all upfront.

Micro-interactions

Animations: not vague ‘smooth transition’. Specific: 200ms ease-out.

Loading indicators: specific spinner? Progress bar? Skeleton?

Feedback: what happens after click? Toast? Modal? Redirect?

Reference to real examples: ‘like Notion’s checkbox animation’.

Handoff Meeting

Walkthrough: designer + engineer + PM go through every screen.

Q&A: engineer asks ‘what happens when X’.

Missing pieces documented on the spot.

1-2 hours. Prevents 20 hours of back-and-forth.

Living Documentation

Screens change during development. Design stays updated.

Version control: not ‘final_v3_FINAL.fig’. Named versions.

Change log: what changed and why.

Tools

Figma: standard. Dev Mode built-in.

Zeplin: alternative. Better dev focus.

Storybook: engineer’s design system documentation.

Chromatic: visual regression testing.

Continuous Collaboration

Not one-time handoff.

Weekly design + dev sync. 30 minutes.

Slack channel dedicated. Designer answers questions daily.

Design review of implemented screens. Feedback loop.

מבוסס על פרויקטים אמיתיים

המדריך הזה מבוסס על עבודה עם:

• Podd
• ProperFlow

קריאה נוספת

אם המדריך הזה עזר לכם, אולי תרצו לקרוא גם על עיצוב UX/UI – המדריך המקיף שלנו לתחום.