תמונות, סרטונים, מסמכים, ערכות נושא, טיפוגרפיה ואייקונים

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

תמונות

• התמונות שלך: בחרו ייבוא, או שחררו קובצי PNG,‏ JPEG,‏ WebP,‏ GIF,‏ AVIF או SVG. כל תמונה מקבלת אזכור לפי שם הקובץ שלה, כמו @image/storefront.
• מ-Unsplash: חפשו תמונות, סננו לפי צורה או צבע, או בחרו ערבוב. העתקת האזכור של תמונה שומרת אותה בתמונות שלכם, כך שהאזכור ממשיך לעבוד. כל תמונה מקבלת קרדיט לצלם שלה. בכל מקום שבו מופיעה תמונה מ־Unsplash (הספרייה, הקנבס ואפליקציות מיוצאות) כתוב "צילום: שם ב־Unsplash", עם קישורים לפרופיל ה־Unsplash של הצלם ול־Unsplash.
• בחרו תמונה כדי לראות אותה בגדול. משם אפשר להעתיק את האזכור שלה, להוסיף אותה לבקשה, להוריד אותה, או לערוך את שם האזכור ואת הטקסט החלופי שלה. השתמשו בבחירה כדי למחוק או לייצא כמה תמונות בבת אחת.

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

כשמוסיפים תמונה, Vibr מסיר את המטא־נתונים שלה, כמו פרטי מצלמה, מיקום והערות, והתמונה עצמה נשארת ללא שינוי. קובץ SVG שומר רק על הציור שלו: סקריפטים, קישורים וכל דבר אחר שעלול לרוץ או להיטען מאתר אחר מוסרים, וצבעים שהוגדרו באמצעות סגנונות, כפי ש־Illustrator ו־Inkscape מייצאים אותם, נשמרים. תמונות מ־Unsplash נשארות בדיוק כפי ש־Unsplash מגיש אותן. תמונות מאתרים אחרים לא נטענות בקנבס: הוסיפו אותן לספרייה והזכירו אותן במקום זאת.

סרטונים

• הסרטונים שלך: בחרו ייבוא, או שחררו קובצי MP4,‏ MOV או WebM בגודל של עד 100 MB. כל סרטון מקבל אזכור לפי שם הקובץ שלו, כמו @video/latte-pour, ופריים פוסטר מכשנייה אחת מתחילתו.
• מ-Pixabay: חפשו סרטונים. העתקת האזכור של סרטון שומרת אותו בסרטונים שלכם, כך שהאזכור ממשיך לעבוד. כל סרטון מ־Pixabay מקבל קרדיט ליוצר שלו: בכל מקום שבו הוא מופיע (הספרייה, הקנבס ואפליקציות מיוצאות) כתוב "סרטון: שם ב־Pixabay", עם קישורים לפרופיל ה־Pixabay של היוצר ול־Pixabay.
• בחרו סרטון כדי להפעיל אותו. משם אפשר להעתיק את האזכור שלו, להוסיף אותו לבקשה, להוריד אותו, או לערוך את שם האזכור ואת התיאור שלו. השתמשו בבחירה כדי למחוק או לייצא כמה סרטונים בבת אחת.

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

כשמוסיפים סרטון, Vibr מסיר את המטא־נתונים של קובץ MP4 או MOV, כמו המיקום והמכשיר שבו הוא צולם, והתמונה והקול נשארים ללא שינוי. כמה פריימים עוברים את אותה בדיקה במכשיר שעוברות תמונות. סרטונים מ־Pixabay נשארים בדיוק כפי ש־Pixabay מגיש אותם.

אפליקציות מיוצאות לוקחות איתן את הסרטונים שלכם. עד 25 MB של סרטונים שהועלו נכנסים בדף היחיד; מעבר לזה, אפליקציה (.html) מורידה קובץ zip עם הדף ותיקיית videos לצידו.

מסמכים

שמרו כאן בריפים, הערות מחקר ואתגרי עיצוב, והכניסו כל אחד מהם לבקשה עם האזכור שלו, למשל @doc/ordering-app-brief.

• הוספת מסמכים: בחרו ייבוא, גררו קבצים אל הספרייה, או בחרו שמירה בספרייה בתצוגה המקדימה של מסמך מצורף. קובצי PDF,‏ Word,‏ PowerPoint,‏ Excel,‏ CSV,‏ Markdown וטקסט עובדים, כמו בצירוף מסמכים.
• מה נשמר: הטקסט ש-Vibr קרא ועד שתי תמונות, אף פעם לא הקובץ עצמו, כך ששום דבר ממנו לא יכול לרוץ בהמשך. חלות אותן בדיקות כמו בצירוף.
• שימוש: בקשה שמאזכרת @doc/שם שולחת את הטקסט והתמונות של המסמך הזה, כמו קובץ מצורף. בקשות מאוחרות יותר לא שולחות אותו שוב אלא אם הן מאזכרות אותו.
• תצוגה מקדימה, שינוי שם ומחיקה בכפתורים שליד כל מסמך. שינוי השם משנה את האזכור.

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

ערכות נושא

ערכת נושא היא אוסף של צבעים, רדיוס פינות, ריווח וצללים, עם מצב בהיר ומצב כהה שעומדים בדרישות הניגודיות של WCAG.

• ערכת נושא חדשה פותחת את העורך. בחרו צבע ראשי וצבע ניטרלי (ואם תרצו, גם צבעים להצלחה, לאזהרה, לסכנה ולמידע), את רמת הניגודיות (AA או AAA), את רדיוס הפינות, את יחידת הריווח ואת סגנון הצללים.
• ייבוא טוקנים מכניס טוקנים של עיצוב בתקן W3C בפורמט JSON, למשל מ-Tokens Studio for Figma או מ-Style Dictionary, או מאפייני CSS מותאמים אישית.
• כל ערכת נושא מציגה אם כל זוג צבעים עומד ברמת הניגודיות, בשני המצבים.
• מהתפריט ⋯ של ערכת נושא אפשר לערוך אותה, לשכפל אותה, להעתיק את ה-CSS או הטוקנים שלה, או למחוק אותה.

אזכרו ערכת נושא כך: @theme/default. טיוטות שמשתמשות בערכת נושא מקבלות כפתור מצב כהה בקנבס.

סולם טיפוגרפי

• ייבוא משפחת גופנים מוסיף גופן מקובצי WOFF2,‏ WOFF,‏ TTF או OTF ויוצר עבורו סולם.
• סולם חדש יוצר סולם לגופן שכבר בשימוש, כמו Georgia.
• בסולם חדש יש שישה סגנונות: Display,‏ Heading 1 עד 3,‏ Body ו-Caption. עריכת הסולם משנה גדלים, משקלים, גובה שורה וריווח, או מוסיפה סגנונות.

אזכרו סגנון כך: @type/georgia/h1.

אייקונים

• אייקוני Lucide מובנים. חפשו אייקון ובחרו אותו כדי להעתיק את האזכור שלו, כמו @icon/arrow-right. אחרי ההעתקה אפשר גם להוריד אותו כ-SVG.
• ייבוא גופן אייקונים מוסיף ערכה משלכם, עם קובץ ה-CSS שלה, קובץ selection.json של IcoMoon או קובץ config.json של Fontello. גופן ליגטורות כמו Material Symbols עובד גם לבד. אייקונים מיובאים משתמשים ב-@icon/set/name.