כמתכנת frontend, ומעצב (לשעבר), הייתה לי הרגשת זלזול תקופה ארוכה לגבי הכלי הזה שנקרא Figma. לא הבנתי בהיגיון איך כלי מבוסס ווב, יכול להתחרות בכלים כמו adobe. אבל עם הזמן הצלחתי לקבל את המציאות והתחלתי לשחק עם Figma ופתאום הבנתי כמה הכלי הזה גאוני ושימושי בעולמות של פיתוח אפליקציות . מעבר ליכולת העיצובית, ישנן ערוצי תקשורת יעילות מאוד, בין הצוותים בארגון, שעובד נהדר. כמו כן הם צמצמו את הGAP בין מעצבים למפתחים שחוסך לארגון שעות יקרות מפז. ועל זה אני רוצה לעבור אתכם.
כמפתחים, אנחנו לא אמורים להתעסק בכלים עיצוביים יותר מידי, אבל זה לא נכון, אנחנו מיישמים את העיצוב ולכן כל ידע נוסף בפאן העיצובי יכול לשמש אותנו הייטב. ואני לא מדבר על ללמוד עכשיו את תפקידו של המעצב על בוריו, אין לזה באמת סיבה, אני מדבר על טכניקות ספציפיות שישדרגו אתכם משמעותית, גם בעובדה עצמה וגם תיראו מאד מקצועיים מול שאר חברי הצוות. אז נתחיל בהיכרות קצרה עם הכלי המדהים הזה Figma.
מה זה Figma
קודם כל חשוב לציין שיש שפע של כלים בשוק, Figma הוא לא היחידי, אבל הוא הפופולארי ביותר ולדעתי גם הטוב ביותר ולכן אני משקיע עליו פוסט שלם (ואולי עוד בהמשך) כי הוא בהחלט שווה את זה.
Figma היא מערכת ליצירת Design System, שמאפשרות לעצב רכיבים ולתייק אותם בספריות שונות. כמו כן שימוש multiplayer שמאפשר עבודה בצוות כגון: מעצבים, מנהלי מוצר ומפתחי frontend. למעשה כל הצוות האחראי על המוצר ברמת הUI. וזה מדהים כמה שזה עובד טוב. כמו כן כלים ייעודיים למפתחי frontend 😎.
מה הכרחי לדעת בעבודה עם Figma
- שימוש כללי – לבחור אלמנטים, ייצוא, ומידע על האובייקטים (שכבות)
- שאלות למעצב
- Dev mode
- פלאגינים
- Figma in VScode
- Ai with Figma
Figma – שימוש כללי
הכי בסיסי זה לדעת לתפוס אחד מהאובייקטים ולראות את הproperties שלו, בשביל כך נתבונן בפאנל שבצד שמאל וכן בפאנל בצד ימין. אבל עוד לפניכן נתחיל עם צד ימין עוד לפני שנבחר אובייקט כלשהו וכן נדליק את הDev mode (בהמשך אפרט יותר על devmode):
תוכלו להגדיר את המאפיינים של unit לפי פיקסלים או לפי rem. כמו כן נוכל להגדיר את השפה (במקרה שלנו זה css).
קודם כל , נצא מ Dev mode. עכשיו נלחץ על הלוגו בתפריט בפינה השמאלית למעלה ונקבל את המאפיינים של אותו אובייקט שתפסנו (בפאנל בימיני):
- שימו לב כן תפסנו את הלוגו, השכבה שלו נקראת logo ובתוכה יש icon ובתוכה יש גם vector. שימו לב שכל שכבה כזו מוגדרת שונה במידות שלה, בחרו את השכבה שתתאים לכם מבחינת הגודל והמיקום שלה, שלא יהיה מצב שתורידו שכבה שלמשל האובייקט לא יהיה ממוקם במרכז ואז יהיה לכם קשה למקם במרכז.
- למשל אם תתפסו את הvector תקבלו מידות אחרות
את המידות , הצבעים ועוד אפשר לראות בפאנל הימני, כמו כן אפשר ללחוץ על export ולהוריד את האובייקט שתפסתם או כפתור ימני על השכבה(אובייקט) ולבחור את הפורמט להורדה.
שימוש נוסף שהוא נפוץ ונותן לכם תמונת מצב טובה זה לחיצה על הכפתור של presets בצד ימין למעלה:
מעצב Figma טוב יתייחס למעברים והתנהגויות ודרך אפשרות זו תוכלו "לשחק" עם העיצוב ולראות התנהגויות וקשרים על ידי שימוש בעכבר וכך תקבלו פרספקטיבה על השימושיות של העיצוב באופן כללי.
שאלות למעצב
ראיתי המון פעמים שמפתחים מקבלים Figma ומשומה שולחים סקרינשוטים ופותחים שאלות עם חתיכות של עיצובים על מנת לשאול את המעצב למה התכוון.. זה סבבה והכל אבל יש דרך יעילה יותר לעשות זאת. פשוט בקומנטים, לחצו כפתור התגובות בתפריט העליון (אייקון של בועת דיבור) בדיוק במקום שהייתם רוצים לשאול עליו, תייגו את המעצב והוא יענה לכם לתגובתכם, הרבה יותר מהיר ואפקטיבי, לשם זה נוצרה המערכת הזו, בשביל לייצר תקשורת בנושא העיצוב. שמרו על הקונבנציה הזו.
Figma Dev mode
פיצ'ר חדש שמאפשר לנו לקבל הרבה נתונים של פיתוח מתוך העיצוב (בפאנל בצד ימין):
- אפשר לראות את הדיאגרמה הקלאסית שמגדירה את המרחקים השונים באלמנט
- קוד CSS שיכול להתאים למימוש האלמנט (במקרה שלנו nav)
- השוואה בין גרסאות של עיצובים- ניתן לעקוב אחרי שינויים בין גרסאות העיצוב
- אפשר לשייך github resources ובכך לסדר איזה קובץ קשור לאיזה עיצוב.
- פלאגינים 🤩
פלאגינים עם Figma dev mode
מגוון של פלאגינים זמינים לכם שישדרגו את האינפוט של Figma ויציאו לכם אינסוף אפשרויות. כמו שאפשר לראות התמונה כאן , פלאגין שמאפשר לכם לייצא קוד מותאם למגוון ספריות וטכנולוגיות שונות.
Figma in VScode
אולי אחד הדברים היותר שימושיים! figma בתוך הvscode שלכם. זה פשוט מדהים. הורידו את התוסף של Figma ל VScode והתחברו לחשבון שלכם ותקבלו את הקדם הבא:
נוח מאד לקבל את כל הנתונים מהעיצוב ישר לתוך הIDE , אפשר בקלות להעתיק מאפיינים ולתקן מבלי לעבור בין התוכנות, אפשר גם להוריד את הassets ישירות לתיקיית היעד ולהגדיר שם ופורמט לasset.
כמו כן ישלים לכם קוד אוטומטי במידה ותרצו לנסות את מה Figma מציעה
Ai with Figma
לא תכננתי להיכנס לשילוב הכוחות שלנו כמפתחים עם יכולות הAI בשלב זה אבל לא מצאתי מקום יותר ראוי לזה כי מדובר בכלי ייעודי (בהמשך פוסטים יותר קונקרטיים על עבודה עם AI) אז אדבר עליו בקצרה. ישנם כלים חיצוניים מבוססי AI שהן יחסית טובים. ועם מעט סבלנות, בשביל ליישם את הכלי הזה נכון, תוכלו לקבל קוד ברמה גבוהה תוך דקות. התוסף נקרא locofy.ai חפשו אותו דרך הפלאגינים של Figma ומשם התהליך זורם. אני עוד לא למדתי אותו מספיק בשביל לייצר משהו ראוי לשים פה איזו דוגמה שווה אבל בהמשך אתן פוסט נפרד בנושא, כי יש הרבה מה להסביר ופחות מתאים לנושא של הפוסט הספציפי. 😐
אפשר לראות שהוא לא הצליח להטמיע את הוידאו, אבל רשם לא מעט קוד שכן ניתן לעשות בו שימוש ולחסוך זמן רב.
לסיכום – מתכנת frontend ו Figma
חשוב מאד לזכור שFigma הוא אינו כלי של מעצבים בלבד, הוא כלי שנועד לייעל תהלכי עובדה בעולמות של UI ואתם כמפתחי frontend חלק אינטגרלי מכך ומכוון שרוב השוק עובד עם הכלי הזה אז יש לו חשיבות גבוהה עבורכם. נצלו את הייתרון הזה ולמדו לעבוד עם Figma וכמו כן הכלים האלה משתפרים עם הזמן וככל שתתנסו יותר עכשיו יהיה לכם יותר קל בהמשך. בנוסף חשוב לציין שדיברתי על הדברים המרכזיים החשובים, יש אפשרויות רבות ורזולוציות עמוקות יותר של טכניקות שיהפכו אתכם לעוד יותר יעילים בעבודה ובתהליכים עוד לפני שתתחילו לרשום קוד, זהו יתרון ענק שתוכלו לממש. העמיקו בשיטות הללו, או לפחות אל תזלזלו בהם ועקבו אחר שינויים. בהצלחה! 🐊😎
