ייבוא מ-Figma

Send to Vibr הוא פלאגין של Figma. הוא קורא את הקובץ שפתוח אצלכם ב-Figma (משתנים, סגנונות, רכיבים, פריימים וקישורי אב טיפוס) ושומר אותו כקובץ אחד. Vibr מייבא את הקובץ הזה ובונה ממנו עם מערכת העיצוב והמודל שלכם.

התקנת הפלאגין

ב-Figma, פתחו את התפריט Plugins, חפשו Send to Vibr והריצו אותו. הפלאגין עובד בכל תוכניות Figma, כולל Starter.

מה לשלוח

הפלאגין שולח כל רמה של הקובץ שתבחרו, מהקובץ כולו ועד אלמנט אחד:

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

בחרו את מה שתרצו, או בחרו This page or selection או Whole file בראש הפלאגין. הפלאגין מציג את מה שהוא ישלח. אפשר לשלב: מסך ושני אלמנטים נשלחים יחד.

מתחת לזה, בחרו מה יישלח איתם:

• Screens and elements, with layout and prototype links, וגם Include frames they link to, כדי שזרימה תגיע שלמה. גם התמונות שבהם מגיעות, חתוכות כפי שהעיצוב שלכם מציג אותן.
• Variables, text styles and shadows, מהקובץ כולו.
• Components, עם הווריאנטים שלהם. אלה שהמסכים שלכם משתמשים בהם מגיעים ראשונים.

קובץ אחד מכיל עד 12 מסכים ואלמנטים, 12 תמונות, 80 רכיבים ו-1,500 משתנים.

שמירת הקובץ

בחרו Save file for Vibr. הפלאגין שומר קובץ שמסתיים ב-.vibr-figma.json. Copy מעתיק את אותו תוכן ללוח במקום זאת.

ייבוא הקובץ ל-Vibr

בתיבת הבקשה, בחרו + ואז ייבוא מ-Figma, ובחרו את הקובץ. אפשר גם לשחרר את הקובץ על תיבת הבקשה, או להדביק את מה ש-Copy העתיק ללוח.

החלון מציג את מה ש-Vibr ייצור. בטלו את הסימון של כל מה שלא תרצו:

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

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

בסוף ההרצה, Vibr פותח את המסך הראשון. בחרו הפעלה כדי לעבור בין מסכי הזרימה. ראו זרימות.

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

מה הופך למה

ב-Figma	ב-Vibr
משתני צבע	ערכת צבעים. סקאלות כמו Brand/500 ושמות קצרים כמו color/clay הופכים לצבעים שלה; Vibr בונה מהם את התפקידים הבהירים והכהים ובודק את הניגודיות שלהם.
משתני רדיוס וריווח, סגנונות צל	הפינות, יחידת הריווח והצללים של ערכת הצבעים.
סגנונות טקסט	סולם טיפוגרפי לכל משפחת גופנים, עם גדלים, משקלים, גובה שורה וריווח אותיות. Vibr מבקש את הגופנים מ-Google Fonts כשהם זמינים שם.
מילויי תמונה	תמונות בספרייה שלכם, בשמות של השכבות שלהן (שכבה בשם Photo: latte pour הופכת ל-@image/latte-pour), שהמסכים משתמשים בהן.
פריימים	מסכים. המודל מקבל את התמונה של הפריים ומתאר של השכבות שלו: auto layout, טקסט, רכיבים והטוקנים שכל שכבה משתמשת בהם.
קישורי אב טיפוס	קישורים בין המסכים. חזרה מובילה למסך הקודם. שכבת על נבנית בתוך המסך שפותח אותה, כחלון או כגיליון, עם הקישורים שלה.
רכיבים	המודל מקבל מידע על הרכיבים שלכם והווריאנטים שלהם, ובונה עם החלקים התואמים במערכת העיצוב שלכם.
אלמנט	רכיב שנבנה בנפרד, ממורכז בדף.

פרטיות ובטיחות

• לפלאגין אין גישה לרשת. שום דבר לא יוצא מ-Figma מלבד הקובץ ששמרתם.
• Vibr בודק את הקובץ לפני שהוא קורא אותו. טקסט נכנס כטקסט רגיל, בלי תווים נסתרים, וכל ערך נבדק ומוגבל בגודלו. כל תמונה חייבת להיות תמונה אמיתית בגודל ש-Vibr מוכן לפתוח, ו-Vibr מצייר אותה מחדש, מה שמסיר את המטא־נתונים שלה. תמונות נכנסות לספרייה שלכם דרך אותן בדיקות כמו העלאה. טקסט עובר את אותה בדיקת תוכן כמו בקשה שהקלדתם.
• שום דבר בקובץ לא רץ. הטקסט שלו נשלח למודל שלכם עם כל בקשה כחומר לעיצוב, בדיוק כמו מסמך מצורף. ראו מפתחות, פרטיות ואחסון.

טיפים

• תנו לפריימים את השמות שתרצו לתת למסכים. פריים בשם Checkout הופך ל-@screen/checkout.
• בקובץ גדול, שלחו דף או בחירה במקום את הקובץ כולו.
• אחרי הרצה, שפרו כל מסך עם בקשה רגילה, כמו "הפוך את העגלה לגיליון תחתון".