פיגמה · שלב 5
Styles ו-Variables בפיגמה
Styles ו-Variables שומרים את ההחלטות החוזרות של העיצוב, כמו צבע ראשי, גודל כותרת או ריווח, במקום אחד. משנים פעם אחת, וכל המסכים מתעדכנים.
למה צריך את זה
בלי Styles או Variables, כל צבע בעיצוב הוא קוד הקסדצימלי שהוקלד ביד. כשהלקוח מחליט לשנות את הכחול של המותג, צריך למצוא אותו בעשרות מקומות. עם Style או Variable, הצבע מוגדר פעם אחת בשם ברור, וכל שכבה שמשתמשת בו מתעדכנת לבד. זו גם השפה המשותפת עם המפתחים: אותם שמות יכולים להופיע בקוד כ-design tokens. על הרעיון הרחב קראו במערכות עיצוב.
Styles: חמישה סוגים
לפי מרכז העזרה של פיגמה, Styles הם אוספים של מאפיינים לשימוש חוזר, והם זמינים בכל התוכניות. יש חמישה סוגים:
| סוג | מה הוא שומר |
|---|---|
| Color styles | מילוי וקו מתאר: צבע, תמונה, גרדיאנט (כולל הכיוון), תבנית ו-shader |
| Text styles | משפחת גופן, גודל, גובה שורה וריווח אותיות |
| Effect styles | צללים, טשטוש, טקסטורה ורעש. סגנון אחד יכול לכלול כמה אפקטים |
| Layout guide styles | רשת עמודות, שורות או ריבועים לשימוש חוזר |
| Animation styles | אנימציות ב-Figma Motion בלבד |
Text styles הם המקום הכי חשוב לעבודה בעברית: מגדירים פעם אחת את הגופן העברי, גודל וגובה שורה מתאימים לכותרות ולגוף, ולא צריך לבחור אותם מחדש בכל שכבה. איך בוחרים גופן ובאיזה גודל, תמצאו בעמוד גופנים עבריים לממשק.
Variables: ערך אחד, כמה מצבים
Variable שומר ערך בודד, ויש שישה סוגים:
- Color: צבע מלא, עם שקיפות אופציונלית.
- Number: מספרים שלמים ועשרוניים, לריווח, רדיוס פינות, גדלים.
- String: טקסט.
- Boolean: אמת או שקר, למשל להציג או להסתיר שכבה.
- Timing ו-Easing: משך ועקומת תנועה, לשימוש ב-Figma Motion.
Collections ו-Modes
Variables מסודרים ב-Collections (אוספים), ובתוך כל אוסף אפשר ליצור קבוצות. כל אוסף יכול להכיל עד 5,000 Variables. Mode הוא עמודה של ערכים: לכל Variable יש ערך אחד בכל Mode. הדוגמאות הקלאסיות הן מצב בהיר ומצב כהה, שפות שונות וגדלי מסך שונים.
- פותחים את חלון ה-Variables לוחצים Variables בסרגל הניווט השמאלי, ויוצרים Collection חדש.
- מוסיפים Variables למשל color/bg, color/text ו-color/primary, כל אחד עם ערך.
- מוסיפים Mode לוחצים New variable mode מימין לכותרות העמודות. פיגמה מעתיקה את הערכים מהעמודה הראשונה, ומשנים אותם לגרסה הכהה.
- מחילים על השכבות משתמשים ב-Variables במקום בצבעים ידניים.
- מחליפים Mode בוחרים Frame, ובחלק Appearance בסרגל הימני בוחרים Apply variable mode ואת ה-Mode הרצוי. אפשר לעשות זאת גם לעמוד שלם.
Aliasing: Variable יכול להפנות ל-Variable אחר מאותו סוג. כך בונים שתי שכבות: צבעי בסיס (למשל blue-600) וצבעים לפי תפקיד (למשל color/primary שמפנה ל-blue-600). מחליפים את ההפניה, וכל הממשק מתעדכן.
Style או Variable: מתי משתמשים בכל אחד
| Styles | Variables | |
|---|---|---|
| סוג ערך | כמה מאפיינים יחד, כולל גרדיאנטים ותמונות | ערך בודד: צבע, מספר, טקסט, בוליאני |
| Modes | אין להם Modes, אבל יכולים להשתמש ב-Variables שיש להם | כן, למשל בהיר וכהה |
| הפניה לערך אחר | לא | כן (Aliasing) |
| הגבלה לשימושים מסוימים (Scoping) | לא | כן |
| שימוש בפרוטוטייפ | לא | כן, למשל להחלפת Variant |
- גרדיאנט: Style. גרדיאנט הוא כמה ערכים, ו-Variable מחזיק ערך אחד.
- טיפוגרפיה: Text style, שמחזיק גופן, גודל ומשקל יחד.
- ריווח: Number variables. למשל ערך 16 ב-Mode של מובייל ו-18 בדסקטופ.
- השילוב החזק: Text style שהגודל שלו מגיע מ-Number variable. כך הסגנון משתנה לפי Mode.
גם Styles וגם Variables אפשר לפרסם בספרייה משותפת, יחד עם הקומפוננטות. ב-Dev Mode המפתחים רואים בפאנל הבדיקה אילו Styles הוחלו על כל שכבה.
שאלות נפוצות
מה ההבדל בין Styles ל-Variables בפיגמה?
Style שומר כמה ערכים יחד, כמו גופן, גודל וגובה שורה. Variable שומר ערך אחד, יכול להפנות ל-Variable אחר, ויכול לקבל ערך שונה בכל Mode.
איך עושים מצב כהה בפיגמה?
יוצרים Collection של צבעים עם שני Modes, בהיר וכהה, ומחילים את ה-Variables על השכבות. אחר כך בוחרים Frame ומחליפים לו את ה-Mode דרך Apply variable mode.
כמה Modes אפשר ליצור?
זה תלוי בתוכנית. לפי טבלת התוכניות של פיגמה, עד 10 Modes לכל Collection ב-Professional ועד 20 ב-Organization.
האם Variables הם design tokens?
הם מאפשרים לעבוד באותה שיטה: ערכים עם שמות, עם הפניות בין ערכים כלליים לערכים לפי תפקיד. פיגמה מציינת שה-Aliasing הוא מה שמאפשר מבנה של design tokens.
מקורות
- Styles in Figma Design · Figma Help Center
- Overview of variables, collections, and modes · Figma Help Center
- Modes for variables · Figma Help Center
- The difference between variables and styles · Figma Help Center
- Compare Figma plans and features · Figma Help Center
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.