מפיגמה לאפליקציה: המרת עיצוב UI לקוד React Native

המרת עיצוב אפליקציה — זה לא כמו Web

כשמעצב מסיים עיצוב אפליקציה בפיגמה, הוא רואה מסכים מושלמים — ניווט חלק, bottom sheets אלגנטיים, אנימציות swipe ו-pull-to-refresh שנראות בדיוק כמו באפליקציות של Apple ו-Google. אבל התרגום מעיצוב סטטי לקוד React Native שמרגיש native הוא עולם שלם של אתגרים שלא קיימים ב-Web.

במאמר הזה נפרט את האתגרים הייחודיים של המרת עיצוב מובייל מפיגמה לקוד, ונראה איך לגשר עליהם בצורה מקצועית.

אתגר 1: ניווט — לא רק קישורים

ב-Web, ניווט הוא פשוט: קישור מוביל לדף אחר. באפליקציה מובייל, ניווט הוא חוויה — stack navigation עם אנימציית slide, tab bar עם אנימציות מעבר, drawer menu עם gesture-driven פתיחה, ו-modal sheets שעולים מלמטה.

בפיגמה, המעצב מגדיר מעברים בין מסכים עם Prototype connections. אבל הביצוע ב-React Native דורש בחירות ארכיטקטוניות:

• React Navigation vs. Expo Router: שתי ספריות מובילות עם פילוסופיות שונות. React Navigation נותנת שליטה מלאה, Expo Router מביאה file-based routing כמו Next.js.
• Shared Element Transitions: כשמעצב מגדיר שתמונה "עפה" ממסך רשימה למסך פרטים — זה דורש react-native-shared-element עם תיאום מדויק של layout measurements.
• Deep Linking: כל מסך צריך URL ייחודי שמאפשר navigateion ישיר — הן מ-push notifications והן מקישורים חיצוניים. זה חייב להיות מתוכנן מראש, לא כ-afterthought.

אתגר 2: Gestures — השפה של מובייל

Gestures הם מה שהופך אפליקציה ל-native. בפיגמה, המעצב יכול להגדיר "swipe left to delete" — אבל הביצוע דורש:

• Threshold מדויק: כמה פיקסלים צריך להחליק לפני ש-action מופעל? 30% מהמסך? 100px? ה-threshold משפיע ישירות על התחושה.
• Spring Physics: כשמשחררים את ה-swipe, האלמנט צריך "לקפוץ" חזרה עם spring animation שמרגישה טבעית. ערכי damping ו-stiffness קריטיים.
• Gesture Interception: מה קורה כש-swipe מתנגש עם scroll? כש-pinch-to-zoom קורה בתוך scrollable container? ניהול gesture priorities הוא אתגר ארכיטקטוני.
• Haptic Feedback: רטט עדין שמלווה את ה-gesture — light impact בתחילת swipe, medium כשעוברים threshold, success/error כשה-action מתבצע.

אתגר 3: Safe Areas — הגיאומטריה של מכשירים

כל מכשיר מובייל הוא שונה — notch ב-iPhone, dynamic island ב-iPhone 15+, camera cutout ב-Samsung, home indicator בתחתית. עיצוב שנראה מושלם על iPhone 16 Pro Max ייחתך על iPhone SE או Galaxy S24 Ultra.

בפיגמה, מעצבים בדרך כלל עובדים על frame אחד — 390x844 (iPhone 14). אבל בקוד צריך לטפל ב:

• SafeAreaView: padding אוטומטי שמותאם לכל מכשיר — status bar height, notch size, home indicator area.
• Keyboard Avoidance: כשהמקלדת עולה, תוכן צריך לזוז — אבל לא תמיד. שדות קלט כן, תמונת רקע לא. זה דורש KeyboardAvoidingView מותאם לכל מסך.
• Landscape: מעצבים לעיתים רחוקות מעצבים landscape. אבל משתמשים מסובבים את הטלפון. צריך להחליט — לחסום rotation או לתמוך בה עם layout נפרד.

אתגר 4: אנימציות Native Thread

אנימציות ב-React Native שונות מהותית מ-Web. ב-Web, CSS animations רצות על ה-GPU אוטומטית. ב-React Native, אנימציה רגילה רצה על ה-JS thread — ואם ה-thread עמוס (fetch, parsing, business logic), האנימציה תקרטע.

הפתרון הוא React Native Reanimated שמריץ אנימציות על ה-UI thread באמצעות worklets:

• Shared Values: ערכים שמשותפים בין JS thread ל-UI thread — שינוי ב-shared value מפעיל אנימציה ללא bridge crossing.
• useAnimatedStyle: styles שמחושבים על ה-UI thread — כל שינוי מיידי, בלי שום frame drop.
• withSpring/withTiming: אנימציות spring ו-timing שרצות ב-native — עם ערכים שתואמים בדיוק לעקומות שהמעצב הגדיר בפיגמה.

שיתוף קוד עם Web — איפה הגבול

אחד היתרונות של React Native הוא שיתוף קוד עם Web. אבל צריך להיות חכמים לגבי מה לשתף:

• כן לשתף: hooks, utilities, API clients, validation logic, state management, types/interfaces, business logic.
• לא לשתף: UI components (React Native StyleSheet ≠ CSS), navigation, animations (Reanimated ≠ Framer Motion), gestures, platform-specific APIs.
• אפשר לשתף עם abstraction: design tokens (ממורים ל-StyleSheet ול-CSS), component APIs (interface זהה, implementation שונה), theme definitions.

בפרקטיקה, 40-60% מהקוד משותף. זה חוסך חודשי פיתוח בפרויקט cross-platform.

צ׳קליסט למעצבים: הכנת עיצוב מובייל לפיתוח

1. הגדירו Safe Areas בכל מסך — status bar, notch, home indicator
2. עצבו gestures עם annotations — threshold, direction, feedback
3. הראו navigation transitions — slide, modal, shared element
4. הגדירו keyboard behavior — אילו אלמנטים זזים, אילו לא
5. עצבו states לכל loading, error, empty, offline
6. בדקו את העיצוב על frames בגדלים שונים — SE, standard, Pro Max
7. תעדו אנימציות — duration, easing, trigger, delay

רוצים להפוך את עיצוב האפליקציה שלכם לקוד React Native שמרגיש native? קבעו שיחת ייעוץ חינם ונסקור יחד את קבצי הפיגמה.