Studio Editor: ייצוא העיצובים שלכם מ-Figma
8 דקות
משתמשים בפיגמה (Figma) לעיצוב מקטעים ואלמנטים? התוסף של Wix Studio מאפשר לכם להפוך עיצובים סטטיים לאתר רספונסיבי, בתהליך אחד פשוט. אתם יכולים לייבא מסגרות פיגמה שלמות, רכיבים ומקטעים ספציפיים, או להשתמש ב-wireframes (ערכות ה-UI) שלנו.
מרגע שתהיו ב-Studio, תוכלו לשפר את העיצובים שלכם עם אנימציות ללא קוד, CSS מותאם אישית, חיבור לפתרונות עסקיים כמו Wix Stores, ועוד.
- אנחנו ממליצים להשאיר את פיגמה ואת Studio Editor פתוחים בטאבים נפרדים בדפדפן, כי אתם תצטרכו את שניהם עבור התהליך.
- נמצאים בעיצומו של התהליך וצריכים עזרה? קראו את השאלות הנפוצות ואת המידע לפתרון בעיות שמופיעים כאן בהמשך.
שלב 1 | התכוננו לייצוא
לפני שמנסים לייבא עיצובים מפיגמה, יש כמה דברים שאנחנו ממליצים לבדוק. זה יבטיח מעבר חלק מפיגמה ל-Wix Studio.
א | העלו את הפונטים שלכם ל-Wix Studio
ודאו שכל הפונטים שבהם אתם משתמשים ב-Figma זמינים גם בחשבון ב-Wix. עדיף להעלות את הפונטים ל-Wix מראש – אחרת, פונטים של המערכת יחליפו את הפונטים שהתכוונתם להציג.
ב | השוו את רוחב המסגרת לגודל העריכה
רוחב המסגרת של Figma צריך להתאים לגודל העריכה של העמוד הרלוונטי באתר של הלקוח. אם לא תהיה התאמה, הייצוא של העיצוב לא יהיה באותו יחס ולכן לא יופיע בפרופורציות הנכונות ב-Wix Studio.
מייצאים אלמנטים?
עדיין כדאי לבדוק את רוחב המסגרת שמכילה אותם כדי להבטיח תוצאה ביחס 1:1.
שלב 2 | התקנת תוסף הפלאגין
אם עדיין לא עשיתם זאת, התקינו את תוסף הפלאגין של Wix Studio מהקובץ שאתם רוצים לייצא. אחרי ההתקנה, תוכלו לגשת לתוסף הפלאגין בקלות מכל עיצוב אחר בחשבון.
בשלב הבא, עליכם לפתוח את חלונית הפלאגין מה-Studio Editor.
א | התקינו את התוסף בפיגמה
- פתחו את הקובץ שאתם רוצים לייצא בחשבון ה-Figma שלכם.
- לחצו על Ctrl + K במקלדת (Cmd + K ב-Mac).
- הקליקו על הלשונית Plugins and widgets (תוספי פלאגין ווידג'טים).
- חפשו את Wix Studio ובחרו באפשרות Figma to Wix Studio מהתוצאות.
- הקליקו על Run (הפעלה).
- היכנסו לחשבון שלכם ב-Wix דרך הפלאגין.
ב | פתיחת הכלי באתר הלקוח
- עברו לאתר של הלקוח ב-editor.
- הקליקו על האייקון של Wix Studio
מצד שמאל למעלה. - עברו עם העכבר מעל Tools (כלים).
- הקליקו על Import from Figma (ייבוא מ-Figma ).
טיפ: זה יוסיף אייקון חדש
בצד שמאל של ה-Editor.
שלב 3 | בחרו מה לייצא מפיגמה
אחרי התקנת תוסף הפלאגין, עליכם לחזור לקובץ בחשבון שלכם ב-Figma. התוסף מאפשר לכם לבחור מה לייצא – מסגרת או הסגנונות שלכם.
מומלץ קודם לייצא את הסגנונות שלכם (כלומר טיפוגרפיה וצבעים), כך שהם כבר יהיו מוגדרים ב-Studio Editor כשאתם מתחילים לייצא מסגרות.
אילו אלמנטים התוסף מזהה אוטומטית?
כדי לייצא מפיגמה:
- (אם עדיין לא עשיתם זאת) פתחו את קובץ ה-Figma הרלוונטי.
- היכנסו לתוסף ה-Studio:
- הקליקו על האייקון של Figma
כדי לפתוח את התפריט הראשי. - עברו עם העכבר מעל Plugins (תוספים) והקליקו על Figma to Wix Studio (פיגמה ל-Wix Studio).
- הקליקו על האייקון של Figma
- הקליקו על Set up Export (הגדרת ייצוא).
- הקליקו על Next (הבא).
- ודאו שגודל העריכה ב-Wix Studio תואם לרוחב הפיגמה. כשאתם מוכנים, הקליקו על Start Export (התחלת ייצוא).
- בחרו מה לייצא ועקבו אחרי השלבים:
Styles (סגנונות)
Frame (מסגרת)
שלב 4 | השלימו את הייבוא ב-Editor
אחרי סיום הייצוא ב-Figma, תוכלו לחזור ל-editor ולוודא שאין פונטים חסרים או אי התאמה בגודל.
עובדים עם מסגרת? תוכלו לבחור אם לייבא אותה בתור קונטיינר, מקטע וכו'.
כדי להשלים את הייבוא:
- עברו לאתר של הלקוח ב-editor.
- (אם עדיין סגור) הקליקו על האייקון Import from Figma בצד שמאל.
- אם השלמתם בעבר ייבוא מ-Figma לחשבון Wix הנוכחי, עליכם לרענן את החלונית:
- אם זה הייבוא הראשון: הקליקו על Refresh (רענון).
- השלמתם ייבוא בעבר: הקליקו על אייקון רענון הייבוא
.
- בהתאם למה שאתם מייבאים, עקבו אחרי השלבים הבאים:
Styles (סגנונות)
Frame (מסגרת)
שאלות נפוצות
הקליקו על שאלה למטה לפרטים נוספים על ייבוא עיצובים מפיגמה.
האם אפשר לייבא עיצובים מפיגמה לאתר קיים?
האם אפשר לייבא כמה עמודים בבת אחת?
האם עיצובי פיגמה מתחברים אוטומטית לאפליקציות של Wix (למשל, Wix Stores)?
מה קורה כשמייבאים תפריטים, טפסים וכפתורים? האם הם יפעלו באתר של הלקוח שלי?
איך ייראה העיצוב המיובא בין נקודות הברייקפוינט?
אם אבצע שינויים נוספים בעיצוב הפיגמה אחרי שייבאתי אותו ל-Studio, האם הם יסתנכרנו אוטומטית?
האם אפשר לייצא עיצובים בכיוון ההפוך, מ-Wix Studio לפיגמה?
פתרון בעיות
נתקלתם בבעיות במהלך ייצוא עיצוב הפיגמה שלכם ל-Wix Studio? הקליקו על בעיה למטה כדי ללמוד מה גורם לה ואיך לפתור אותה.
לפני שתיגשו לפתרון הבעיות:
אם אתם לא מצליחים לייצא את הדיזיין שלכם, מומלץ לבדוק אם הגעתם למגבלת קצב הבקשות בחשבון Figma שלכם.
(בפיגמה) לא יופיעו סגנונות בחלונית כשמנסים לייצא
(ב-Editor) לא מופיעה את האפשרות להוסיף מסגרת כעמוד / מקטע
(ב-Editor) העיצוב לא נראה פרופורציונלי אחרי הייבוא
צריכים עוד עזרה?
אילו פרטים צריך לכלול אם פונים לסיוע?