וריאנטים ב-FIGMA – המדריך למתחילים

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

וריאנטים ב-FIGMA – המדריך למתחילים

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

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

גירסה לְמַה ?

וריאנט זאת אפשרות שמאפשרת (אופס… משחק מילים) ליצור מספר גירסאות לאותו רכיב (קומפוננט בלע"ז…).

מה זה חסר ?

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

וזהו ?

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

מה, כל כך ארוך?

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

וואוו !, מדהים !, איך זה עובד ?

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

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

.

אז יצרנו כפתור חדש:


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

  

והנה מתרחש הקסם:

 

הפעולה שעשינו יצרה וריאנט חדש. הרכיב המקורי והחדש נמצאים כעת בתוך אובייקט חדש שנקרא סט רכיבים (Component Set).

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

 

ומה עכשיו ?

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

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

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

אוקי, שינינו. תכל'ס, איך משתמשים בזה ?

בתפריט השמאלי עברו לחלונית 'Assets' וחפשו את שמו של סט הרכיבים החדש שיצרנו:

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

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

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

זהו, עד כאן להיום.

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

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

לסיכום פינקנו אתכם במאמר השלם של FIGMA מתורגם בתרגום חופשי לעברית, הקליקו ותיהנו !

הרשמו לניוזלטר שלנו

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

שתפו:

שיתוף ב facebook
Facebook
שיתוף ב twitter
Twitter
שיתוף ב pinterest
Pinterest
שיתוף ב linkedin
LinkedIn

4 תגובות

    1. תודה על המשוב הנפלא!
      רוב החומר מקורו בהדרכה של Figma באנגלית, בתוספת התנסות אישית שלנו

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

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

להגיב על ‫איידי וייס‬‎ לבטל

האימייל לא יוצג באתר. שדות החובה מסומנים *

Social Media

Most Popular

קטגוריות

קטגוריות
Get The Latest Updates

Subscribe To Our Weekly Newsletter

No spam, notifications only about new products, updates.

הרשמו לניוזלטר שלנו

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

דילוג לתוכן