פיגמה בעברית ומימין לשמאל

המצב היום: מה עובד ומה עדיין לא

שנים מעצבים בעברית ובערבית בפיגמה נעזרו בתוספים שהפכו את סדר האותיות. זה כבר לא נחוץ לטקסט. לפי מרכז העזרה של פיגמה, שפות RTL וטקסט דו-כיווני נתמכים בקובצי Figma Design ו-FigJam, בכל התוכניות, לכל מי שיש לו הרשאת עריכה. המאמר מונה במפורש עברית, ערבית, פרסית ואורדו.

איך משנים כיוון טקסט ויישור

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

• מהסרגל הימני: בוחרים את שכבות הטקסט ומחליפים בין RTL ל-LTR בפקדי הטקסט.
• מהתפריט הראשי: Text ואז Text direction, ובוחרים Right to left או Left to right.
• מ-Quick actions: Cmd / ב-Mac או Ctrl / ב-Windows, ומקלידים right to left text direction.

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

גופנים עבריים בפיגמה

ברשימת הגופנים המובנית של פיגמה יש גופנים שתומכים ב-RTL, ואפשר לסנן את Google Fonts לפי שפה. אם תו מסוים חסר בגופן, פיגמה עוברת אוטומטית לגופן Noto, כדי שלא יופיעו ריבועים ריקים. זה נוח, אבל גם מסוכן: אם הגופן שבחרתם בכלל לא תומך בעברית, הטקסט ייראה תקין בפיגמה בגופן אחר ממה שחשבתם. תמיד בודקים בסרגל הימני איזה גופן מוצג בפועל.

לגופן עברי שהתקנתם במחשב: באפליקציה למחשב הוא זמין מיד. בדפדפן צריך להתקין את Figma Font installer. איך בוחרים גופן עברי לממשק, ואיזה גדלים ומשקלים מתאימים, תמצאו בעמוד גופנים עבריים לממשק.

פריסה מימין לשמאל: איך עובדים מסביב

כאן נמצא הפער העיקרי. Auto Layout בזרימה אופקית מסדר את הפריטים משמאל לימין, ו-Wrap ממלא שורות משמאל לימין. בפורום של פיגמה פתוחה מאז יוני 2023 בקשה להוסיף Wrap מימין לשמאל. נציג תמיכה של פיגמה כתב שהבקשה נוספה לבקשת פיצ'ר כדי למדוד עניין, ועד הבדיקה שלנו לא הוכרז שהיא הושקה.

1. מעצבים מההתחלה בעברית הכי פשוט ונקי: לא מתרגמים מסך מאנגלית אלא בונים אותו בעברית, עם הסדר הנכון של השכבות.
2. הופכים את סדר השכבות בשורות בשורה אופקית, הפריט שצריך להיות ראשון מימין הוא האחרון ב-Auto Layout. מיישרים את השורה לימין.
3. בונים קומפוננטות עבריות כפתור, שורת רשימה, כותרת וטופס בונים פעם אחת בעברית, עם Variant לכיוון אם צריך גם אנגלית.
4. מטפלים באייקונים חצים ואייקונים של כיוון מחליפים ב-Instance swap, ולא מהפכים לוגו או סימני וי. הכללים באייקונים והיפוך.
5. בודקים עם תוכן אמיתי טקסט עברי אמיתי, מספרים ומילים באנגלית באמצע משפט. כך מגלים בעיות של טקסט דו-כיווני לפני הפיתוח.

פתרון עוקף שמשתמשים מציעים בפורום הוא להפוך אופקית את ה-Frame עם Wrap ואז להפוך גם את התוכן שבתוכו. זה עובד ויזואלית, אבל קל להתבלבל, ולכן אם משתמשים בזה כדאי לסמן את השכבה בשם RTL.

תוספי RTL שקיימים בקהילת פיגמה

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

• RTL Hero: היפוך של Frames ופריסות לקהל RTL, עם אפשרות לתרגום טקסט מאנגלית לעברית או לערבית.
• Aura RTL: המרת עיצובים מ-LTR לשפות RTL, כולל עברית, עם היפוך של אייקונים כיווניים בלבד.
• Fig Tool: כולל יכולת היפוך של פריסה לעברית ולערבית. לפי התיעוד שלו, ההיפוך מנתק קומפוננטות, ולכן כדאי להריץ אותו על עותק.
• Convert To RTL (Heb + Arb): תוסף ותיק שמתקן טקסט עברי וערבי שהוקלד הפוך. שימושי בעיקר לקבצים ישנים.

קבצים ישנים שנבנו עם תוספי RTL

פיגמה שומרת טקסט שנערך בעבר עם תוספי RTL. כדי לעבור לתמיכה המובנית, ב-Figma Design יש כפתור Upgrade בפאנל Type details, או הפעולה update to support bidirectional text ב-Quick actions. לפני כן בודקים אם התוסף שבו השתמשתם יודע להחזיר את הטקסט למצבו המקורי. אם לא, יוצרים שכבת טקסט חדשה וכותבים מחדש.