פיגמה · שלב 3
Auto Layout בפיגמה
Auto Layout מסדר את התוכן של Frame לפי כיוון, ריווח, ריפוד ויישור, וכשהתוכן משתנה הכול מסתדר מחדש לבד. זה הכלי שהופך ציור של מסך לממשק שמתנהג כמו אתר או אפליקציה אמיתיים.
מה זה Auto Layout ולמה צריך אותו
בלי Auto Layout, כל אלמנט במסך יושב בנקודה קבועה. אם מתארכת המילה על כפתור, או נוסף פריט לתפריט, צריך להזיז הכול ביד. Auto Layout הופך Frame למיכל חכם: מגדירים לו כיוון (אנכי או אופקי), מרווח בין הפריטים ו-Padding מהשוליים, והוא מסדר את התוכן לבד. כך עובדים גם רוב הממשקים בקוד, ולכן מפתחים מבינים עיצוב שבנוי ב-Auto Layout הרבה יותר מהר.
המקרים הנפוצים: כפתור שמתרחב לפי אורך הטקסט, רשימה שמתארכת כשמוסיפים שורה, כרטיס עם כותרת ותיאור באורך משתנה, ותפריט ניווט שהפריטים בו מתחלקים ברווחים שווים.
איך מוסיפים Auto Layout
- בוחרים שכבות בוחרים את האלמנטים שרוצים לסדר יחד, למשל אייקון וטקסט של כפתור.
- מוסיפים Auto Layout לוחצים Shift A, או Add auto layout בסרגל הימני. פיגמה עוטפת אותם ב-Frame חדש עם Auto Layout.
- בוחרים כיוון Vertical לרשימה אחד מתחת לשני, Horizontal לשורה.
- קובעים ריווח Gap בין הפריטים ו-Padding בין שולי ה-Frame לתוכן.
- בודקים משנים את הטקסט ורואים שה-Frame גדל ומתכווץ איתו.
להסרת Auto Layout: Option Shift A ב-Mac או Alt Shift A ב-Windows. יש גם פקודה שמציעה Auto Layout לבחירה קיימת (Suggest auto layout): Ctrl Shift A ב-Mac או Ctrl Alt Shift A ב-Windows.
כיוונים, ריווח ויישור
| זרימה (Flow) | מה היא עושה | דוגמה |
|---|---|---|
| Vertical | מסדרת את הפריטים אחד מתחת לשני | רשימה, טופס, כרטיס |
| Horizontal | מסדרת את הפריטים בשורה | כפתור עם אייקון, סרגל ניווט |
| Wrap | כשאין מקום, מעבירה פריטים לשורה או לעמודה הבאה | תגיות, צ'יפים של סינון |
| Grid | מסדרת בעמודות ובשורות, ופריט יכול להשתרע על כמה תאים | גלריה, לוח מחוונים |
- Padding: אפשר להגדיר ערך אחד לכל הצדדים, ערך לכל ציר, או ערך נפרד לכל צד.
- Gap: מספר קבוע, או Auto שמחלק את הרווח באחת משלוש שיטות: Between, Around או Evenly.
- יישור: בתיבת היישור אפשר להשתמש בחצים, ו-B מפעיל יישור לפי קו הבסיס של הטקסט (baseline), שימושי כשיש באותה שורה טקסטים בגדלים שונים.
Hug, Fill ו-Fixed: איך כל אלמנט תופס מקום
זה החלק שהכי מבלבל בהתחלה, וגם החשוב ביותר. לכל אלמנט יש הגדרת רוחב והגדרת גובה, ולכל אחת שלוש אפשרויות:
| הגדרה | משמעות | מתי משתמשים |
|---|---|---|
| Hug contents | המיכל מתכווץ לגודל התוכן שלו ועוד ה-Padding | כפתור שגדל לפי הטקסט |
| Fill container | האלמנט ממלא את כל המקום הפנוי אצל ההורה | שדה קלט שנמתח לרוחב הטופס |
| Fixed | גודל קבוע שלא משתנה | אייקון, תמונה ממוזערת |
קיצורים שימושיים: לחיצה כפולה על קצה ה-Frame מעבירה ל-Hug contents, ו-Option או Alt עם לחיצה כפולה מעבירים ל-Fill container. אפשר גם להוסיף רוחב או גובה מינימלי ומקסימלי (Min ו-Max) מהתפריט הנפתח של הרוחב, למשל כדי שכרטיס לא יימתח יותר מדי במסך רחב.
Ignore auto layout
לפעמים צריך אלמנט שיושב בתוך Frame עם Auto Layout אבל לא משתתף בסדר, כמו תגית "חדש" על פינת כרטיס. בשביל זה יש Ignore auto layout, שנקרא בעבר absolute position. מפעילים אותו בסרגל הימני, ואז אפשר לתת לאלמנט Constraints רגילים.
Auto Layout בממשק בעברית
כאן צריך לדעת משהו שלא כתוב במדריכים באנגלית. בזרימה אופקית, Auto Layout מסדר את הפריטים משמאל לימין לפי הסדר שלהם. בממשק בעברית הפריט הראשון צריך להיות מימין, ולכן יש שתי דרכים לעבוד:
- לסדר את השכבות הפוך: הפריט שצריך להיות ראשון מימין יהיה האחרון בשורה של Auto Layout. זה הפתרון הפשוט לכפתור עם אייקון או לשורת ניווט.
- להצמיד לימין: ביישור בוחרים את הצד הימני, כדי שכאשר יש מקום פנוי הוא יופיע משמאל, כמו בממשק עברי אמיתי.
- Wrap בעברית: גם ב-Wrap השורות מתמלאות משמאל לימין. בפורום של פיגמה פתוחה מאז יוני 2023 בקשה להוסיף Wrap מימין לשמאל, ונכון לבדיקה שלנו היא עדיין לא סומנה כהושקה. לתגיות בעברית לפעמים עדיף Horizontal עם יישור לימין, או תוסף RTL.
הצעה לעבודה: בונים קומפוננטה של כפתור או שורת רשימה פעם אחת בעברית, עם הסדר הנכון, ומשתמשים בה בכל המסכים. כך לא צריך לתקן את הכיוון שוב ושוב. על זה בדיוק מדבר המדריך הבא, קומפוננטות ו-Variants.
שאלות נפוצות
מה הקיצור של Auto Layout בפיגמה?
Shift A מוסיף Auto Layout לבחירה, גם ב-Mac וגם ב-Windows. להסרה: Option Shift A ב-Mac או Alt Shift A ב-Windows.
מה ההבדל בין Hug ל-Fill?
Hug contents מכווץ את המיכל לגודל התוכן שלו. Fill container גורם לאלמנט למלא את כל המקום הפנוי במיכל שמעליו.
איך מגדירים Auto Layout מימין לשמאל?
אין היום כיוון זרימה RTL מובנה ב-Auto Layout. בזרימה אופקית הסדר הוא משמאל לימין, ולכן מסדרים את השכבות בסדר הפוך ומיישרים לימין. ל-Wrap יש בקשה פתוחה בפורום של פיגמה.
איך מוציאים אלמנט אחד מה-Auto Layout?
מפעילים לו Ignore auto layout בסרגל הימני. הוא נשאר בתוך ה-Frame אבל לא משתתף בסידור, ואפשר להגדיר לו Constraints.
מקורות
- Guide to auto layout · Figma Help Center
- Apply constraints to define how layers resize · Figma Help Center
- Add auto layout wrap from right to left · Figma Forum
- Add right-to-left text · Figma Help Center
נבדק מול המקורות לאחרונה ב־10 בנובמבר 2026. מצאתם טעות? כתבו לנו.