Itay Lazarovitch

אז Auto Layout ב-Figma יכול להיות מאתגר, ובסרטון הזה אני מסביר שלב אחרי שלב איך יצרתי קומפוננטות Pricing Cards רספונסיביים בעזרת Auto Layout.

איך יצרתי מיקרו-אינטראקציות של Lottie — בלי לפתוח After Effects? בסרטון הזה אני מדגים איך יצרתי אנימציה בעזרת Figma ו-Lottielab בלבד. עד היום, כל פעם שרציתי להוסיף מיקרו־אינטראקציות, הייתי עובר דרך After Effects. וזה אחלה כלי, אני עובד איתו לא מעט… אבל הוורקפלואו מסורבל, וה-learning curve שלו משמעותי. בעזרת Lottielab אפשר ליצור, לערוך ולייצא אנימציות בפורמט Lottie — ישירות מהדפדפן, ובממשק שמאוד דומה ל-Figma. בסרטון הזה, אני מראה את התהליך, שלב-שלב, איך יצרתי את האנימציה ישירות מעיצוב שיצרתי ב-Figma. אם אתם יוצרים מיקרו-אינטראקציות למוצרים שאתם עובדים עליהם או לאתרי אינטרנט — שווה לבדוק.

אם אתם עובדים על פלואים ב-Figma ועדיין מציירים ידנית את הקווים שמחברים בין המסכים השונים – אז זה בשבילכם. אז ההאק הזה אמנם ממש קטן, אבל חוסך זמן וכאב ראש של ציור ידני של הקווים המחברים בפלואו שלכם. מכיוון שאנחנו נשתמש ב-Connector lines ישירות מ-Figjam בשביל זה, אז יש לנו התנהגות נייטיבית שעובדת הרבה יותר טוב משימוש בפלאגינים כדי להגיע לאותה תוצאה. נסו את זה בפלואו הבא שלכם ותראו כמה זה חוסך זמן. ואם יש לכם האקים נוספים שעושים לכם חיים קלים בפיגמה, אשמח שתשתפו בתגובות.

ידעתם שאפשר לייבא ל-Figma כמעט כל קומפוננטה או לייאאוט של מוצרים מוכרים כמו Airbnb, ChatGPT או Notion – עם אוטו-לייאאוט, גודל פונטים, צבעים, ספייסינג, פאדינג, hover states – כמעט כאילו זה הקובץ דיזיין המקורי? 🤯 אז בפוסט הקודם שיתפתי אתכם בפורמט החדש שאני עובד עליו - סרטונים על עיצוב מוצר, והכי כיף היה לשמוע שהוא באמת עזר ונתן ערך פרקטי. הפעם הסרטון הוא על פלאגין לפיגמה שעושה קסמים: הוא מאפשר להמיר כמעט כל מבנה HTML לפיגמה. קודם כל, אם אתם עובדים על קומפוננטות או דיזיין סיסטם עבור מוצר אצלכם בחברה, הפלאגין הזה מאפשר לקבל הצצה והשראה לאיך המעצבים הטובים בעולם בונים קומפוננטות. קחו לדוגמא Popover מChatGPT - תוכלו לראות בדיוק איך המעצבים בOpenAI מגיעים לרמת דיוק בטיפוגרפיה, צבעים וספייסינג ותוכלו ליישם את זה גם אצלכם במוצר. הפלאגין פותח גם דרך חדשה לעשות QA לדיזיין מול הפיתוח: אפשר לקחת פיצ'ר שעיצבתם, להחזיר אותו מתוך הפרונט חזרה לפיגמה, ולבדוק אם מה שפותח תואם אחד לאחד למה שעיצבתם בפיגמה.

מה זה מודל ה- HSL בכלל? במה הוא שונה מ- RGB?HSL במקום RGBולמה ממש כדאי לכם להשתמש בולמה ממש כדאי לכם להשתמש ב HSL במקום RGB?