พารามิเตอร์เนื้อหา

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

เพิ่มพารามิเตอร์เนื้อหา

1. ในไฟล์ Figma ให้เลือกคอมโพเนนต์และเปิดปลั๊กอิน Relay for Figma (Plugins > Relay for Figma)

   

2. ในหน้าต่าง Figma หลัก ให้เลือกเลเยอร์ Title ด้วย ⌘ + click บน Mac หรือ Ctrl + คลิก บน Windows และ Linux จากนั้นคลิก + ถัดไปในปลั๊กอิน ไปที่ "พารามิเตอร์" แล้วเลือกเนื้อหาข้อความเพื่อเพิ่มพารามิเตอร์สำหรับเลเยอร์

   

3. หากต้องการเปลี่ยนชื่อพารามิเตอร์เนื้อหาข้อความชื่อ ให้ป้อนใน ชื่อ ป้อนชื่อสำหรับบทแนะนำนี้

   

   นอกจากการแก้ไขชื่อแล้ว คุณยังสามารถเลือกประเภทพร็อพเพอร์ตี้อื่นๆ หรือเพิ่ม เพื่อสร้างความคิดเห็นในโค้ด ให้ทำงานร่วมกับนักพัฒนาซอฟต์แวร์เพื่อค้นหา รูปแบบการตั้งชื่อที่เหมาะสมที่สุด ชื่อของพารามิเตอร์เนื้อหาจะแปลเป็น ชื่อของพารามิเตอร์ใน Composable ที่สร้างขึ้น

บันทึกเวอร์ชันที่มีชื่อ

เรามาทำเครื่องหมายเวอร์ชันนี้ว่าพร้อมนำเข้าไปยังโค้ดกัน

1. เปิดปลั๊กอิน Figma Relay หากยังไม่ได้เปิด
2. คลิกแชร์กับนักพัฒนาซอฟต์แวร์

3. ในหน้าจอแชร์กับนักพัฒนาซอฟต์แวร์ ให้ป้อนชื่อและคำอธิบายเวอร์ชัน

   ตัวอย่างชื่อ: Hello World Card V3

   ตัวอย่างคำอธิบาย: พารามิเตอร์ที่เพิ่ม

อัปเดตคอมโพเนนต์ใน Android Studio

มาอัปเดตคอมโพเนนต์ใน Android Studio กัน

1. ใน Android Studio ให้ตรวจสอบว่าหน้าต่างเครื่องมือโปรเจ็กต์อยู่ในมุมมอง Android จากนั้นคลิกขวาที่ app/ui-packages/hello_card/ แล้วคลิก อัปเดต UI แพ็กเกจ

   

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

   

   หากเปิด app/java/com/example/hellofigma/hellocard/HelloCard.kt คุณจะ โปรดสังเกตว่ามีการเพิ่มพารามิเตอร์: title ชื่อพารามิเตอร์คือ ชื่อพารามิเตอร์เนื้อหาที่เราระบุไว้ใน Figma

   

3. เปิด app/java/com/example/hellofigma/MainActivity.kt

4. เปลี่ยน 1 บรรทัดในชั้นเรียน MainActivity เพื่อเพิ่มค่าให้กับ title พารามิเตอร์:

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

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

6. โปรดสร้างโปรเจ็กต์อีกครั้ง และดูคอมโพเนนต์ที่อัปเดตในตัวอย่าง หมายเหตุ ค่าพารามิเตอร์ใหม่จะแสดงได้แล้ว

   

7. เรียกใช้แอปเพื่อดูการอัปเดตแบบเดียวกันในโปรแกรมจำลอง

   ไชโย! คุณได้เรียนรู้พื้นฐานเกี่ยวกับเวิร์กโฟลว์ Relay แล้ว

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

บทแนะนำพื้นฐานก็มีเพียงเท่านี้ แม้ว่าคุณจะเห็นคุณลักษณะมากมายของ เวิร์กโฟลว์ Relay ยังมีฟีเจอร์อื่นๆ ให้ใช้งาน หากคุณ ที่สนใจจะเรียนรู้วิธีใช้ฟีเจอร์ต่างๆ เช่น ตัวแฮนเดิลการโต้ตอบ การทำงาน ด้วยคอมโพเนนต์ที่มี Figma หลายรูปแบบและอื่นๆ อีกมากมาย ให้ข้ามไปที่ บทแนะนำขั้นสูง!