ติดตั้ง Relay

รีเลย์ประกอบด้วย 3 ส่วน ดังนี้

1. Relay สำหรับปลั๊กอิน Figma
2. Relay สำหรับปลั๊กอิน Android Studio
3. ปลั๊กอิน Relay Gradle

สิ่งที่ต้องมีก่อน

• คุณต้องลงชื่อเข้าใช้บัญชี Figma
• คุณได้ติดตั้ง Android Studio 2022.2.1 Flamingo ขึ้นไป
• คุณได้ติดตั้ง Java Runtime แล้ว
• คุณกำลังใช้ Jetpack Compose เวอร์ชัน 1.2 ขึ้นไป
• คุณใช้ปลั๊กอิน Gradle เวอร์ชัน 8.0 ขึ้นไป

หมายเหตุ: เอกสารประกอบนี้เขียนขึ้นโดยยึดตาม Flamingo และเวอร์ชัน 8.0 ปลั๊กอิน Android Gradle รายละเอียดอาจแตกต่างออกไปเล็กน้อยสำหรับเวอร์ชันใหม่

หมายเหตุ: เราจะถือว่าคุณมีองค์กร Figma Professional หรือองค์กร Figma ใบอนุญาต ฟีเจอร์บางอย่างของเราใช้ประวัติเวอร์ชันและทีม Library ซึ่งอาจไม่มีอยู่ในใบอนุญาต Starter

ติดตั้งปลั๊กอิน Relay สำหรับ Figma

ปลั๊กอิน Relay for Figma ช่วยให้ทุกคนที่ทำงานใน Figma สามารถใส่คำอธิบายประกอบ และแชร์กับนักพัฒนาซอฟต์แวร์ที่ใช้ Android Studio และ Jetpack Compose

ปลั๊กอิน Relay for Figma ได้รับการเผยแพร่ไปยังมาร์เก็ตเพลสปลั๊กอินชุมชนของ Figma วิธีติดตั้งปลั๊กอิน

1. ไปที่หน้าปลั๊กอิน Relay for Figma ใน Figma's เว็บไซต์ของคุณ

2. ที่ด้านขวาบนของหน้า ให้คลิกลองเลย

   

3. คุณอาจเห็นกล่องโต้ตอบที่ถามว่าคุณต้องการใช้ปลั๊กอินหรือไม่ ใน เลือกองค์กรของคุณ ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก องค์กรของคุณอาจ ปิดใช้ปลั๊กอินสาธารณะ ในกรณีนี้ ให้เลือกตัวเลือกทีมภายนอก

   

   ซึ่งจะเปิดไฟล์ Figma ที่มีหน้าข้อมูลปลั๊กอินแสดงอยู่ คลิก ... และเลือกบันทึกเพื่อให้แน่ใจว่าคุณจะใช้ปลั๊กอินซ้ำได้อย่างง่ายดาย

   

4. ตอนนี้ คลิกเรียกใช้

   คุณสามารถดูปลั๊กอินที่ทำงานอยู่บนผืนผ้าใบ Figma ได้ดังนี้

   

ติดตั้งปลั๊กอิน Relay สำหรับ Android Studio

ปลั๊กอิน Relay for Android Studio ช่วยให้นักพัฒนาซอฟต์แวร์ที่ทำงานใน Android Studio ได้ เพื่อนำเข้าการออกแบบที่มีคำอธิบายประกอบด้วยข้อมูลจุดประสงค์ในการออกแบบโดยใช้ ปลั๊กอิน Relay for Figma ปลั๊กอินได้รับการเผยแพร่ไปยังปลั๊กอิน Android Studio มาร์เก็ตเพลส วิธีติดตั้ง

หมายเหตุ: หากคุณใช้ Android Studio เป็นครั้งแรกและยังไม่ได้ติดตั้ง Android SDK หรือคุณเห็นหน้าจอต้อนรับสำหรับตั้งค่า Android SDK ให้ทำตาม ขั้นตอนเหล่านี้เพื่อตั้งค่า Android SDK

1. เปิด Android Studio
2. จากเมนูหลัก ให้ทำดังนี้
   • สำหรับ macOS ให้เลือก Android Studio > ค่ากำหนด
   • สำหรับ Windows และ Linux เลือก ไฟล์ > การตั้งค่า
3. เลือกปลั๊กอิน

4. เลือกแท็บ "มาร์เก็ตเพลส" จากนั้นค้นหา “Relay for Android Studio” และ เลือกปลั๊กอินที่เผยแพร่โดย Google ดังนี้

   

5. คลิกติดตั้ง

6. เมื่อติดตั้งเสร็จแล้ว ให้คลิกรีสตาร์ท IDE

7. หากต้องการยืนยันว่าติดตั้งสำเร็จแล้ว ให้เปิดค่ากำหนด หรือ การตั้งค่า จากนั้นไปที่ปลั๊กอิน คุณควรเห็น Relay สำหรับ Android Studio จะแสดงในส่วน "ติดตั้งแล้ว"

ติดตั้งปลั๊กอิน Relay Gradle

ปลั๊กอิน Relay Gradle ช่วยให้มั่นใจว่าการออกแบบใน Figma จะมีคำอธิบายประกอบด้วยการออกแบบ ข้อมูล Intent ที่ใช้ปลั๊กอิน Relay for Figma ได้รับการแปลงเป็น ระหว่างการสร้าง

ปลั๊กอิน Relay Gradle เผยแพร่ไปยัง Google Maven ซึ่งเป็นเซิร์ฟเวอร์ที่มี ปลั๊กอิน Gradle หลายๆ แบบ Android Studio จะเรียกใช้การดำเนินการ Gradle โดยค่าเริ่มต้น และ รวมถึงการดาวน์โหลดและติดตั้งทรัพยากร Dependency ที่ ข้อมูลอ้างอิงของโปรเจ็กต์

เพื่อให้ Android Studio และ Gradle เป็นส่วนขยายนั้น ต้องดาวน์โหลดและ ติดตั้งปลั๊กอิน Relay Gradle คุณต้องระบุปลั๊กอินเป็นทรัพยากร Dependency ในโปรเจ็กต์ของคุณ โดยเฉพาะในไฟล์ build.gradle ใน ไดเรกทอรี ซึ่งมักจะเป็นเดือนapp/build.gradle

ที่ด้านบนของไฟล์ app/build.gradle เป็นส่วนที่แสดง ปลั๊กอินที่ใช้งานอยู่ เพิ่มปลั๊กอิน Relay Gradle ในรายการนี้ และจัดการ Gradle และดาวน์โหลดและติดตั้ง เช่น

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.12'
}

นอกจากนี้ โปรดตรวจสอบว่าไฟล์ settings.gradle มีส่วนต่อไปนี้

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

หมายเหตุ: ใช้ปลั๊กอิน Relay Gradle เวอร์ชันล่าสุดเพื่อรับสิทธิ์เข้าถึง ล่าสุด

นอกจากนี้ คุณยังใช้โปรเจ็กต์ที่กําหนดค่าไว้ล่วงหน้าซึ่งมีการกําหนดค่าได้ ที่ระบุไว้ข้างต้น

ตั้งค่าการเข้าถึง Figma

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

1. เปิด Figma แล้วเข้าสู่ระบบ Figma
2. ไปที่โปรแกรมเรียกดูไฟล์

3. คลิกไอคอนบัญชีแล้วเลือกการตั้งค่า

   

4. เลื่อนลงไปที่ส่วนโทเค็นเพื่อการเข้าถึงส่วนบุคคล

5. ป้อนคำอธิบายโทเค็น เช่น "Relay" และพิมพ์ Return โทเค็นคือ ที่สร้างขึ้น คลิกคัดลอกโทเค็นนี้

   

6. ใน Android Studio ให้เลือกเครื่องมือ > จากเมนูหลัก การตั้งค่าการส่งต่อ

   

7. หากคุณเคยตั้งค่าโทเค็นเพื่อการเข้าถึง Figma ใน macOS ไว้ก่อนหน้านี้ คุณอาจเห็น ข้อความข้างล่าง กล่องโต้ตอบนี้ช่วยให้คุณทราบว่า Android Studio กำลังใช้ โทเค็นเพื่อการเข้าถึง Figma ที่มีอยู่ ป้อนรหัสผ่านและคลิกทุกครั้ง อนุญาต

   

8. วางโทเค็นเพื่อการเข้าถึง Figma ลงในอินพุตโทเค็นเพื่อการเข้าถึง Figma (ถ้า นี่ไม่ใช่การตั้งค่าโทเค็นเพื่อการเข้าถึง Figma เป็นครั้งแรก คุณอาจเห็น โทเค็นเพื่อการเข้าถึง Figma ที่มีอยู่)

   

9. คลิกตกลง

ดาวน์โหลดและตั้งค่าโปรเจ็กต์ที่กำหนดค่าล่วงหน้า

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

วิธีดาวน์โหลดและตั้งค่าโปรเจ็กต์ที่กำหนดค่าล่วงหน้า

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

หมายเหตุ: โปรเจ็กต์ที่กำหนดค่าล่วงหน้าต้องใช้ Android Studio Flamingo ขึ้นไป และ ปลั๊กอิน Android Gradle 8.0 และถือว่ามีการใช้เนื้อหาสำหรับการเขียนด้วย หากคุณต้องการ เมื่อต้องการใช้ Compose Material 3 ให้ทำตามคำแนะนำที่นี่เพื่อเพิ่ม ทรัพยากร Dependency สำหรับโปรเจ็กต์

การเรียกใช้โปรเจ็กต์ที่กำหนดค่าล่วงหน้า

เรียกใช้แอปในโปรแกรมจำลองหรืออุปกรณ์ คุณจะเห็นข้อความ "สวัสดี Android!" ใน หน้าจอว่างเปล่า

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

ตอนนี้เราพร้อมแล้วที่จะสร้างงานออกแบบแรกโดยใช้ Relay

บทแนะนำพื้นฐาน