Figma – הפלאגינים הגיעו! תמיכה בעברית, אוטומציה, אייקונים ועוד

Figma - פלאגינים

שלום לכם קוראי פיקסל פרפקט ובייחוד לכם, משתמשי Figma והמשתמשים העתידים.
ב-1 לאוגוסט 2019, פיגמה פתחה את השערים שלה לעולם הנפלא של פלאגינים, נכון לעכשיו נוצרו כ-100 פלאגינים. זה צעד משמעותי, בשניה אחת נתן לפיגמה עוד המון יכולות שיקלו וייעלו את תהליכי העבודה שלכם והכי כיף, שאין צורך בהורדה של הפלאגינים, בוחרים בפלאגין הרצוי והוא פשוט נוסף לרשימה שלכם.

What the Figma?

אז למי שלא מכיר, Figma הוא אחד מכלי העיצוב המובילים בעולם עיצוב הממשקים, והיחיד עם יכולות קולבורטיביות ומבנה יעיל (לדעתי) בהרבה מהאחרים, הוא עובד בסביבת אינטרנט, ככה שאפשר לעבוד על כל מערכת הפעלה – Mac, Windows, Linux.

כולם עוברים! מה אתכם? ​

חברות רבות כבר הבינו את היתרון בעבודה עם פיגמה והעבירו את כל העבודה שלהם אליו – Uber,  Monday.com, Microsoft ועוד. יש מגמה הולכת וגדלה של מעצבים שמאמצים את פיגמה, בחודשים האחרונים אני שומע על עוד ועוד מעצבים שעשו את המעבר ומברכים על כל רגע שקיבלו את ההחלטה.

מעבר ליכולות העיצוב הבסיסיות, המקבילות לכלי העיצוב המוכרים האחרים, סקטצ' ו-XD (אם אתם עדיין מעצבים ממשקים בפוטושופ/אילוסטרייטור, הגיע הזמן לעשות את המעבר).
פיגמה נותן פתרון של כלי אחד המייתר את הצורך בשימוש ב3-4 כלים שונים בכדי לבצע תהליך עבודה של צוות עיצוב או עבודה של פרילנסרים אל מול לקוחות.

  • אין צורך בסנכרון בין קבצים בין אחד לשני (בין מעצבים, מפתחים, לקוח) – הכל תמיד עדכני ולייב, פשוט משתפים לינק.
  • אין מיליון קבצים משוכפלים בגלל עבודה במקביל – Final, Final_1, Final_2… – יש אמת אחת משותפת.
  • אין דריסות של קבצים – אפשר לעבוד במקביל וזה מדהים.
  • אין צורך בשכפול המסכים לאינוויז'ן בכדי לשתף אותם – אפשר לשלוח גישה צפייה בלבד למסמך עצמו או לפרוטוטייפ
  • אין צורך בכלי לניהול גרסאות כמו "אבסטראקט" – פיגמה שומרת כל שינוי במסמך ותמיד אפשר לחזור לגרסה קודמת.
  • אין צורך ב"זפלין" או "אבוקוד" כדי לעשות הנדעוף (העברה לפיתוח) – אפשר פשוט להוריד את האסטים ולצפות בקוד דרך הממשך של פיגמה.
  • אין צורך ב DSM של אינוויז'ן כדי לנהל דיזיין סיסטם וסטיילים משותפים.
  • אין צורך במסמך לריכוז תגובות או כלי חיצוני – יש מערכת תגובות מובנת

הכל הכל קורה בתוך בתוך כלי אחד.

מתוך Figma.com

פיגמה נותן פתרון אלגנטי וחכם בכלי אחד שמחליף את כל הנ"ל ומאפשר עבודה משותפת על קובץ (כמו "גוגל דוקס" – למעצבים). ועל הדרך גם צורת ניהול יעילה להפליא של סטיילים, קומפוננטות ודיזיין סיסטם.

אני באמת לא יכול לומר מספיק כדי להעביר עד כמה אני חושב שפיגמה מקצרת את תהליכי העבודה היום יומיים בעיצוב ונותן לנו.

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

השתכנעתם?

אז איך מתחילים להשתמש בפלאגינים?

זה מאוד פשוט, בתפריט שמאל שלכם, נוספה שורת Plugins, לוחצים ונפתחת רשימת הפלאגינים.
לוחצים על Install והופ! הפלאגין מוכן לשימוש.

נכנסים לקובץ פיגמה, לוחצים בעכבר קליק ימני > Plugins ושם תוכלו לראות את כל הפלאגינים שהפעלתם ופשוט לבחור מבניהם.

רוצים לעשות שימוש חוזר בפלאגין האחרון שהשתמשתם?
לוחצים על Ctrl+Alt+P ב-PC או Command-Option-P בMac

איך מפעילים פלאגין

פלאגינים מומלצים:

עפר אריאל

המלצות על פלאגינים
עפר אריאל - Chief Product, Become

Arabic & RTL Support + RTL supportפיגמה בעברית!

אין לנו עדיין פתרון מובנה לתמיכה בעברית ואני מאמין שלא רחוק היום שגם הנושא הזה ייפתר.
אז בשביל לטפל בבעיה הזו, פיתחו עבורנו 2 פלאגינים שהרבה ישראלים חיכו לו, תמיכה בשפות מימין לשמאל!
אז איך זה עובד? מפעילים את הפלאגים, עולה תיבת טקסט, כותבים בה את התוכן הרצוי ולוחצים על Fix והופ – יש לנו טקסט בעברית נכונה.
*עדכן – RTL support – תומך בשבירת שורות בקופסא

Figma בעברית
Arabic & RTL Support

Google Sheets Sync – סנכרון עיצוב ונתונים

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

פיגמה Google Sheets Sync
Google Sheets Sync

AutoFlow – תרשים זרימה

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

Auto Flow
Auto Flow
מיקי צ'רניאק

המלצות על פלאגינים
מיקי צ'רניאק - Product Designer, Setoo

Super tidy – סופר מסודרי

זה נכון שיש את הסידור החכם של פיגמה שמאפשר סידור אוטומטי של קבוצת אלמנטים במרחקים שווים, אבל תוסף הזה לוקח את היכולת הזו רמה אחת מעל ומתאימה בול לחולי סדר – כמוני.
במקום לבזבז זמן על ליישר פריימים ולתת להם שמות רלוונטיים אני פשוט לוחץ על הסופר טיידי (ואני משתמש באפשרות RUN ALL שמפעילה 1. יישור, 2. סידור השכבות לפי הסדר בקנבס ו-3. שיום מחדש (לפי לוגיקה של מספור שורות וטורים).
הבעיה היחידה בתוסף זה היא שהיא פינתה לי המון זמן שהלך על הדברים האלה ואני עכשיו צריך למצוא דרכים אחרות לא לעבוד ולדחות את הקץ.. ;)

Super Tidy
Super Tidy, התמונה מכתבה של prototypr.io

Pixel Perfect – הפלאגין, לא הבלוג :)

של עידן ארבל התותח שפיתח עבורנו תוסף באמת שימושי שהיה חסר בפונקציונאליות המובנית של פיגמה.
קרה לכם שאפילו בלי לשים לב הקטנתם איזה פריים ואחרי תקופה גיליתם שהאלמנטים שבתוכו קיבלו ערכי גובה/רוחב עם עשירית הנקודה.. נורא, נכון?
אז מעכשיו אין בעיה – פשוט מסמנים את הפריים ומריצים את פיקסל פרפקט

Pixel Perfect
Pixel Perfect

Content Reel – כשעיצוב ודאטה נפגשים

אז יצרתם ממשק ובו שורות טקסט מרובות של משתמשים. כדי שהעיצוב יהיה יותר קרוב למציאות וגם לא תפספסו מקרי קצה של טקסט ארוך או קצר מהדיפולטיבי שיש לכם בראש – עכשיו אפשר להשתמש ב"קוטנט ריל" המכניס באופן מיידי לכל שורות הטקסט שלכם דאטא בנראות אמיתית.
הדאטא שתוכלו להכניס בלחיצה אחת לכל שורות הטקסט שלכם יכול להיות מהסוגים הבאים:

  • שמות
  • טלפונים
  • כתובות
  • מספרים
  • אימייל
  • כתובות URL
  • חברות
  • שמות משתמש
  • ארצות
  • תמונות פרופיל "אמיתיות" – בקרוב
Content Reel
Content Reel, התמונה מכתבה של prototypr.io
רמי מרטינוב

המלצות על פלאגינים
רמי מרטינוב - Product Designer, Become

Image Palette – מתמונה לצבע

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

Image Palette
Image Palette

Unsplash – תמונות בקלות ובמהירות

אני די בטוח שאת אנספלש אין צורך להציג, אז תוסף התמונות הבא חוסך לכם את כל הטאבים המיותרים שהייתם פותחים עד עכשיו ומביא את התמונות עד אליכם. פשוט בוחרים אובייקט או כמה אובייקטים שונים, מפעילים את התוסף, בוחרים קטגוריה והקסם קורה! כל האלמנטים מתמלאים בתמונות
*אם משתמשים בחיפוש כדי לבחור כמה תמונות באופן ספציפי – לחיצה ארוכה על תמונה תאפשר לצרף אליה תמונות נוספות (כמו בסמארטפון)

Unsplash
Unsplash, התמונה מכתבה של prototypr.io

Brandfetch – חיפוש לוגואים

מחפש ומייבא למסמך שלכם (לצערי לבחור אובייקט כמו בתוסף של אנספלש לא עובד כאן) לוגו מכל אתר אינטרנט (כמעט). הצד המבאס זה שהלוגו הוא קובץ PNG ולא משהו וקטורי כמו שכל מעצב היה מתפלל לקבל.

Brandfetch
Brandfetch, התמונה מכתבה של prototypr.io

CHART – גראפים אמיתיים

*לא להתבלבל עם פלאגין דומה (אך פחות מוצלח) בשם CHARTS. בין אם אתם מעצבים מערכות מורכבות או סתם מכינים מצגת בפיגמה, עכשיו בעזרת צ'ארטס אתם יכול להכין 13 סוגי טבלאות שונות בפיגמה! אפשר לתת לתוסף להמציא נותנים משלו, למלא טבלה בצורה ידנית, להשתמש בקובץ Google sheets/אקסל או להשתמש בקובץ JSON. לכל טבלה הגדרות משלה וכפתור הSETTINGS שנמצא מימין למטה מאפשר הגדרות נוספות שגם הן משתנות מטבלה לטבלה. בקיצור תפנו לכם קצת זמן להבין איך עובד הפלאגין הזה, כי הוא יכול לחסוך לכם זמן רב.
*אם אתם מכניסים מידע שגוי – תינתן שגיאה עם לינק דוגמאות לסוגי טבלאות ואילו נתונים מתאימים להם.

Charts
כמובן שיש עוד המון פלאגינים ולא יכולנו לכתוב על כולם, ניתן למצוא כאן את הרשימה המלאה. אתם יודעים תכנות? אתם יכולים להכין פלאגין! מערכת פלאגינים של Figma פתוחה לפיתוח לקהל הרחב ומאפשרת לכל אדם עם רקע ב Javascript, HTML CSS, לכתוב פלאגין ולשתף אותו לכל קהילת פיגמה, אז תצפו לראות יותר ויותר פלאגינים. אם אתם עובדים בחברה ויש לכם צוות פיתוח, אפשר לפתח פלאגין שתפור לצרכים שלכם.

לסיכום

פלאגינים הם הסוכריות והדובדבנים שעל הקצפת (שהיא כלי העיצוב פיגמה). פיגמה מהווה את השלב הבא של כלי העיצוב. לא לחינם החברה גייסה לפני מספר חודשים 40 מיליון דולר נוספים, בכדי לפתח את פלטורמת העיצוב הקולבורטיבית האמיתית היחידה. ולא לחינם מעצבים רבים וחברות ענק כמו מיקרוסופט, אובר ומזה מספר חודשים גם מאנדיי ורבות אחרות בוחרות לעבור ולעבוד עם פיגמה בתור כלי העיצוב שלהן.

אל תישארו מאחור

בואו ללמוד ובקצב שלכם, את יכולות עיצוב הממשקים שיש לFigma
ב-קורס האונליין הראשון והיחיד בעברית – "What the Figma"

What the Figma

אחרי שצלחנו את ההשקה המוקדמת, ומאז עדכנו את תכני הקורס עם עוד שיעורים וראינו את התגובות שלכם – החלטנו לפתוח שוב לזמן מוגבל ולאפשר לעוד סטודנטים להצטרף לקורס.

אז למה אתם מחכים?
להרשמה ופרטים נוספים, לחצו כאן

הפוסט נכתב על ידי:

מתוך לוח הדרושים שלנו:
סגירת תפריט

אנא מלאו את הטופס ונחזור אליכם בהקדם!

 

נשמח לתת לך עוד פרטים

יש למלא את הטופס הבא על מנת לשריין מקום באירוע הקרוב.


נא לבדוק ביומן לפני מילוי הטופס: 
30 למאי (יום רביעי)
בשעה 18:30
בתל אביב (מיקום מדוייק יישלח בהמשך)

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

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

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

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

קבלת ה-PDF מותנית ברישום לניוזלטר שלנו (מי שרשום לניוזלטר נחשב חבר בקהילה ולכן אנחנו מפנקים בגישה לכל החינמיים שלנו).


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

×

אשמח לשלוח לך פרטים!

אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה

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

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

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

נשמח לתת לך עוד פרטים!

לצפייה מיידית בסילבוס ובפרטים אודות הקורס אנא מלא/י את הפרטים כאן: