แปลงการออกแบบเป็นโค้ดใน Android Studio

นำเข้าการออกแบบจาก Figma

ตอนนี้ เราจะรวมแพ็กเกจ UI ที่สร้างใน Figma เข้ากับ โปรเจ็กต์ Android Studio หากต้องการรวมแพ็กเกจ UI ให้คัดลอก URL การแชร์ที่ ที่เราสร้างในส่วนก่อนหน้านี้ลงในวิซาร์ดการนำเข้าของ Android Studio

1. ดาวน์โหลดไฟล์ ZIP ของโปรเจ็กต์ Android Studio ที่กำหนดค่าล่วงหน้า (ซึ่งเป็นโปรเจ็กต์เดียวกับในหน้า Install Relay)

2. ดับเบิลคลิกไฟล์เพื่อคลายการบีบอัดไฟล์ ซึ่งจะสร้างโฟลเดอร์ชื่อ HelloFigma ย้ายไปไว้ในโฟลเดอร์หลัก

3. กลับไปที่ Android Studio ไปที่ไฟล์ > เปิด เพื่อไปยังส่วนต่างๆ ของบ้าน ให้เลือก HelloFigma แล้วคลิก Open

4. เมื่อเปิดโปรเจ็กต์ Android Studio อาจถามว่าคุณเชื่อถือ คลิกเชื่อถือโปรเจ็กต์

5. ใน Android Studio ให้เลือกไฟล์ > ใหม่ > นำเข้าแพ็กเกจ UI...

   

6. วาง URL ของไฟล์ Figma ในกล่องโต้ตอบ "นำเข้าแพ็กเกจ UI" แล้วคลิก ถัดไป

   วันที่

   วันที่

7. รอให้ไฟล์ดาวน์โหลด เมื่อดาวน์โหลดเรียบร้อยแล้ว คอมโพเนนต์ แสดงตัวอย่าง คลิกสร้าง

   

   โปรดสังเกตว่ามีการเพิ่มไฟล์ใหม่ลงในโปรเจ็กต์ ไฟล์เหล่านี้ควรเป็น มุ่งมั่นที่จะควบคุมแหล่งที่มาเป็นส่วนหนึ่งของโปรเจ็กต์ของคุณ ในมุมมอง Android ของ คุณจะเห็นข้อมูลต่อไปนี้ในโปรเจ็กต์

   

   • app/ui-packages/hello_card/*
     ชิ้นงานแหล่งที่มาทั้งหมดต้องใช้เพื่ออธิบายคอมโพเนนต์ในโค้ด เหล่านี้ จะใช้สำหรับการสร้างโค้ดในขั้นตอนการสร้าง

   • app/ui-packages/hello_card/hello_card.json
     ไฟล์ JSON ซึ่งมีคำจำกัดความของคอมโพเนนต์ (ได้แก่ เลย์เอาต์และคุณสมบัติอื่นๆ)

   • app/ui-packages/hello_card/fonts/*
     ไฟล์แบบอักษรที่จำเป็นต่อการรองรับคอมโพเนนต์ใน Jetpack Compose

   • app/ui-packages/hello_card/*.png หรือ *.jpeg
     ชิ้นงานรูปภาพที่จําเป็นเพื่อสนับสนุนคอมโพเนนต์

   • app/ui-packages/hello_card/VERSION.txt
     เวอร์ชันของปลั๊กอิน Relay for Android Studio ที่ใช้ในการนำเข้า UI แพ็กเกจ

   • app/ui-packages/hello_card/config.json
     ธีมที่ใช้สำหรับการแสดงตัวอย่าง

สร้างและ สร้างโค้ด

1. คลิก เพื่อสร้างโปรเจ็กต์

   

2. หากต้องการดูผลลัพธ์ของบิลด์ ให้คลิกแท็บสร้าง

   วันที่

3. เพิ่มโค้ดที่สร้างขึ้นลงในโปรเจ็กต์แล้ว เนื่องจากโค้ดนี้สร้างขึ้น ทรัพยากรดังกล่าวไม่จำเป็นต่อการควบคุมแหล่งที่มาเป็นส่วนหนึ่งของโปรเจ็กต์ของคุณ ใน มุมมอง Android ของโปรเจ็กต์ คุณจะดูสิ่งต่อไปนี้ได้

   

   • app/java (generated)/com/example/hellofigma/hellocard
     โค้ดและแบบอักษรใน Jetpack Compose แล้ว

   • app/java (generated)/com/google/relay/compose
     โค้ดรันไทม์ที่ใช้ร่วมกันซึ่งใช้ในแพ็กเกจ UI ทั้งหมด

4. เปิด app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt นี่คือฟังก์ชัน Jetpack Compose สำหรับคอมโพเนนต์ Figma คุณ ก็สามารถแสดงตัวอย่างคอมโพเนนต์ได้

   ตอนนี้เลย์เอาต์ เนื้อหา และข้อมูลการจัดรูปแบบได้รับการโอนจาก Figma แล้ว เพื่อเขียนโค้ด

   

   ในโค้ด ระบบจะแปลสรุปที่เพิ่มลงใน Figma ไปยังความคิดเห็นด้านบน Composable ที่สร้างขึ้น

    /**
    * 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. ที่เลื่อนลงไปด้านล่างในไฟล์เดียวกัน ในตัวอย่างของ Composable ให้เปลี่ยน 1 บรรทัดดังนี้

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

4. ตรวจสอบว่าได้เลือกอุปกรณ์ในแถบเครื่องมือแล้ว

5. เรียกใช้โปรเจ็กต์โดยคลิก ▶ ในแถบเครื่องมือ

   

   โปรแกรมจำลองจะเปิดเครื่อง โปรเจ็กต์จะสร้างขึ้น และแอปของคุณจะเริ่มต้น

   

   ยินดีด้วย คุณได้ติดตั้งใช้งาน Figma แรกเรียบร้อยแล้ว ลงในแอป Jetpack Compose!

ขั้นตอนถัดไป

สร้างและเผยแพร่การอัปเดตการออกแบบ

ตอนนี้คุณมีตัวอย่างการทำงานตั้งแต่ต้นจนจบแล้ว มาดูวิธีอัปเดตฟังก์ชัน ดีไซน์ดั้งเดิม และสร้างโค้ดของเราใหม่