המרת העיצובים לקוד ב-Android Studio

ייבוא עיצוב מ-Figma

עכשיו נשלב את חבילת ממשק המשתמש שנוצרה ב-Figma פרויקט Android Studio. כדי לשלב את חבילת ממשק המשתמש, מעתיקים את כתובת ה-URL של השיתוף ש שיצרנו בקטע הקודם באשף הייבוא של Android Studio.

1. הורדת קובץ ה-ZIP המוגדר מראש של פרויקט Android Studio (זהו אותו פרויקט כמו בדף Install Relay).

2. לוחצים לחיצה כפולה על הקובץ כדי לפתוח את הדחיסה, והפעולה הזו יוצרת תיקייה בשם HelloFigma. מעבירים אותו לתיקיית הבית.

3. חוזרים אל Android Studio. עוברים אל קובץ > פתיחה, ניווט לבית בוחרים בתיקייה HelloFigma ולוחצים על Open.

4. כשתפתחו את הפרויקט, יכול להיות שמערכת Android Studio תשאל אתכם אם אתם סומכים על פרויקט. לוחצים על Trust Project.

5. ב-Android Studio, בוחרים באפשרות File > חדש > ייבוא חבילות של ממשק משתמש...

   

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

   

   

7. ממתינים להורדת הקובץ. לאחר שההורדה הושלמה, הרכיב מוצגת תצוגה מקדימה. לוחצים על יצירה.

   

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

   

   • app/ui-packages/hello_card/*
     כל נכסי המקור שנדרשים כדי לתאר את הרכיב בקוד. האלה משמשים ליצירת קוד בשלב ה-build.

   • app/ui-packages/hello_card/hello_card.json
     קובץ ה-JSON שמכיל את ההגדרה של הרכיב (כולל הפריסה שלו ומאפיינים אחרים).

   • app/ui-packages/hello_card/fonts/*
     קובצי גופנים שנדרשים לתמיכה ברכיב ב-Jetpack פיתוח נייטיב.

   • app/ui-packages/hello_card/*.png או *.jpeg
     כל נכסי התמונות שנדרשים לתמיכה ברכיב.

   • app/ui-packages/hello_card/VERSION.txt
     גרסת הפלאגין של Relay for Android Studio ששימשה לייבוא ממשק המשתמש חבילה.

   • app/ui-packages/hello_card/config.json
     העיצוב שמשמש לתצוגות מקדימות.

בנייה יצירת קוד

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

   

2. כדי לראות את תוצאת ה-build, לוחצים על הכרטיסייה Build.

   

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

   

   • app/java (generated)/com/example/hellofigma/hellocard
     קוד וגופנים שנוצרו ב-Jetpack פיתוח נייטיב.

   • app/java (generated)/com/google/relay/compose
     קוד זמן ריצה משותף שנמצא בשימוש בכל החבילות של ממשק המשתמש.

4. פתיחת app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt. זו הפונקציה 'Jetpack פיתוח נייטיב' שנוצרה עבור רכיב ה-Figma. שלך יכולים גם לצפות בתצוגה מקדימה של הרכיב.

   הפריסה, הנכסים ופרטי העיצוב מועברים עכשיו מ-Figma לקוד.

   

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

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

שילוב הרכיב & הפעלת האפליקציה

עכשיו נשלב את הרכיב בפעילות הראשית.

1. ב-app/java/com/example/hellofigma/MainActivity.kt, הוספה לייבוא בחלק העליון של הדף:

   import com.example.hellofigma.hellocard.HelloCard
   

2. בהמשך הקובץ, משנים את הקוד הבא כיתה אחת (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) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

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

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. מוודאים שמכשיר נבחר בסרגל הכלים.

5. כדי להפעיל את הפרויקט, לוחצים על ► בסרגל הכלים.

   

   האמולטור יופעל, המערכת תבנה את הפרויקט והאפליקציה תתחיל.

   

   מזל טוב! שילבתם בהצלחה את Figma הראשון רכיב לאפליקציית Jetpack Compose!

השלב הבא

מבצעים ומפיצים עדכוני עיצוב

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