שלום לכם קוראי פיקסל פרפקט ובייחוד לכם, משתמשי Figma והמשתמשים העתידים.
ב-1 לאוגוסט 2019, פיגמה פתחה את השערים שלה לעולם הנפלא של פלאגינים, נכון לעכשיו נוצרו כ-100 פלאגינים. זה צעד משמעותי, בשניה אחת נתן לפיגמה עוד המון יכולות שיקלו וייעלו את תהליכי העבודה שלכם והכי כיף, שאין צורך בהורדה של הפלאגינים, בוחרים בפלאגין הרצוי והוא פשוט נוסף לרשימה שלכם.
What the Figma?
אז למי שלא מכיר, Figma הוא אחד מכלי העיצוב המובילים בעולם עיצוב הממשקים, והיחיד עם יכולות קולבורטיביות ומבנה יעיל (לדעתי) בהרבה מהאחרים, הוא עובד בסביבת אינטרנט, ככה שאפשר לעבוד על כל מערכת הפעלה – Mac, Windows, Linux.
כולם עוברים! מה אתכם?
חברות רבות כבר הבינו את היתרון בעבודה עם פיגמה והעבירו את כל העבודה שלהם אליו – Uber, Monday.com, Microsoft ועוד. יש מגמה הולכת וגדלה של מעצבים שמאמצים את פיגמה, בחודשים האחרונים אני שומע על עוד ועוד מעצבים שעשו את המעבר ומברכים על כל רגע שקיבלו את ההחלטה.
מעבר ליכולות העיצוב הבסיסיות, המקבילות לכלי העיצוב המוכרים האחרים, סקטצ' ו-XD (אם אתם עדיין מעצבים ממשקים בפוטושופ/אילוסטרייטור, הגיע הזמן לעשות את המעבר).
פיגמה נותן פתרון של כלי אחד המייתר את הצורך בשימוש ב3-4 כלים שונים בכדי לבצע תהליך עבודה של צוות עיצוב או עבודה של פרילנסרים אל מול לקוחות.
- אין צורך בסנכרון בין קבצים בין אחד לשני (בין מעצבים, מפתחים, לקוח) – הכל תמיד עדכני ולייב, פשוט משתפים לינק.
- אין מיליון קבצים משוכפלים בגלל עבודה במקביל – Final, Final_1, Final_2… – יש אמת אחת משותפת.
- אין דריסות של קבצים – אפשר לעבוד במקביל וזה מדהים.
- אין צורך בשכפול המסכים לאינוויז'ן בכדי לשתף אותם – אפשר לשלוח גישה צפייה בלבד למסמך עצמו או לפרוטוטייפ
- אין צורך בכלי לניהול גרסאות כמו "אבסטראקט" – פיגמה שומרת כל שינוי במסמך ותמיד אפשר לחזור לגרסה קודמת.
- אין צורך ב"זפלין" או "אבוקוד" כדי לעשות הנדעוף (העברה לפיתוח) – אפשר פשוט להוריד את האסטים ולצפות בקוד דרך הממשך של פיגמה.
- אין צורך ב DSM של אינוויז'ן כדי לנהל דיזיין סיסטם וסטיילים משותפים.
- אין צורך במסמך לריכוז תגובות או כלי חיצוני – יש מערכת תגובות מובנת
הכל הכל קורה בתוך בתוך כלי אחד.
פיגמה נותן פתרון אלגנטי וחכם בכלי אחד שמחליף את כל הנ"ל ומאפשר עבודה משותפת על קובץ (כמו "גוגל דוקס" – למעצבים). ועל הדרך גם צורת ניהול יעילה להפליא של סטיילים, קומפוננטות ודיזיין סיסטם.
אני באמת לא יכול לומר מספיק כדי להעביר עד כמה אני חושב שפיגמה מקצרת את תהליכי העבודה היום יומיים בעיצוב ונותן לנו.
גם הכלים האחרים מנסים לצמצם פערים בנושא השיתופי, אבל הם עדיין לא שם. מה שבטוח, שאנחנו בתור מעצבים רק מרוויחים ממלחמת הכלים הזו.
השתכנעתם?
אז איך מתחילים להשתמש בפלאגינים?
זה מאוד פשוט, בתפריט שמאל שלכם, נוספה שורת Plugins, לוחצים ונפתחת רשימת הפלאגינים.
לוחצים על Install והופ! הפלאגין מוכן לשימוש.
נכנסים לקובץ פיגמה, לוחצים בעכבר קליק ימני > Plugins ושם תוכלו לראות את כל הפלאגינים שהפעלתם ופשוט לבחור מבניהם.
רוצים לעשות שימוש חוזר בפלאגין האחרון שהשתמשתם?
לוחצים על Ctrl+Alt+P ב-PC או Command-Option-P בMac
פלאגינים מומלצים:
המלצות על פלאגינים
עפר אריאל - Co-Founder & CPO, Become
Arabic & RTL Support + RTL support – פיגמה בעברית!
אין לנו עדיין פתרון מובנה לתמיכה בעברית ואני מאמין שלא רחוק היום שגם הנושא הזה ייפתר.
אז בשביל לטפל בבעיה הזו, פיתחו עבורנו 2 פלאגינים שהרבה ישראלים חיכו לו, תמיכה בשפות מימין לשמאל!
אז איך זה עובד? מפעילים את הפלאגים, עולה תיבת טקסט, כותבים בה את התוכן הרצוי ולוחצים על Fix והופ – יש לנו טקסט בעברית נכונה.
*עדכן – RTL support – תומך בשבירת שורות בקופסא
Google Sheets Sync – סנכרון עיצוב ונתונים
פלאגין מעולה שיכול לחסוך לכם המון עבודה, בעזרת הפלאגין הבא, אתם יכולים פשוט לסנכרן בין פיגמה למסמך Google Sheet, בלחיצה אחת, תוכלו לעדכן מאות כרטיסיות מלאות בפרטים ובתמונות.
לדוגמא, אם יש לכם רשימת מוצרים, שכל מוצר כולל שם, תיאור, קטגוריה, מחיר ותמונה. תוכלו ליצור מסמך חיצוני עם כל הפרטים ובלחיצה לעדכן את קובץ הפיגמה שלכם.
AutoFlow – תרשים זרימה
בעזרת הפלאגין הזה, תוכלו לייצר תרשימי זרימה. לוחצים על 2 אלמנטים מפעילים את הפלאגין והוא מחבר ביניהם בקו, מאוד פשוט וקל.
*הקשר בין האלמנטים לא נשמר לאחר החיבור, כלומר אם תזיזו את אחד האובייקטים, הקו לא ממשיך איתך
*ניתן לחבר רק עד 2 אלמנטים בכל פעם
המלצות על פלאגינים
מיקי צ'רניאק - Product Designer, Setoo
Super tidy – סופר מסודרי
זה נכון שיש את הסידור החכם של פיגמה שמאפשר סידור אוטומטי של קבוצת אלמנטים במרחקים שווים, אבל תוסף הזה לוקח את היכולת הזו רמה אחת מעל ומתאימה בול לחולי סדר – כמוני.
במקום לבזבז זמן על ליישר פריימים ולתת להם שמות רלוונטיים אני פשוט לוחץ על הסופר טיידי (ואני משתמש באפשרות RUN ALL שמפעילה 1. יישור, 2. סידור השכבות לפי הסדר בקנבס ו-3. שיום מחדש (לפי לוגיקה של מספור שורות וטורים).
הבעיה היחידה בתוסף זה היא שהיא פינתה לי המון זמן שהלך על הדברים האלה ואני עכשיו צריך למצוא דרכים אחרות לא לעבוד ולדחות את הקץ.. ;)
Pixel Perfect – הפלאגין, לא הבלוג :)
של עידן ארבל התותח שפיתח עבורנו תוסף באמת שימושי שהיה חסר בפונקציונאליות המובנית של פיגמה.
קרה לכם שאפילו בלי לשים לב הקטנתם איזה פריים ואחרי תקופה גיליתם שהאלמנטים שבתוכו קיבלו ערכי גובה/רוחב עם עשירית הנקודה.. נורא, נכון?
אז מעכשיו אין בעיה – פשוט מסמנים את הפריים ומריצים את פיקסל פרפקט
Content Reel – כשעיצוב ודאטה נפגשים
אז יצרתם ממשק ובו שורות טקסט מרובות של משתמשים. כדי שהעיצוב יהיה יותר קרוב למציאות וגם לא תפספסו מקרי קצה של טקסט ארוך או קצר מהדיפולטיבי שיש לכם בראש – עכשיו אפשר להשתמש ב"קוטנט ריל" המכניס באופן מיידי לכל שורות הטקסט שלכם דאטא בנראות אמיתית.
הדאטא שתוכלו להכניס בלחיצה אחת לכל שורות הטקסט שלכם יכול להיות מהסוגים הבאים:
- שמות
- טלפונים
- כתובות
- מספרים
- אימייל
- כתובות URL
- חברות
- שמות משתמש
- ארצות
- תמונות פרופיל "אמיתיות" – בקרוב
המלצות על פלאגינים
רמי מרטינוב - Product Designer, Become
Image Palette – מתמונה לצבע
פלאגין נחמד שמייצר פלטה של חמישה צבעים מכל תמונה שתבחרו.
*אם התמונה שבחרתם נמצאת בתוך קבוצה – תעשו זום אאוט, כי אולי הפלאגין הביא את הפלטה למקום אחר.
Unsplash – תמונות בקלות ובמהירות
אני די בטוח שאת אנספלש אין צורך להציג, אז תוסף התמונות הבא חוסך לכם את כל הטאבים המיותרים שהייתם פותחים עד עכשיו ומביא את התמונות עד אליכם. פשוט בוחרים אובייקט או כמה אובייקטים שונים, מפעילים את התוסף, בוחרים קטגוריה והקסם קורה! כל האלמנטים מתמלאים בתמונות
*אם משתמשים בחיפוש כדי לבחור כמה תמונות באופן ספציפי – לחיצה ארוכה על תמונה תאפשר לצרף אליה תמונות נוספות (כמו בסמארטפון)
Brandfetch – חיפוש לוגואים
מחפש ומייבא למסמך שלכם (לצערי לבחור אובייקט כמו בתוסף של אנספלש לא עובד כאן) לוגו מכל אתר אינטרנט (כמעט). הצד המבאס זה שהלוגו הוא קובץ PNG ולא משהו וקטורי כמו שכל מעצב היה מתפלל לקבל.
CHART – גראפים אמיתיים
*לא להתבלבל עם פלאגין דומה (אך פחות מוצלח) בשם CHARTS. בין אם אתם מעצבים מערכות מורכבות או סתם מכינים מצגת בפיגמה, עכשיו בעזרת צ'ארטס אתם יכול להכין 13 סוגי טבלאות שונות בפיגמה! אפשר לתת לתוסף להמציא נותנים משלו, למלא טבלה בצורה ידנית, להשתמש בקובץ Google sheets/אקסל או להשתמש בקובץ JSON. לכל טבלה הגדרות משלה וכפתור הSETTINGS שנמצא מימין למטה מאפשר הגדרות נוספות שגם הן משתנות מטבלה לטבלה. בקיצור תפנו לכם קצת זמן להבין איך עובד הפלאגין הזה, כי הוא יכול לחסוך לכם זמן רב.
*אם אתם מכניסים מידע שגוי – תינתן שגיאה עם לינק דוגמאות לסוגי טבלאות ואילו נתונים מתאימים להם.
לסיכום
פלאגינים הם הסוכריות והדובדבנים שעל הקצפת (שהיא כלי העיצוב פיגמה). פיגמה מהווה את השלב הבא של כלי העיצוב. לא לחינם החברה גייסה לפני מספר חודשים 40 מיליון דולר נוספים, בכדי לפתח את פלטורמת העיצוב הקולבורטיבית האמיתית היחידה. ולא לחינם מעצבים רבים וחברות ענק כמו מיקרוסופט, אובר ומזה מספר חודשים גם מאנדיי ורבות אחרות בוחרות לעבור ולעבוד עם פיגמה בתור כלי העיצוב שלהן.אל תישארו מאחור
בואו ללמוד ובקצב שלכם, את יכולות עיצוב הממשקים שיש לFigma
ב-קורס האונליין הראשון והיחיד בעברית – "What the Figma"
אחרי שצלחנו את ההשקה המוקדמת, ומאז עדכנו את תכני הקורס עם עוד שיעורים וראינו את התגובות שלכם – החלטנו לפתוח שוב לזמן מוגבל ולאפשר לעוד סטודנטים להצטרף לקורס.
