דלג לתוכן הראשי

לפני שאתה מייבא מ-Figma

הכנת קובץ ה-Figma שלך נכון עוזרת ל-Base44 לקרוא את העיצוב שלך וליצור אותו מחדש כפריסה עובדת.
  • ודא שאתה עובד בקובץ Figma Design. FigJam, Slides וסוגי קבצים אחרים אינם נתמכים.
    Figmadeisgnfiles
  • בחר מסגרת או מקטע יחיד שאתה רוצה לייבא. אל תשתמש במסמך מלא או בקישור ברמת הדף.
  • ב-Figma, לחץ על Share ותחת Who has access, הגדר את הקישור ל-Anyone with the link – Can view. העתק את הקישור עבור המסגרת או המקטע שנבחרו והדבק אותו ב-Import from Figma ב-Base44. לאחר השלמת הייבוא, תוכל להחזיר את הרשאות קובץ Figma לפרטי אם אתה מעדיף.
Import from Figma מתמקד במסגרת או במקטע שנבחרו. חלקים אחרים של קובץ ה-Figma אינם מובאים ל-Base44 אלא אם תייבא אותם בנפרד.

ארגון פריסת ה-Figma שלך

מבנה ברור ב-Figma מקל על Base44 לבנות פריסה רספונסיבית התואמת את הכוונה שלך.
דף בית מובנה היטב עם מקטעים ברורים ורכיבים עקביים נותן את התוצאות הטובות ביותר כאשר אתה מרחיב את העיצוב לאפליקציה מלאה.
  • חלק את הדף למקטעים לוגיים: עטוף תוכן קשור (לדוגמה, hero, שורת תכונות או footer) בתוך מסגרות או קבוצות כך שכל אזור של הדף יוגדר בבירור.
  • השתמש ב-auto layout להיררכיה: החל Auto Layout על רכיבים כגון כרטיסים, סרגלי ניווט ובלוקי תוכן חוזרים. לדוגמה, כרטיס מידע עם תמונה, כותרת ותיאור צריך להיות מקובץ כ-Frame או Group, או רצוי Auto Layout. זה עוזר ל-Base44 להבין כיצד אלמנטים מתייחסים זה לזה וכיצד הם צריכים לשנות גודל.
    Selectingtwoelementsforautolayout
  • שמור על קינון משמעותי: קבץ אלמנטים השייכים יחד (לדוגמה, תמונה + כותרת + תיאור בכרטיס), והימנע מקינון עמוק ומיותר שאינו משקף את המבנה הוויזואלי.
    Autolayout
  • יישר ותפוס מקום בעקביות: השתמש ב-padding, פערים ויישור עקביים בתוך המסגרות שלך כך ש-Base44 יוכל לשמור על הרווחים וההיררכיה שלך.

עבודה עם וקטורים וצורות

ניקוי אלמנטים וקטוריים לפני הייבוא הופך את המיקום וה-rendering למדויקים יותר. שיטוח ופישוט וקטורים מפחיתים הפתעות באופן שבו אלמנטים מיושרים, משנים קנה מידה ומוצגים ברגע שהם ב-Base44.
  • שטח וקטורים מורכבים: אם וקטור בנוי מנתיבים נפרדים רבים (לדוגמה, אייקון שנוצר מצורות מרובות), שטח אותו לווקטור יחיד בכל פעם שתוכל.
    Flattencomplexvectorsintoasinglevector
  • תאר קווי מתאר לפני שיטוח: עבור קווים, מעגלים, כוכבים וצורות דומות:
    • השתמש ב-Outline Stroke ולאחר מכן שטח את התוצאה לאלמנט וקטור יחיד.
  • הסר אלמנטים מוסתרים: מחק שכבות שמוסתרות לחלוטין או נדחקות הרחק מהקנבס כדי שלא יפריעו לפריסה המיובאת.
    Hiddenelements
  • פשט מילויים: אם לאלמנט יש מילויים מרובים, השאר רק את מה שאתה באמת צריך. Base44 מייבאת רק את המילוי האחרון על אלמנט.
    Multiplfills

גופנים, אפקטים ומגבלות אחרות

חלקים מסוימים של עיצוב ה-Figma שלך מותאמים במהלך הייבוא כך שהפריסה המתקבלת תעבוד באמינות ב-Base44.
  • גופנים:
    • רק Google Fonts נתמכים במלואם.
    • גופנים מותאמים אישית מוחלפים בגופן ברירת מחדל במהלך הייבוא. תוכל לעדכן טיפוגרפיה מאוחר יותר בתוך Base44.
  • אפקטי עיצוב שעשויים שלא להישמר בדיוק:
    • מסנני תמונה
    • מספר שכבות רקע על אלמנט יחיד
    • משתנים וסגנונות מונעי משתנים
  • חידודי פריסה:
    • כוונן רווחים, רספונסיביות ואינטראקציות לאחר ייבוא באמצעות צ’אט ה-AI או מצב Visual Edit.
    • אם משהו לא נראה נכון, התאם את המבנה ישירות ב-Base44 או עדכן את קובץ ה-Figma שלך וייבא שוב ממסגרת נקייה יותר.
אם העיצוב שלך מסתמך מאוד על אפקטים לא נתמכים או על הגדרות משתנים מורכבות, צפה להבדלים ויזואליים לאחר הייבוא ותכנן לחדד את התוצאה בתוך Base44.

בניית שאר האפליקציה שלך

ברגע שמסגרת ה-Figma שלך מיובאת, תוכל להתייחס לדף החדש כיסוד לאפליקציה או אתר מלא.
  • השתמש בדף המיובא כ-דף הבית שלך ובהפניה העיקרית למבנה, פריסה ושפה ויזואלית.
  • בקש מצ’אט ה-AI:
    • לזהות אילו דפים נוספים חסרים (לדוגמה, About, Pricing, Blog או Contact).
    • ליצור דפים חדשים העוקבים אחר אותה שפת עיצוב ועקרונות פריסה.
    • לחבר כפתורים, תפריטים וקישורים בדף הבית לדפים פנימיים חדשים.
תוכל להשתמש ב-prompt כמו:
Review the home page carefully, including both its content and its design style. Use the home page as the main reference to understand the website's structure and design language. Identify which additional pages are needed to create a complete website. Create the missing pages while maintaining the same design language, layout principles, and visual style as the home page, so they feel like a direct continuation and not disconnected. When finished, return to the home page and connect all relevant buttons and links so each one navigates to the appropriate internal page.
אם אתה רואה דפוסים חוזרים בעיצוב המיובא שלך (כגון כרטיסים, שורות תכונות או בלוקי הזמנה לפעולה), הזכר אותם ב-prompt שלך כדי שה-AI יוכל לעשות שימוש חוזר בדפוסים אלה בדפים החדשים.
דף זה תורגם באמצעות בינה מלאכותית. למידע המדויק והעדכני ביותר, עיין בגרסה האנגלית.