פיגמה · שלב 4
קומפוננטות ו-Variants בפיגמה
קומפוננטה היא אלמנט שמעצבים פעם אחת ומשתמשים בו בכל מקום, וכל שינוי במקור מתעדכן בכל העותקים. Variants מאגדים את כל המצבים של אותו אלמנט, כמו כפתור רגיל, במעבר עכבר ומושבת, במקום אחד.
מה זה קומפוננטה
לפי מרכז העזרה של פיגמה, קומפוננטות הן אלמנטים לשימוש חוזר, ואפשר לבנות אותן מכל שכבה: כפתור, אייקון, שורת טבלה או כותרת שלמה. יש שני תפקידים:
- Main component: המקור. כאן מגדירים איך הקומפוננטה נראית. ברשימת השכבות הוא מסומן באייקון סגול.
- Instance: עותק שמחובר למקור. כשמשנים את ה-Main component, כל ה-Instances מתעדכנים.
אפשר להשתמש בקומפוננטות בתוך קובץ אחד, או לפרסם אותן בספרייה משותפת (team library) ולהשתמש בהן בכל הקבצים של הצוות. פרסום לספרייה דורש תוכנית בתשלום. כשהקומפוננטות, הצבעים והטיפוגרפיה מסודרים בספרייה אחת, זו כבר התחלה של מערכת עיצוב.
יוצרים קומפוננטה ראשונה
- בונים את האלמנט למשל כפתור: טקסט בתוך Frame עם Auto Layout, Padding וצבע רקע.
- הופכים לקומפוננטה Option Cmd K ב-Mac או Ctrl Alt K ב-Windows, או Create component בסרגל הימני, או מקליק ימני.
- יוצרים Instance מעתיקים את הקומפוננטה, או גוררים אותה מלשונית Assets בסרגל השמאלי.
- משנים את ה-Instance בכל עותק אפשר לשנות טקסט, צבע ועוד (overrides), והעותק עדיין נשאר מחובר למקור.
- משנים את המקור משנים את ה-Main component ורואים שכל העותקים מתעדכנים.
יש גם Create multiple components: בוחרים כמה שכבות, ופיגמה הופכת כל אחת לקומפוננטה נפרדת. זה שימושי לסט אייקונים.
Variants: כל המצבים של אלמנט אחד
כפתור אמיתי מגיע בכמה גדלים, כמה סוגים וכמה מצבים. במקום עשרות קומפוננטות נפרדות, פיגמה מאגדת אותן ב-Component set: מיכל שמכיל רק קומפוננטות, ולכל אחת יש שילוב של ערכים.
| מאפיין (Property) | ערכים (Values) |
|---|---|
| Type | Primary, Secondary, Ghost |
| Size | Small, Medium, Large |
| State | Default, Hover, Pressed, Disabled |
- Combine as variants: בוחרים כמה קומפוננטות קיימות ולוחצים על הכפתור בסרגל הימני.
- הוספת Variant: קליק ימני על Main component ואז Main component ו-Add variant, או שכפול בתוך ה-Set עם Cmd D או Ctrl D.
- שמות עם לוכסנים: אם תקראו לקומפוננטות בשיטה Button/Primary/Large, פיגמה תהפוך כל חלק אחרי לוכסן למאפיין. אחר כך משנים את השמות הכלליים (Property 2 וכדומה) לשמות ברורים.
- ברירת המחדל: ה-Variant בפינה השמאלית העליונה של ה-Set מייצג את כולו בלשונית Assets.
Component properties: מה מותר לשנות בכל עותק
Component properties מגדירים מראש מה מי שמשתמש בקומפוננטה יכול לשנות, ומציגים את זה כפקדים ברורים בסרגל הימני. יש חמישה סוגים:
| סוג | מה הוא עושה | דוגמה |
|---|---|---|
| Variant | מעבר בין Variants של אותו Set | State: Hover |
| Boolean | מציג או מסתיר שכבה | להציג אייקון בכפתור או לא |
| Text | טקסט שאפשר לערוך מהסרגל או על הקנבס | תווית הכפתור |
| Instance swap | מחליף קומפוננטה מקוננת, עם רשימת אפשרויות מועדפות | החלפת האייקון שבתוך הכפתור |
| Slot | אזור בתוך הקומפוננטה שאפשר להוסיף אליו תוכן, לערוך ולסדר | גוף של חלון דו-שיח |
בממשק בעברית Boolean ו-Instance swap שימושיים במיוחד: אפשר להחליט בכל עותק אם האייקון מופיע, ולהחליף חץ ימינה בחץ שמאלה בלי לבנות קומפוננטה נוספת. איזה אייקון צריך להתהפך בעברית ואיזה לא, תמצאו בעמוד אייקונים והיפוך.
Detach ואיפוס שינויים
Detach instance מנתק עותק מהמקור והופך אותו לשכבות רגילות. מעכשיו הוא לא יתעדכן. הקיצור: Option Cmd B ב-Mac או Ctrl Alt B ב-Windows. כדאי להשתמש בזה רק כשבאמת צריך משהו חד פעמי, כי כל Detach הוא מקום שבו העיצוב יתרחק מהמערכת.
אם שיניתם Instance ורוצים לחזור למקור, יש אפשרות לאפס את השינויים (Reset instance) בלי לנתק. וקומפוננטות שבנויות נכון אפשר להפוך גם לאינטראקטיביות: כפתור שמשנה מצב במעבר עכבר, בעזרת הפעולה Change to. זה מוסבר במדריך פרוטוטייפ.
שאלות נפוצות
איך יוצרים קומפוננטה בפיגמה?
בוחרים את השכבות ולוחצים Option Cmd K ב-Mac או Ctrl Alt K ב-Windows, או Create component בסרגל הימני.
מה ההבדל בין Variant ל-Component property?
Variant הוא קומפוננטה נפרדת בתוך Component set, למשל מצב Hover. Component properties כמו Boolean או Text משנים חלק מהקומפוננטה בלי צורך ב-Variant נוסף, וכך ה-Set נשאר קטן.
מה עושה Detach instance?
מנתק את העותק מה-Main component והופך אותו לשכבות רגילות שכבר לא מתעדכנות. הקיצור הוא Option Cmd B ב-Mac או Ctrl Alt B ב-Windows.
אפשר לשתף קומפוננטות בין קבצים בחינם?
בתוכנית החינמית Starter אין ספריות צוות. פרסום קומפוננטות לספרייה משותפת דורש תוכנית בתשלום.
מקורות
- Guide to components in Figma · Figma Help Center
- Create components to reuse in designs · Figma Help Center
- Create and use variants · Figma Help Center
- Explore component properties · Figma Help Center
- Detach an instance from the component · Figma Help Center
- Starter plan overview · Figma Help Center
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.