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

ב-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. לוחצים על לחצן ליצירת פרויקט כדי לבנות את הפרויקט. הפעולה עשויה להימשך דקה בערך.

    לחצן ה-build בסרגל הכלים

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

  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 לקוד. בואו נבחן את הקוד לעומק.

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

    משתנים ב-Figma וב-View enum תואמת
  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.