การจัดการตัวแปรการออกแบบ

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

จุดเริ่มต้น

เราจะเริ่มด้วยไฟล์ Figma ที่มีคอมโพเนนต์ News Card ที่มี ตัวแปร:

• hero-item คือสําหรับบทความข่าวที่สำคัญที่สุด
• article-item มีไว้สำหรับบทความทั่วไป
• audio-item มีไว้สำหรับบทความที่คุณฟังแทนการอ่าน

คัดลอกตัวอย่าง Figma

เราจะใช้ไฟล์ Figma ที่มีอยู่เป็นตัวอย่างในบทแนะนำนี้ ตรวจสอบว่า คุณเข้าสู่ระบบบัญชี Figma

1. ดาวน์โหลด HelloNews.fig ลงในคอมพิวเตอร์

2. ใน Figma ให้ไปที่โปรแกรมเรียกดูไฟล์ ที่ด้านซ้ายมือ ให้วางเมาส์เหนือ ฉบับร่าง ไอคอน + จะปรากฏขึ้น ให้คลิกไอคอน + จากนั้นคลิกนำเข้า เลือกไฟล์ HelloNews.fig ที่คุณเพิ่งดาวน์โหลดไป อาจใช้เวลา ตั้งแต่ 10 วินาทีถึง 1 นาที

   

3. เปิดไฟล์ที่นำเข้าใน Figma

สร้างแพ็กเกจ UI

ปลั๊กอิน Relay for Figma จะเพิ่มข้อมูลเพิ่มเติมลงในคอมโพเนนต์ เราจึง ทำงานร่วมกับนักพัฒนาซอฟต์แวร์ซึ่งจะใช้คอมโพเนนต์ของเราในโค้ดของตน

1. เปิดปลั๊กอิน Relay for Figma ในไฟล์ (ในแถบเมนู: Plugins > Relay) สำหรับ Figma) คลิกเริ่มต้นใช้งาน

2. เลือกคอมโพเนนต์และคลิกสร้างแพ็กเกจ UI

   

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

   วันที่

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

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

เมื่อคุณสร้างแพ็กเกจ UI แล้ว ให้เตรียมคอมโพเนนต์เพื่อแชร์กับทีมพัฒนา

1. เปิดปลั๊กอิน Figma Relay หากยังไม่ได้เปิด
2. คลิกแชร์กับนักพัฒนาซอฟต์แวร์
3. จากหน้าจอแชร์กับนักพัฒนาซอฟต์แวร์ คุณสามารถป้อนชื่อและคำอธิบายเวอร์ชันใหม่ในส่วนบันทึกประวัติเวอร์ชัน

4. คลิกบันทึก

   ตัวอย่างชื่อ: บัตรใหม่เริ่มต้น

   ตัวอย่างคำอธิบาย: การทำซ้ำรายการในบทความข่าวเป็นครั้งแรก

ดาวน์โหลดโปรเจ็กต์ Android Studio

ในส่วน Android Studio ของบทแนะนำนี้ เราจะใช้ โปรเจ็กต์ Android Studio โปรเจ็กต์นี้มีแอปที่แสดงบทความข่าว ในรูปแบบข้อความธรรมดา

1. ดาวน์โหลดตัวอย่างไฟล์ HelloNews.zip
2. ดับเบิลคลิกไฟล์เพื่อคลายการบีบอัดไฟล์ ซึ่งจะสร้างโฟลเดอร์ชื่อ สวัสดีข่าวสาร ให้ย้ายไปไว้ในโฟลเดอร์หลัก
3. กลับไปที่ Android Studio ไปที่ไฟล์ > เปิด เพื่อไปยังส่วนต่างๆ ของบ้าน ให้เลือก HelloNews แล้วคลิกเปิด
4. เมื่อเปิดโปรเจ็กต์ Android Studio จะถามคุณว่าคุณเชื่อถือ คลิกเชื่อถือโปรเจ็กต์

นำเข้าไปยัง Android Studio

มานำเข้าคอมโพเนนต์ Figma ลงในโปรเจ็กต์กัน

1. กลับไปที่ Figma ให้คัดลอก URL ของไฟล์ Figma สำหรับบทแนะนำสำหรับ News Card เราจะ ใช้ URL นี้เพื่อนำเข้าคอมโพเนนต์ของเรา ที่มุมขวาบนของ Figma คลิกปุ่มแชร์ ในกล่องโต้ตอบที่เปิดขึ้น ให้คลิก คัดลอกลิงก์

   

2. เปลี่ยนไปใช้โปรเจ็กต์ HelloNews ใน Android Studio ไปที่ไฟล์ > ใหม่ > นำเข้า แพ็กเกจ UI... จากแถบเมนูของ Android Studio

   

3. วาง URL ของไฟล์ Figma แล้วคลิก Next

   วันที่

   หมายเหตุ: หากไม่มี URL ของ Figma ให้ทำขั้นตอนที่ 1 ซ้ำและกลับมาที่ กล่องโต้ตอบนี้
   หมายเหตุ: หากคุณเห็นพรอมต์ Keychain ให้ป้อนรหัสผ่านและคลิก Allow

   วันที่

   หมายเหตุ: หากคุณเห็นกล่องโต้ตอบเกี่ยวกับโทเค็นเพื่อการเข้าถึง Figma ให้ทำซ้ำ วิธีการตั้งค่าโทเค็นเพื่อการเข้าถึง Figma ในการติดตั้ง
   1. เมื่อดึงข้อมูลไฟล์เสร็จแล้ว (ซึ่งอาจใช้เวลาสักครู่) ให้คลิก Finish

   

4. คลิก เพื่อสร้างโปรเจ็กต์ อาจใช้เวลาประมาณ 1 นาที

   วันที่

   หมายเหตุ: คลิกแท็บสร้างที่ด้านล่างของแอปเพื่อดูบิลด์ ผลลัพธ์

ดูตัวอย่างแอปและ ส่วนประกอบ

1. ในมุมมอง Android ให้เปิด app/java/com/example/hellonews/ui/home/HomeScreen.kt, คุณจะเห็นตัวอย่างของแอป ซึ่งแสดงบทความข่าวหลายรายการใน รูปแบบข้อความธรรมดา พร้อมสิ่งพิมพ์เรื่องราวด้านบนเรื่องราวเสียง

   

2. เปิด app/java (generated)/com/example/hellonews/newscard/NewsCard.kt ช่วงเวลานี้ คือโค้ด Jetpack Compose สำหรับคอมโพเนนต์ Figma ของเรา จาก เราจะเห็นว่าตัวแปร 3 ตัวแปร ของคอมโพเนนต์ NewsCard ผ่านการแปลจาก Figma เป็นโค้ด มาดูรายละเอียดเกี่ยวกับโค้ดกัน

   

3. enum View ช่วยให้เราเลือกตัวแปรที่จะใช้กับคอมโพเนนต์นี้ได้ ชื่อของ enum และค่าของค่าได้มาจากตัวแปร คอมโพเนนต์ Figma ซึ่งจะใช้ในพารามิเตอร์ view ใน NewsCard Composable

   

4. NewsCard ที่ Composable สร้างขึ้นจากแพ็กเกจ UI ซึ่งประกอบด้วย พารามิเตอร์ประเภท 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