טיפול בווריאציות של עיצוב

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

נקודת התחלה

נתחיל עם קובץ Figma שמכיל רכיב של כרטיס חדשות עם שלושה וריאנטים:

• hero-item הוא עבור מאמר החדשות החשוב ביותר
• article-item הוא עבור כתבה אופיינית.
• השדה audio-item מיועד למאמר שאתם מאזינים לו, במקום למאמר

העתקת דוגמה של Figma

כדוגמה במדריך הזה, נשתמש בקובץ Figma קיים. כדאי לוודא אתם מחוברים לחשבון Figma.

1. מורידים את HelloNews.fig למחשב.

2. ב-Figma, נכנסים לדפדפן הקבצים. בצד שמאל, מעבירים את העכבר מעל טיוטות. יופיע סמל + - לוחצים על הסמל + ואז על ייבוא. בוחרים בקובץ HelloNews.fig שהורדתם. הפעולה עשויה להימשך בין 10 שניות לדקה.

   

3. פותחים את הקובץ המיובא ב-Figma.

יצירת חבילה של ממשק משתמש

הפלאגין Relay for Figma מוסיף מידע לרכיב שלנו, כדי שנוכל עובדים עם המפתחים שלנו שישתמשו ברכיב שלנו בקוד שלהם.

1. פותחים את הפלאגין Relay for Figma בקובץ (בסרגל התפריטים: Plugins > Relay) ל-Figma). לוחצים על שנתחיל?.

2. בוחרים את הרכיב ולוחצים על Create UI Package.

   

3. לאחר שנבחרה חבילת ממשק המשתמש, מוסיפים תיאור לתיבת הסיכום. עבור לדוגמה: 'רכיב כרטיס חדשות שמטרתו להציג פריטים חדשותיים ברשימה'.

   

שמירת גרסה בעלת שם

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

1. פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.
2. לוחצים על שיתוף עם המפתח.
3. במסך שיתוף עם המפתח, אפשר להזין שם ותיאור חדשים בקטע שמירת היסטוריית הגרסאות.

4. לוחצים על שמירה.

   כותרת לדוגמה: כרטיס חדש ראשוני

   תיאור לדוגמה: איטרציה ראשונה של הכתבות החדשותיות

הורדת פרויקט של Android Studio

כחלק מ-Android Studio במדריך הזה, נשתמש במודל מוגדר מראש פרויקט Android Studio. הפרויקט הזה מכיל אפליקציה שמציגה כתבות חדשותיות בפורמט טקסט פשוט.

1. מורידים את קובץ HelloNews.zip לדוגמה.
2. לוחצים לחיצה כפולה על הקובץ כדי לפתוח אותו. הפעולה הזו תיצור תיקייה בשם HelloNews. מעבירים אותו לתיקיית הבית.
3. חוזרים אל Android Studio. עוברים אל קובץ > פתיחה, ניווט לבית בוחרים באפשרות HelloNews ולוחצים על Open (פתיחה).
4. כשתפתחו את הפרויקט, תוצג ב-Android Studio שאלה אם אתם סומכים על פרויקט. לוחצים על Trust Project.

ייבוא אל Android Studio

עכשיו נייבא את רכיב Figma לפרויקט.

1. בחזרה ב-Figma, מעתיקים את כתובת ה-URL של קובץ Figma של המדריך לכרטיס החדשות. אנחנו להשתמש בכתובת ה-URL הזו כדי לייבא את הרכיבים שלנו. בפינה השמאלית העליונה של Figma, לוחצים על הלחצן Share (שיתוף). בתיבת הדו-שיח שנפתחת, לוחצים על העתקת הקישור.

   

2. צריך לעבור לפרויקט HelloNews ב-Android Studio. עוברים אל קובץ > חדש > יבא UI Packages... בסרגל התפריטים של Android Studio.

   

3. מדביקים את כתובת ה-URL של קובץ ה-Figma ולוחצים על הבא.

   

   

   1. בסיום האחזור של הקובץ (הפעולה עשויה להימשך זמן מה), לוחצים על סיום.

   

4. לוחצים על כדי לבנות את הפרויקט. הפעולה עשויה להימשך דקה בערך.

   

תצוגה מקדימה של האפליקציה רכיב

1. בתצוגת Android, פותחים את app/java/com/example/hellonews/ui/home/HomeScreen.kt, תופיע תצוגה מקדימה של האפליקציה, שמציגה כמה כתבות בפורמט טקסט פשוט, עם סיפורים בדפוס מעל סיפורים באודיו.

   

2. אפשר לפתוח את app/java (generated)/com/example/hellonews/newscard/NewsCard.kt. הזה הוא הקוד שנוצר ב-Jetpack פיתוח נייטיב עבור רכיב ה-Figma. מתוך בתצוגה מקדימה, אנחנו יכולים לראות ששלוש וריאציות של הרכיב NewsCard תורגם מ-Figma לקוד. בואו נבחן את הקוד לעומק.

   

3. ה-enum View מאפשר לנו לבחור באיזה וריאנט להשתמש בשביל הרכיב הזה. השם של ה-enum והערכים שלו נגזרים מהווריאנטים של רכיב Figma. השדה הזה משמש בפרמטר view בNewsCard שלנו קומפוזבילי.

   

4. התוכן הקומפוזבילי NewsCard נוצר מחבילת ממשק המשתמש. הוא כולל פרמטר מסוג View, שמגדיר את הווריאנט של כרטיס החדשות כ- ליצור מופע של מכונה וירטואלית.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   

השלב הבא

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

פרמטרים של תוכן

בקטע הזה נוסיף פרמטרים של תוכן לרכיב NewsCard.

מומלץ עבורך

• הערה: טקסט הקישור מוצג כאשר JavaScript מושבת
• פרמטרים של תוכן
• גלילה
• שימוש בתכונה 'כתיבה' בתצוגות מפורטות