UX עושים היכרות >>> 15 ימים של Figma

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
#יום 2 (מתוך 15)

***
חלק א'

בצהרים הצטרפתי לקבוצה הרשמית של Figma בישראל
שמנוהלת ע"י עידו זייפמן
(תודה @סתם על ההמלצה)

ScreenCaptureProject117.gif

רפרפתי שם קצת.
קבוצה גדולה, יותר משנתיים, 1500+ חברי קבוצה
מיטאפים, המון תוכן מקצועי ומילים שאני לא מכירה :(
מנחמת את עצמי ש-
טוב, אני כולה יום אחד בפיגמה. הגיוני.

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

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

מחליטה לעבוד מהקל אל הכבד.
קודם הפוסט.


צורת למידה של פיגמה

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

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

שני חבר'ה, מיקי & עופר, מסבירים את ההתחלה של התוכנה.
משלב ההתחלה והיכרות של המסכים השונים.
את כל זה עברתי אתמול ונחמד לי לראות איך הם מסבירים.

ScreenCaptureProject119_1.gif

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

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


הטוב של אדובי

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

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

אגב, את רוב הנ"ל רואים בסרטון. אם בא לכם.


ערכות עיצוב חינמיות

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

ScreenCaptureProject132.gif

2 ערכות כן מצליחות למשוך את תשומת הלב שלי:
OnPoint E-commerce App
לעיצוב מובייל של חנות מבוססת ווקמרס
יכול להיות שימושי.

Figma Wireframing Kit
שהיא ערכה רחבה של ווירפריימים.

רושמת לעצמי שאם ישאר לי זמן - לבדוק אותן.
זה להוריד, להעלות, להתנסות.
קודם אסיים עם מה שצריך.

עברית וRTL

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

ScreenCaptureProject122.gif

אני מנסה לחפש חלופות.
בשדה החיפוש כותבת RTL ובודקת את התוצאות.

# ניסיון ראשון: Arabic & RTL Support
התוסף ש @album המליצה באשכול סמוך.
מחליף בקלות.
בהעתקה אפשרי לכתוב ישירות בחלון בלי לסמן את הכיתוב

ScreenCaptureProject126.gif



# ניסיון שני: RTLPLZ - RTL Support
הוא הפלאגין השלישי והאחרון שיש לפיגמה להציע בנושא של RTL.
לא עובד. לא נפתח חלון. הכיתוב לא מסתדר. לא קורה כלום.
:(

ScreenCaptureProject127.gif


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

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

ScreenCaptureProject129.gif

יש לי עוד תוסף אחד לנסות.
של Tsurit Ben-Tsur‎ אחת מהקבוצה בפייסבוק.

# ניסיון רביעי: RTL with UI / Convert to RTL
הפלאגין הזה עובד רק בדסקטופ (שיווי משקל לקודם? ;))
וזה אותו אחד עם וראסיה שונה של עם/בלי כפתור.

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

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

ScreenCaptureProject131.gif

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

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

ScreenCaptureProject131_1.gif

אז פתרון טוב יותר - מצאתי.
Convert to RTL לדסקטופ
r2l לדפדפן.


אמנם אלו לא פתרונות מלאים
אבל אפשרי ליצור ככה פרוייקט.


תמיכת RTL בגרסא רשמית

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

upload_2019-11-20_2-5-14.png



***
עד כאן לחלק א'. כבר מעלה את חלק ב'.
 

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
# יום 2 (מתוך 15)

***
חלק ב'


עריכת תמונות

מגלה איך אפשר להזיז את התמונה בתוך הצורה.
קלי קלות. לא מבינה איך לא עליתי על זה אתמול.

יש גם מכוונים לעיבוד בסיסי של התמונה.
נפלא.
ScreenCaptureProject135.gif

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

ScreenCaptureProject136.gif

מוזר.

יצירת סטיילים

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

Figma Tutorial: Creating Styles
טטוריאל רשמי של פיגמה.

ScreenCaptureProject137.gif

המון בלה-בלה משעמם של מישהו נורא סבלני שמסביר כל פעולה בסיסית.
עם כל הכבוד, אני עייפה מידי.

עוברת לסרטון הבא:


הסרטון היומי

Styles and Team Library in Figma
בחורציק שעובד על פרוייקט ומסדר את הסטיילים.
גם הוא מדבר נורא לאט. מהירות של 1.5 והכל טוב :)

ScreenCaptureProject139.gif

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

מה שכן מפתיע זה שתמונת אווטר יכולה לשמש כסטייל.
וזה מגניב.

אז למה הסרטון הזה הוא הסרטון היומי?
בגלל צורת העבודה שלו.

ScreenCaptureProject140.gif

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


הסרטון הבא מתנגן באופן אוטומטי
Components and Nesting in Figma

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

ScreenCaptureProject145.gif

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


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

OnPoint E-commerce App

תבנית חינמית לעיצוב מובייל של חנות מבוססת ווקמרס

ScreenCaptureProject142.gif


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

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


צחוק בצד

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

ScreenCaptureProject143.gif

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


Figma wireframing kit!

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

ScreenCaptureProject141.gif

דף הנחיתה נראה מדהים. אני בפנים.
איפה מורידים?
מה יש בפנים?

ScreenCaptureProject144.gif

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


התרשמות יומית

היום כמעט ולא עבדתי בחופשיות על התוכנה.
יותר חקרתי ובדקתי.

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

העבודה תחכה למחר---
פרשתי לישון.
 

ש.ב.ח.

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
קולטת שמרוב עייפות, אחד המסכים מעוצבים עם הודעה.
זה לא מפיגמה. זה לא אלי בכלל...
:) :) :)
קורה במשפחות הכי טובות, ולאו דווקא בשעה 4 לפנות בוקר....
 

srp

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
UX UI
D I G I T A L
@EPaP את נהדרת!
ואיך יש לך כל כך הרבה סבלנות?...
הלוואי עלי :(
 

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
@EPaP את נהדרת!
ואיך יש לך כל כך הרבה סבלנות?...
הלוואי עלי :(
תודה.
קראתי פעם שלהתחייב בפני ציבור שמחכה לתוצאות מכריח לעבוד תכלס'.
אז האשכול הזה, עוזר גם לי - להתמיד.
ותגובות תמיד מעודדות מלמדות ומחממות את הלב :)
 

srp

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
UX UI
D I G I T A L
תודה.
קראתי פעם שלהתחייב בפני ציבור שמחכה לתוצאות מכריח לעבוד תכלס'.
אז האשכול הזה, עוזר גם לי - להתמיד.
ותגובות תמיד מעודדות מלמדות ומחממות את הלב :)
טוב
מה שבטוח שאנחנו הרווחנו בגדול :)
 

דריבלית

מהמשתמשים המובילים!
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
פרסום וקופי
D I G I T A L
תודה.
קראתי פעם שלהתחייב בפני ציבור שמחכה לתוצאות מכריח לעבוד תכלס'.
אז האשכול הזה, עוזר גם לי - להתמיד.
ותגובות תמיד מעודדות מלמדות ומחממות את הלב :)

כל הכבוד
ממשיכה לעקוב
ולחפש זמן לשבת על זה
 

ag

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

אכן היה כיף אדיר לעבוד יחד עם הצוות המדהים שלך....

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

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

למדן וידען

משתמש סופר מקצוען
עיצוב גרפי
הנדסת תוכנה
D I G I T A L
אכן היה כיף אדיר לעבוד יחד עם הצוות המדהים שלך....

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

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

אכן היה מוצלח. מאוד.
 

תמר לב

משתמש מקצוען
D I G I T A L
@EPaP
איזה יופי של אשכול! תודה על השיתוף!
אולי זה יגרום לי להוריד גרסת ניסיון אחרי כזה אשכול:)
 

קלרינט

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
D I G I T A L
@EPaP אפשר ללכת לישון?
מה לעשות הרגלת אותנו לכל הטוב הזה :)
נדמה לי שיש כרגע בעיה בצירוף קבצים לאתר
סומכת על @EPaP שתשלים לנו בהמשך את הפערים.


אני עוקבת באדיקות אחרי האשכול, נהנית מכל מילה!!!
מעריכה את השיתוף המפורט
ואת ההשקעה בקישורים / צילומי מסך וכן הלאה

וגם קצת מקנאה ;)
צורת הלמידה שלך היא משהו מיוחד!
 

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
נדמה לי שיש כרגע בעיה בצירוף קבצים לאתר
בדיוק.

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

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
#יום 3 (מתוך 15)

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

בערב מתיישבת על פיגמה.
המחשב עייייף אחרי כל היום שעבר עליו
ואני במקום לשקוע בלימוד
חופרת באמזון על Mac 27.
חלום שלי. יומאחד.


לעבוד אופליין

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

נזכרת ש @סיון כתבה:
אכן, ניתן לעבוד אופליין, רק לשים לב שזה לעבוד על משהו קיים.
אפשר לקרוא בהרחבה כאן: https://help.figma.com/article/333-working-offline
אז אני בודקת.
אפשרי לעבוד על פרוייקט, רק אם פתחנו אותו.
ז"א, לפתוח פרוייקט. גם אם הוא ריק,
כל זמן שהקנבס על המסך, אפשר לעבוד.
נשמע טוב.

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


פיגמה במובייל

מייל מפיגמה.
עיקביים החברה, כל יומיים אחד חדש.

מודיעים לי ש- Figma on Desktop & Mobile
אני חושדת לרגע שהם עוקבים אחרי.
איך ידעתם שאני בלפטופ ורוצה להוריד את גרסאת הדסקטופ???

הם לא עקבו אחרי.
המייל נשלח כמה שעות מוקדם יותר, אני זו ששמתי לב אליו רק עכשיו.
נושמת לרווחה.

מורידה את הגרסא לדסקטופ.
חוזרת למייל.
רגע, אמרתם גם מובייל?

unnamed.gif


נכנסת לpaly, מורידה את Figma Mirror
פותחת, מסך שחור.
אני עייפה. אין לי כוח לקרוא,
וכל התקלות החליטו להתאחד היום.

כשאין ברירה אז אין.
מה. אתם. רוצים. פיגמה. מה.

c3a66008-f245-46a0-8e14-2bbaea9885c7.jpg

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

דאבל קליק על ארטבורד
והוא מופיע גם בסמארטפון!
מכירים את הסמיילי עם עיניים-כוכבים? ככה אני עכשיו.

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


חברות ענק ופיגמה

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


גרסאת דסקטופ

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

upload_2019-11-22_2-9-51.png

התשובות נורא ברורות:
לעבוד על הדפדפן נורא מכביד ומאט על העבודה
עדיף להשתמש בגרסא לדסקטופ.


לעבור לפיגמה

ובכן, מסתבר שאני ממש לא היחידה שעוברת מתוכנה אחת אל אחרת :)

upload_2019-11-22_2-15-59.png

אז הנה כתבה של אנדרי סונדייאב, מנהל מוצר (לא מעצב!), שמתאר את המעבר
מה שכיף פה: הוא לא מעריץ נלהב כמו האלו מ Airbnb
ומפרט את המעלות והחסרונות:
Tool tips: How our design team switched to Figma


לא צריך Mac

זוכרים שבתחילת ההודעה כתבתי ש Mac '27 הוא חלום שלי?
והנה אני נתקלת בפוסט הזה:

upload_2019-11-22_2-30-11.png

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

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


שעת הדרכה חינמית

עוד שיטוטים. קוראת כתבה ב The Marker
על מעצבי UX\UI: מה גובה המשכורת,
האם יותר מרוצים בסטודיו או בתאגיד
ואילו תוכנות מאיימות על פוטושופ?

מגלה את startup designers
אתם לא תאמינו, אבל זו קהילה שלימה של מעצבי UX-UI, ולא רק
עם תוכנית מנטורינג חינמית ב8 נושאים שונים,
ואחד מהם הוא - תחזיקו חזק - שעת הדרכה בכלי עיצוב, לא משנה איזה!

upload_2019-11-22_2-41-25.png

רשימת המנטורים שלהם מדהימה
מלאה באנשי מקצוע שלמדו ועובדים במקומות הכי- נחשבים.
והכי חשוב- אחד מהם (שהוא גם מנהל-שותף של הקהילה)
הוא פריק של פיגמה!

upload_2019-11-22_2-53-13.png


איך מצטרפים לקהילה?
טופס סופר מושקע בגוגל דוקס
קודם תבחרו אם להיות מנטור או מונטר (המצאה שלי, הבנתם ת'כוונה)

יש להם גם ניוזלטר שבועי
(הרשמה מ- כאן)

ברור שהצטרפתי. איזה מין שאלות אלו?

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

אז כמה דברים קטנים שגיליתי:

ProtoType

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

upload_2019-11-22_3-33-24.png

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



יצירת אייקונים בפיגמה

אתמול בסרטון של What the Figma
הרחיבו על האפשרות של הפן טול.
זה לא שלא ניסיתי אותה לפני.
אבל הפעם אני מנסה ללכת לקצה:

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

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

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

לחצן ימני, עוברת בריכוז על כל אופציות.
Flatten, יכוללהתאים?
לחיצה. הציפיות שלי בשמיים.
א נ י ל א מ א מ י נ ה !

הרגו את הטקסט לצורות ואני יכולה לעשות בו כרצוני.

upload_2019-11-22_3-17-45.png

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


היה טוב. נפגש :)
 

יוסי דויד

מהמשתמשים המובילים!
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
מוזיקה ונגינה
D I G I T A L
אין אפשרות ליצור סטייל של טיפוגרפיה + צבע.
ז'תומרת שכל סטייל של כיתוב, תמיד יבוא בשחור.
דווקא בשבילי. זה מהווה סיבה טובה לעבור לפיגמה
מבחינתי הכי טוב שהגדרות צבע והגדרות טיפוגרפיה יהיו נפרדות
ב XD זה כן מחובר, ולפעמים זה יוצר בעיות
 

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
מבחינתי הכי טוב שהגדרות צבע והגדרות טיפוגרפיה יהיו נפרדות
ב XD זה כן מחובר, ולפעמים זה יוצר בעיות

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

בפיגמה (בסטייל של טיפו) צריך לבחור את הסטייל + צבע / סטייל של צבע.
כלומר 2 בחירות: אחת של טיפו והשניה של צבע.

בעיני זה *קצת* יותר מסובך.
 

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
# יום 4 (מתוך 15)

אני מתחילה בלצפות בסרטון של Sketch vs Figma.
צ'ארלי מארי, מעצבת UX, שלפני 4 שנים עשתה את השינוי מפוטושופ לסקצ'
היא הגיע לפיגמה דרך קולגה ששיתפה איתה פרוייקט ומספרת על ההבדלים:
Sketch vs Figma - Why I switched!



פיגמה דומה לכל שאר התוכנות

בכל העדויות ששמעתי וקראתי
כולם אומרים פה אחד: פיגמה דומה ל x/y/z.
פיגמה מצרפת את כל התוכנות לאחת
ומי שעובד על אחת מהתוכנות הבאות יכול למצוא את פיגמה דומה:
פוטושופ, אילוס, אינדי, סקצ', אלמנטור,
(מסתבר שגם XD, עליה לא מצאתי איזכור)


מבנה הפרוייקט בפיגמה

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

ScreenCaptureProject152.gif

בכל דף-קנבס אפשרי ליצור ארטבורדים, או בשפה של פיגמה: פריימים.
הצורות וכל מה שנמצא בקנבס מסודר לפי שכבות.

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


מחיקת כל הפריטים בתוך קבוצה תמחוק אותה לגמרי
כי הרי אין כבר קבוצה :)



שיתוף בפיגמה

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

ScreenCaptureProject153.gif

שיתפתי בחשבון אחר שלי
ומיד קיבלתי הודעה ששותפתי בפרוייקט.

אפשרויות שיתוף נוספות:
העתקת קישור (לצפיה בלבד)
וגם אפשרות הטמעה.

אם לוחצים על פריים ספציפי ואז נגשים לשיתוף
רק הפריים הזה ישותף.

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


קיצורי מקלדת בפיגמה

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

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


נעילת אובקייט

וואו. זה אחד הדברים שהיו לי מסובכים ברגע הראשון שפתחתי את התוכנה. הכל זז לי.
אז יש קיצור לנעילה. Shift+Ctrl+L.
אז נחמד שזה הקיצור ולא כמו באילוס (Ctrl+2, מה הקשר???)
אבל -
לנעול זה קל. לשחרר זה קצת יותר מסובך.
עזבו שהקיצור לשחרור ונעילה הוא אותו קיצור.
אחרי שנועלים, אין אפשרות לבחור את הצורה, נכון? כי היא נעולה.
ואז אי אפשר לשחרר אותה עם הקיצור. אוווחח.

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


עריכת צורות

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

לכל צורה לפחות 2 מכווננים שניתנים לשינוי: הוספת זוויות, ועיגול פינות.
תראו איזה מגניב:

ScreenCaptureProject155.gif


הערות ופידבק

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

ScreenCaptureProject157.gif


פיגמה בחינם

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


עיצוב רספונסיבי

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

ScreenCaptureProject150.gif


לא רוצים שכלום יזוז?
הגדלה + Ctrl והכל טוב :)


עריכת תמונות

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

ScreenCaptureProject158.gif

ולמי שאין פוטושופ, או ווטאוור, וצריך עריכה מתקדמת יותר
תוכלו להשתמש ב photopea


עקמות למידה גבוהה

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


יצירת צוות

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

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


גיבוי עד 30 יום

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

upload_2019-11-23_22-7-1.png


הסרטון היומי

מחליטה לסמן צ'ק ליסט על כל ההתחלה של פיגמה
ומחפשת סרטון של אינטרו
מוצאת את Intro to Figma - Beginners guide to Figma Basics
בודקת לרגע אם אני זו שהרצתי את מהירות הסרטון, אבל לא.
בחורצ'יק נמרץ ששתה יותר-מידי-קפאין-ואז-עוד-קצת
שמסביר על הבייסיק.

באחת ההודעות הקודמות הבאתי קישור לסרטון של 2 חברה ישראלים.
אל תבזבזו עליו את הזמן. צפו בסרטון האינטרו.
יקיף את הכל.
למי שחסום - אוריד בשמחה. רק תבקשו :)

אז הנה הצ'ק ליסט שלי:

יצירת פרוייקט.
יודעת.

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

שמירה כקובץ ממשי
אם ממש מתחשק לכם,
אפשרי לייצא מפיגמה קובץ שישב אצלכם במחשב בלי קשר לכלום.
File > Save As Fig.

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

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

סרגלים
Ctrl+r. מוכר.

יש גם גיידס, לייאוט, וסוגים שונים של גריד
לא מכירה. בפעם הבאה.

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

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

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

מסכה וקטורית
כמו Ctrl+7 באילוס.
צורה שיכולה להכיל צורה/ות אחרות בתוכה.
כולל עריכה של הצורות השונות (בפנים וגם של המסכה)
בחלונית השכבות, לחיצה ימנית על המסכה ואפשרי 'לחלץ' את הצורות מהמסכה.

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

אווטר של הצוות
למעלה, תמיד יש את האווטר של כל מי שיש לו גישה לפרוייקט.

פרזנטציה
אפשרי לראות את הפרוייקט כמות שהוא אמור להראות בפועל
כולל אנימציות תנועה.

תצוגת גרידים
כיבוי והדלקה של העין.

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

אקספורט
כל צורה או פרים יכול להיות מיוצא לגייפג, פיאנג'י או פידיאף.
יש חלונית פריוויו קטנה וחמודה
והכי נוח שבעולם - רוצים לייצא את אותו הפריט בגדלים שונים, סוגים שונים וכו'?
מוסיפים +, ומגדירים.
אח"כ לוחצים על אקספורט, בוחרים מיקום. זהו :)

ScreenCaptureProject159.gif

רספנסיביות
יודעת. עברתי על זה ממש בתחילת הלימוד היומי.

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

קומנטס
פשוט. יודעת

ProtoType
כל האנימציות המגניבות. תכננתי ללמוד היום. לא הספקתי.
מה שכן. צפיתי בסרטון הדרכה קצרצר של פיגמה על זה:
Figma Tutorial: Smart Animate and Drag Triggers
נראה קליל ומובן. צריך רק זמן להתעמק על האפשרויות ולנסות בפועל.
הם גם מציעים פרויקט דמה עם מגוון אנימציות מוכנות

Code
פיגמה מייצרת css באופן אינטראקטיבי
כך שאפשרי פשוט להעתיק ולהדביק ישירות לאתר. ייאיי.


נשאר למחר

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

ScreenCaptureProject160.gif

והנה דוגמא של What The Figma לאנימציה בסיסית:

ScreenCaptureProject161.gif

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

EPaP

מנהלת בפמ"ג
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
כתיבה ספרותית
עיצוב פונטים
פרסום וקופי
UX UI
D I G I T A L
שוב בעיה בהעלאת קבצים :(

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

אשלים כשהתקלה תסודר, בעז"ה.
 

קלרינט

משתמש סופר מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
D I G I T A L
לוקח לי ממוצע של שעה
:eek: :eek: :eek:

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

אבל עליך כבר אי אפשר לדעת כלום, אולי יש לך קפיצת הדרך :-0

אז אני רואה שזה לא נשלף לך מהשרוול, בכלל לא...
מודה ומעריכה אותך עוד יותר!
זכינו בך בפיס :)
 

אולי מעניין אותך גם...

הפרק היומי

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


תהילים פרק קכא

א שִׁיר לַמַּעֲלוֹת אֶשָּׂא עֵינַי אֶל הֶהָרִים מֵאַיִן יָבֹא עֶזְרִי:ב עֶזְרִי מֵעִם יְהוָה עֹשֵׂה שָׁמַיִם וָאָרֶץ:ג אַל יִתֵּן לַמּוֹט רַגְלֶךָ אַל יָנוּם שֹׁמְרֶךָ:ד הִנֵּה לֹא יָנוּם וְלֹא יִישָׁן שׁוֹמֵר יִשְׂרָאֵל:ה יְהוָה שֹׁמְרֶךָ יְהוָה צִלְּךָ עַל יַד יְמִינֶךָ:ו יוֹמָם הַשֶּׁמֶשׁ לֹא יַכֶּכָּה וְיָרֵחַ בַּלָּיְלָה:ז יְהוָה יִשְׁמָרְךָ מִכָּל רָע יִשְׁמֹר אֶת נַפְשֶׁךָ:ח יְהוָה יִשְׁמָר צֵאתְךָ וּבוֹאֶךָ מֵעַתָּה וְעַד עוֹלָם:
נקרא  16  פעמים

לוח מודעות

למעלה