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

[EPaP]

מחכים... מה קרה?

לא נעלמתי.

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

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

ותודה על האכפתיות. מחמם את הלב.

 

[ש.ב.ח.]

לא נעלמתי.

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

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

ותודה על האכפתיות. מחמם את הלב.

ראשית נרגעתי (אהההה...(שומעים? )
שנית, תודה! (מעבר לזה זה פשוט בחינת מוסיף שהוא גורע)

 

[EPaP]

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


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

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

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

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

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

 

[EPaP]

# יום 5 (מתוך 15)


חדשות בגרסת הבטא



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


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

שוב, חוזרת לאותו נושא



למאמר המלא והסופר מעוצב (אנגלית) כאן


קמפוננט

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



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


אנימציה

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


צורת עבודה

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

דף 1: הבייסיק
אפיון, פרסונות, עץ אתר, כללי העיצוב

דף 2: וואיירפריים

דף 3: עיצוב מלא + תוכן
של כל המסכים + אנימציה.

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

צפיתי ב Build a Design System in Figma
שם הוא מתכנן את המערכת בצורה שונה:
כל קבוצת אלמנטים היא בדף נפרד.
כלומר: דף לצבעים, דף לטיפוגרפיה והלאה.

התלבטתי איך להתחיל,
והחלטתי לנסות את הדרך שלי
(הגיוני יותר בעיני, וגם פחות בלאגן)

עבדתי ככה:
ממש התחלה של ההתחלה,
בהמשך האפיון יורחב וישמין



מה יש כאן?

פריימים, לכל אחד שם ביחס למה שהוא מכיל
colors. type. shape וכו'.

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

את הפריימים איחדתי לקבוצה וקראתי לה עיצוב.



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



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




פחדתי שאצטרך ליצור את כל חיצי הפלואו לבד
ומצאתי תוסף מעולה בשם autoflow
שהומלץ ב Figma Plugins | Overview & Favorites

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




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



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


לשתף בקלות

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


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


הסרטון היומי

Top Figma Plugins 2019 (and how to install Figma Plugins)
סקירה ארוכה ומקיפה על הפלאנים השווים + הדגמה
משימושיים ממש כמו טבלאות אקסל ועד 3D אפקטס.


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

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

 

[קלרינט]

קמפוננט

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

זה לא מקביל קצת לסיבולים באילוס'?

 

[קלרינט]

עכשיו סיימתי לקרוא את המנה היומית,
איזה כיף זה

הכי נהניתי מהפירוט על צורת העבודה המדויקת והמסודרת!

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

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

 

[חיוך]

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

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

 

[יוסי דויד]

פיגמה מייצרת קוד css מה שיקל עלי בהמשך בעבודה עם מתכנתים ומפתחים

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

 

[EPaP]

זה לא מקביל קצת לסיבולים באילוס'?

לא מכירה את האופציה הזו באילוס
אבל הגיוני.

וברכות על ההחלטה לעבור סופית
יישוב טוב

תודה

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

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

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

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

 

[180]

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

ואגב, אפשר לשנות את הפרטים האישיים כמו המייל והשם וכו׳ דרך file > plugin

 

[EPaP]

@EPaP
במחשב הראשון התקנתי את הפלאגן RTL support כדי שיעבוד עברית, ועבד מעולה
מה אפשר לעשות??

היי,
זה הפלאגין שהתקנתי אצלי ועשה לי בעיות כמו שאת מתארת.
נסי להתקין את Arabic & RTL Support.

@EPaP
ואגב, אפשר לשנות את הפרטים האישיים כמו המייל והשם וכו׳ דרך file > plugin

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

 

[180]

זה הפלאגין שהתקנתי אצלי ועשה לי בעיות כמו שאת מתארת.
נסי להתקין את Arabic & RTL Support.

התקנתי אותו וזה נותן לי לכתוב רק בתוך התיבה שלו, אותה בעיה הוא לא מציג על הארטבורד
יש לך מושג למה? זה תוקע אותי

לגבי כניסה לשינוי הפרטי האישיים: שני אופציות:
1. הכי פשוט שתכתבי בתיבת החיפוש settings ותבחרי בacuont setting (הגדרות חשבון)

2. אופציה שניה כפי שאמרתי: file > plugin > manage plugin ואת מגיעה לאותו מקום

 

[EPaP]

התקנתי אותו וזה נותן לי לכתוב רק בתוך התיבה שלו, אותה בעיה הוא לא מציג על הארטבורד
יש לך מושג למה? זה תוקע אותי

מוזר מאוד.
את עובדת על הדפדפן או בגרסת הדסקטופ?

 

[180]

דפדפן
נראה לך זה ישנה אם אעבוד בגרסת דסקופ?

 

[EPaP]

דפדפן
נראה לך זה ישנה אם אעבוד בגרסת דסקופ?

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

הנה תוסף מיוחד לכרום:
https://chrome.google.com/webstore/...w71RSymBfa7s6h3aEi5lYkL-wrv2Z3pDwj-Y9xvuVUtho

עושה עבודה מעולה. בוחרים את הטקסט,
Shift+Ctrl+Y והמשפט מסתדר.

 

[180]

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

 

[EPaP]

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

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

נראה לי בהודעה הזו, איפשהו
https://www.prog.co.il/threads/עושים-היכרות-15-ימים-של-figma.495612/page-2#post-7047247

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

 

[EPaP]

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

כנסי לפה:
https://www.figma.com/downloads/

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

ותתקיני על המחשב

ניסיתי וזה עובד מעולה.

הצלחות!

 

[Ayala1]

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

Figma wireframing kit!

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

צפה בקובץ המצורף 566690

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

צפה בקובץ המצורף 566691

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

לא מצליחה להגיע לזה.
מה עושים אחרי ההורדה?

 

[EPaP]

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

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

א
מה עושים אחרי ההורדה?

אחרי ההורדה תוכלי לייבא את הקיט לפיגמה
דרך אימפורט.


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

הצלחות!