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

EPaP

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

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

***


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

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

אחרי תקופה של עיצוב בתוכנות אדובי,
הגיע הזמן ללמוד משהו חדש,
לפתוח את 2020 ברמה מקצועית גבוהה יותר :)

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

האפשרויות שעמדו מולי:
Adobe XD ,WebFlow ,Figma
(Sketch ירדה מהפרק כי אין לי Mac)

***

אז למה פיגמה?


חוץ מהמלצות שונות פה בפורום ובכללי
התלהבתי מהגישה שלהם:
הם. פשוט. מבינים. מעצבים.

תגידו אתם, איך אפשר שלא לאהוב אותם אחרי שהם אומרים:
But to all the good designers out there
The design process is often a mess
Files go back and forth
Endless variations are save
And no body ever has the right fonts

ScreenCaptureProject97.gif
(קבצים שנשלחים הלוך-חזור, אינסוף גרסאות ולאף אחד אין את הפונט הנכון. מתוך ?What's Figma )


שירות ותמיכה

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

ScreenCaptureProject99.gif


כמובן שלפיגמה יש Help Center משלה והדרכות שונות בערוץ היוטיוב או באתר.


ScreenCaptureProject94.gif

אז תמיכה יש. (שירות - כאשלם נדבר על זה ;))


הצד הטכני

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

בהשוואה Figma Vs. Sketch: עבודה על מס' קבצים במשותף. מתוך Google
upload_2019-11-18_23-48-15.png



בהשוואה Figma Vs. Adobe XD: הטמעה של קבצים מתוך המחשב. מתוך Google
upload_2019-11-18_23-50-29.png



Figma Offline: עבודה בדפדפן או באופליין ע"י תוכנה. מתוך Google
upload_2019-11-18_23-51-13.png



Figma Code Mode: מצב קוד בו המפתחים לא יכולים לנגוע בעיצוב (ייאייי!). מתוך Google
upload_2019-11-18_23-53-15.png

עוד השוואות שונות תוכלו למצוא באתר הרשמי: figma.com


פיגמה בפעולה

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

ScreenCaptureProject95.gif

זה נראה כ"כ קל ופשוט, שאין תירוץ למה לא להתחיל.

שאלת השאלות: חינמי או בתשלום?
לפיגמה יש 3 מסלולים. הבסיסי בחינם ומוגבל לחודש ניסיון, עד 3 פרויקטים.
upload_2019-11-19_0-26-22.png

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


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

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


ברוכים הבאים

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


זהו, לעבודה. :)
 

סיון

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

סיון

המניפה
מנהל
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי DIP
עיצוב גרפי
UX UI
D I G I T A L

EPaP

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

EPaP

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

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

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

פרופיל

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

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

תוספים

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

ברשימת הפופולרים יש 2 שקורצים לי.
קודם מתקינה Figmoji (אימוגי'ז). שיהיה מעניין.
ואח"כ את Unsplash. אני משתמשת בו המון ביום-יום. בטח יעזור לי.
מחפשת Hebrew ומתקינה את התוסף הראשון שאני מוצאת.

upload_2019-11-18_11-10-31.png

גרסת אופליין

עדיין בקטגוריה של הפלגאינים. בימין רשימת ה"מותקנים" מתעדכנת ואני רווה נחת.
למטה מוצגות כמה אפשרויות
upload_2019-11-19_1-47-47.png

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


פרוייקטים

מחפשת את הפרוייקטים. הלשונית נקראת Drafts משום מה.
בפנים מחכים לי 3 תיקיות-פרוייקטים שונים, של פיגמה.

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

שלושת הפרוייקטים מחכים לי.
הראשון הוא Wireframing in Figma

upload_2019-11-19_1-11-0.png

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

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

ScreenCaptureProject102.gif

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

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


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

ScreenCaptureProject107.gif


עברית

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

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

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

ScreenCaptureProject111.gif


תמונות

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

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

ScreenCaptureProject112.gif


אלמנטים

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

ScreenCaptureProject113.gif


פרוייקט חדש

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

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

ScreenCaptureProject114.gif


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


עבודה בפיגמה

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

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


הסרטון היומי

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


נשאר למחר

נכנסת לפרוג ומגלה את האשכול של @album
https://www.prog.co.il/threads/figma-בעברית-היום-זה-אפשרי.493475/
רואה שהתוסף שונה ממה שהתקנתי. מחליטה לנסות מחר.
בעיקר בגלל שאפשרי להשאיר את החלון פתוח
ובמה שהתקנתי הוא נסגר אוטומטית.
פשוט משאירים את החלון של הפלאגין פתוח
ובכל פעם שרוצים להחליף את הטקסט בוחרים אותו, נגשים לחלון הזה ולוחצים פיקס


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

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

ScreenCaptureProject116.gif

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

המון מידע! משאירה את הכל למחר.
לפחות ההרגשה מעולה
ובתוכנה חדשה, זה נדיר :)


ההתרשמות עד עכשיו

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

איך יהיה מחר? אעדכן.
 

למדן וידען

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

@EPaP תודה, ותמשיכי לכתוב, זה יעזור להרבה כאן.
 

album

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

דריבלית

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

יש אגב קהילת פיגמה בעברית של עידו זייפמן
תנסי להתחבר ---
 

דריבלית

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

EPaP

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

תודה!
@סתם אפשר קישור? אני לא מוצאת אותו....
זו קבוצת פייסבוק.
https://www.facebook.com/groups/Figma.il/?fref=mentions&__tn__=K-R

וגם לו יש תוסף לעברית שעובד רק בדפדפן של כרום:
https://chrome.google.com/webstore/...P47arNFzpztbxHwMPY7NRMvba2skXIik0G184gQ6fwIXg
upload_2019-11-19_13-36-25.png

אנסה מאוחר יותר.
 

דריבלית

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


נשמח אם תמשיכי לנו משם טיפים חשובים לטובת החסומים

תודה מראש
 

EPaP

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

דריבלית

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

.sima d

משתמש מקצוען
מנוי פרימיום
בוגר/תלמיד פרוג
עיצוב גרפי
D I G I T A L
@EPaP וואו, מרתק ממש!
בדיוק רציתי לכתוב לך ששגיא ממליץ מאד על פיגמה, ויש לו כמובן קורס לזה.

תודה רבה רבה! ממשיכה לעקוב....
 

R.H

משתמש רשום
D I G I T A L
יש לי שאלה על הענין אני UXUI וחברה ביקשה ממני לעבוד בשותפות שהיא בונה ואני יעצב רציתי ייעוץ מחיר מה מקובל בשוק? מה המחיר או בכלל? גם כשותף וגם כלפי לקוח ממש יעזור לי כל תגובה ......
ואגב כ"כ לפורום.. באמת שווה לעקוב:)
 

א-ירושלמית

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

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

הפרק היומי

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


תהילים פרק קיט ב'

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

לוח מודעות

למעלה