ייבוא מסגרת Figma לתוך WordPress באמצעות Page Builder Sandwich

Page Builder Sandwich Pro הופך מסגרת Figma לעמוד WordPress הניתן לעריכה. האתר מתקשר עם Figma באמצעות חשבון ה-Figma שלכם, תוך שימוש באסימון גישה אישי שאתם יוצרים; שום עיצוב או אסימון אינם עוברים דרך Zinn Digital®.

חיבור Figma (פעם אחת, כמנהל מערכת)

1. ב-Figma, פתחו את Settings ← Security ← Personal access tokens והפיקו אסימון עם ההרשאה File content: read.
2. ב-wp-admin עברו אל Page Builder Sandwich ← Import from other builders and Figma ← Import from Figma, הדביקו את האסימון ולחצו על Connect Figma.

האסימון מאומת מול Figma, נשמר מוצפן, ולעולם לא יוצג שוב (רק ארבעת התווים האחרונים שלו). Disconnect מסיר אותו. בשורת הפקודה: echo <token> | wp pbs importers figma-token set (האסימון נקרא מהקלט הסטנדרטי, כך שהוא אינו נשמר בהיסטוריית ה-shell שלכם).

ייבוא מסגרת

1. ב-Figma, לחצו על מסגרת אחת, לחצו עליה באמצעות לחצן העכבר הימני ובחרו ב-Copy/Paste as ← Copy link to selection.
2. הדביקו את הקישור אל Figma frame link ולחצו על Import the frame. עמוד טיוטה חדש נוצר, הקרוי על שם המסגרת.

כיצד העיצוב מומר

• Auto layout הופך לשורות ולעמודות flex (ו-grids עבור grid auto layout) עם אותם מרווחים (gap), ריפוד (padding) ויישור; מסגרת בעלת פריסה חופשית נערמת לפי סדר הקריאה, והדוח מציין זאת כאשר שכבות חפפו זו את זו.
• מסגרת עמוד המורכבת מרצועות ברוחב מלא הופכת למקטע אחד ברוחב מלא לכל רצועה.
• טקסט שומר על הגופן, הגודל, המשקל, גובה השורה, הריווח בין אותיות, אותיות רישיות/קטנות, היישור והצבע שלו; טקסט גדול הופך לכותרות, ומקטעים מודגשים, נטויים וקישורים נשמרים.
• מילויים, קווי מתאר, רדיוס פינות והצללות (drop shadows) מועברים במלואם, כולל מעברי צבע (gradients).
• תמונות מועתקות לספריית המדיה שלכם, וגרפיקה וקטורית (סמלים, איורים) מעובדת על ידי Figma ומועתקת כתמונה (עד 200 שרטוטים לכל ייבוא). ייבוא של אותה מסגרת פעם נוספת עושה שימוש חוזר בעותקים.
• מסגרת קטנה עם מילוי, פינות מעוגלות ותווית קצרה אחת (או שכבה בשם "button") הופכת לבלוק Button.

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

בשורת הפקודה: wp pbs importers figma <frame link>.