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

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

הוספת פרמטר של תוכן

1. בקובץ Figma, בוחרים את הרכיב ופותחים את הפלאגין Relay for Figma (Plugins > Relay for Figma)

   

2. בחלון הראשי של Figma, בוחרים בשכבה כותרת ולוחצים על ⌘ + לחיצה ב-Mac או Ctrl + לחיצה ב-Windows וב-Linux. לאחר מכן, בפלאגין, לוחצים על + הבא. ל-'Parameters' (פרמטרים) ובוחרים באפשרות text-content כדי להוסיף פרמטר לשכבה.

   

3. כדי לשנות את השם של פרמטר התוכן של טקסט הכותרת, מזינים אותו בשדה Name. למדריך הזה, מזינים כותרת.

   

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

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

עכשיו נסמן את הגרסה הזו כמוכנה לייבוא אל הקוד.

1. פותחים את הפלאגין של Figma Relay, אם הוא עדיין לא פתוח.
2. לוחצים על שיתוף עם המפתח.

3. במסך שיתוף עם המפתח, מזינים שם ותיאור של הגרסה.

   כותרת לדוגמה: כרטיס Hello World Card V3

   תיאור לדוגמה: פרמטרים שנוספו

עדכון הרכיב ב-Android Studio

עכשיו נעדכן את הרכיב ב-Android Studio.

1. ב-Android Studio, מוודאים שהחלון של הכלי 'פרויקט' נמצא בתצוגת Android. לאחר מכן לוחצים לחיצה ימנית על app/ui-packages/hello_card/ ואז לוחצים על Update UI חבילה.

   

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

   

   אם תפתח את app/java/com/example/hellofigma/hellocard/HelloCard.kt, שהתווסף פרמטר: title. שם הפרמטר הוא שם פרמטר התוכן שצוין ב-Figma:

   

3. פתיחת app/java/com/example/hellofigma/MainActivity.kt.

4. כדי להוסיף ערך למחלקה title, צריך לשנות שורה אחת במחלקה MainActivity :

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

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

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

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

   

7. מפעילים את האפליקציה כדי לראות את אותם עדכונים באמולטור.

   הידד! למדתם את היסודות של תהליך העבודה של שרת הממסר.

השלב הבא

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