המרת עיצוב ממיקרו-פיקסל בפיגמה (Figma) ישירות לקוד, תוך ספרינט של שבועיים בלבד
לקוח
דיל-דסק
תעשייה
רכש / תוכנה כשירות (SaaS)
שירותים
המרת פיגמה לפריימר, פיתוח רספונסיבי, SEO ואנימציות
ארסנל טכנולוגי
Framer, Figma, אינטראקציות בהתאמה אישית, SEO
שנה
2026
סטודיו AGR הפך את עיצוב ה-Figma של DealDesk לאתר Framer מושלם עד לרמת הפיקסל תוך שבועיים בלבד, רספונסיבי לחלוטין, עם אינטראקציות מותאמות אישית והתאמה מלאה ל-SEO.
DealDesk היא חברת ייעוץ לרכש המסייעת לארגונים לנהל מו"מ ולהשיג עסקאות טובות יותר על תוכנות ושירותים. החברה השקיעה בעיצוב Figma מקיף עבור האתר החדש שלה, אך הייתה זקוקה לבנייה והשקה מהירות במיוחד. לצוות הפנימי שלהם לא היה את הניסיון הנדרש ב-Framer, והדד-ליין של שבועיים היה בלתי ניתן לשינוי בשל אירוע מרכזי בתעשייה.
האתגר היה ברור: לקחת עיצוב Figma מפורט ומרובה עמודים, ולתרגם אותו לאתר Framer פונקציונלי לחלוטין, רספונסיבי ומותאם ל-SEO, מבלי להתפשר על האיכות או על האינטראקציות. כל מצב מעבר (hover), כל אנימציה וכל נקודת שבירה רספונסיבית היו חייבים להתאים בדיוק לחזון המקורי.
אaudit עיצובי (Design Audit)
עוד לפני שכתבנו שורת קוד אחת, ביצענו אaudit מקיף של קובצי ה-Figma. התהליך הציף מספר הזדמנויות משמעותיות: מרווחים לא עקביים שניתן להפוך למערכתיים, תבניות אינטראקציה שיכלו להפיק תועלת רבה מהיכולות המובנות של Framer, והתאמות רספונסיביות שהעיצוב המקורי לא נתן להן מענה מלא.
הצגנו את הממצאים הללו ל-DealDesk לצד המלצות – לא כדי לשנות את העיצוב, אלא כדי לשדרג ולדייק אותו. במקומות שבהם ה-Figma הציגה מצב Hover סטטי, הצענו מעברים (transitions) חלקים. במקומות שבהם תצוגות המובייל לא היו מוגדרות, עיצבנו פתרונות רספונסיביים ששמרו על קו העיצוב והחוויה של גרסת הדסקטופ.
תרגום נאמן למקור
העיצוב היה נקי ועסקי עם נגיעה חמימה, גוונים של כחול נייבי ושמנת, מרווחים נדיבים וטיפוגרפיה בעלת נוכחות. המשימה שלנו לא הייתה לעצב מחדש, אלא לתרגם את העיצוב בצורה נאמנה תוך הוספת הליטוש הסופי שמגיע רק כשבונים פרויקט בסביבת פיתוח אמיתית.
שמרנו על דיוק מרבי בכל ערכי הצבעים, גודלי הגופנים והמרווחים היישר מקובץ ה-Figma. יחד עם זאת, שדרגנו את החוויה: שילבנו אלמנטים שנחשפים בגלילה באזורים מרכזיים, אפקט פארלקס עדין על תמונת ה-Hero הראשי, ומיקרו-אינטראקציות בכפתורים ובכרטיסיות שמעניקות לאתר תחושה חיה ודינמית.
ביצוע הספרינט
לוח הזמנים הצפוף של שבועיים דרש ביצוע ממושמע ומדויק. פירקנו את תהליך הפיתוח לאבני דרך יומיות: ימים 1-2 עבור אזור ה-Hero והניווט בדף הבית, ימים 3-4 עבור שאר אזורי דף הבית, ימים 5-6 עבור עמוד "איך אנחנו עובדים", ימים 7-8 עבור עמודי "אודות" ו"צור קשר", ימים 9-10 לבדיקות רספונסיביות ו-SEO, ימים 11-12 לסבבי תיקונים, וימים 13-14 לבדיקות QA סופיות והשקה.
עדכוני התקדמות יומיים השאירו את DealDesk מעודכנים ומעורבים לאורך כל הדרך, מבלי לעכב את קצב הפיתוח. הפידבק רוכז לשני סבבי סקירה מסודרים - אחד בנקודת האמצע ואחד לפני הכנות ההשקה הסופיות.
תשתית SEO
למרות לוח הזמנים המאתגר, הטמענו תשתית SEO מקיפה: מבנה HTML סמנטי, אופטימיזציה של תגיות מטא (Meta Tags) לכל עמוד, טקסט אלטרנטיבי (Alt Text) לתמונות, תגיות Open Graph לשיתוף ברשתות החברתיות, ומפת אתר (Sitemap) נקייה. זה העניק ל-DealDesk בסיס חזק ויציב לצמיחה אורגנית מהיום הראשון.
האתר עלה לאוויר ביום ה-14, בדיוק לפי התוכנית. DealDesk השתמשו בו באירוע התעשייה שלהם וזכו לאפקט אדיר, כאשר מספר לקוחות פוטנציאליים ציינו לטובה את הנוכחות הדיגיטלית המקצועית שלהם. האתר הפך לכלי מכירות מרכזי, ולא רק לברושור דיגיטלי.
לאחר ההשקה, האתר לא דרש שום תיקוני באגים או התאמות עיצוביות. התרגום המדויק מ-Figma ותהליך ה-QA היסודי הבטיחו שמה שהושק היה בדיוק מה שאושר.
שבועיים
משלוח
4
עמודים
0
תיקוני באגים לאחר ההשקה
