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

ใน 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

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

    วันที่ ช่องสรุปบนปลั๊กอิน

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

เมื่อคุณสร้างแพ็กเกจ 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

    ตัวเลือกนำเข้าแพ็กเกจ UI... ในเมนูไฟล์
  3. วาง URL ของไฟล์ Figma แล้วคลิก Next

    วันที่ กล่องโต้ตอบการนำเข้าแพ็กเกจ UI
    วันที่ กล่องโต้ตอบระบบ Keychain
    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

    รายละเอียดปลีกย่อยใน Figma และ View enum ที่เกี่ยวข้อง
  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