แชร์ผ่าน


ส่วนประกอบที่รองรับโดยชุด UI

[บทความนี้เป็นคู่มือรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

สร้างแอปจากชุด UI สำหรับ Figma รองรับส่วนประกอบบางส่วน ในบทความนี้ คุณจะเรียนรู้เกี่ยวกับส่วนประกอบเหล่านี้

สำหรับข้อมูลล่าสุดเกี่ยวกับส่วนประกอบที่รองรับและดูตัวอย่างโดยละเอียด คุณสามารถไปที่หน้า ส่วนประกอบที่รองรับ ภายใน สร้างแอปจากชุด UI สำหรับ Figma

ข้อสำคัญ

อย่าเปลี่ยนชื่อส่วนประกอบหรือเปลี่ยนเลเยอร์ มิฉะนั้น ส่วนประกอบจะไม่แปลงคุณสมบัติใน Power Apps

ส่วนแบบเลื่อนได้

ส่วนแบบเลื่อนได้คือส่วนบนหน้าจอ หากเนื้อหาขยายออกไปนอกส่วน จะยังคงสามารถเข้าถึงได้เมื่อผู้ใช้เลื่อน

ส่วนแบบเลื่อนได้ภายในชุด UI มีให้เลือกสองรูปแบบ: โทรศัพท์ และ แท็บเล็ต

ฟอร์ม

ใช้ส่วนฟอร์มเมื่อคุณต้องการให้ผู้ใช้กรอกข้อมูลในฟิลด์และส่งข้อมูล

ใน Power Apps ส่วนนี้จะเป็นแบบเลื่อนได้

หน้าจอฟอร์มในรูปแบบเค้าโครงแท็บเล็ตและโทรศัพท์

  • วางเฉพาะส่วนประกอบการ์ดข้อมูลแนวตั้งหรือแนวนอนในส่วนฟอร์ม
  • อย่าคละการ์ดข้อมูลแนวตั้งและแนวนอน
  • อย่าใช้ส่วนประกอบพื้นฐานในเฟรมของฟอร์ม

คอนเทนเนอร์ (แนวตั้ง)

ใช้ส่วนคอนเทนเนอร์ (แนวตั้ง) เมื่อคุณต้องการให้เนื้อหาเลื่อน ตัวอย่างเช่น หากคุณต้องการส่วนของเนื้อหาคำอธิบายที่มีความยาว

เคล็ดลับ

คุณยังสามารถเพิ่มฟอร์มขนาดเล็กภายในส่วนคอนเทนเนอร์ (แนวตั้ง) ได้

คอนเทนเนอร์แนวตั้งในรูปแบบเค้าโครงแท็บเล็ตและโทรศัพท์

  • ใช้ส่วนประกอบพื้นฐานและฟอร์มในเฟรมของคอนเทนเนอร์
  • อย่าวางส่วนประกอบการ์ดแนวตั้งหรือแนวนอนในส่วนคอนเทนเนอร์ (แนวตั้ง)

การ์ดข้อมูลแนวตั้งและแนวนอน

การ์ดข้อมูล แนวตั้งและแนวนอนเป็นส่วนประกอบที่จัดเรียงตัวเองโดยอัตโนมัติในฟอร์ม

หมายเหตุ

ตรวจสอบให้แน่ใจว่าการ์ดข้อมูลทั้งหมดอยู่ในส่วนประกอบของฟอร์มโดยตรง ไม่สามารถใช้การ์ดข้อมูลนอกฟอร์ม

ส่วนหัวและตัวแบ่ง

ส่วนหัวและตัวแบ่งแนวนอน

การป้อนข้อความ ดรอปดาวน์ และกล่องคำสั่งผสม

การป้อนข้อความแนวนอน ดรอปดาวน์ และกล่องคำสั่งผสม

การสลับ กล่องกาเครื่องหมาย และปุ่มตัวเลือก

การสลับแนวนอน กล่องกาเครื่องหมาย และปุ่มตัวเลือก

แถบเลื่อน การให้คะแนน

แถบเลื่อนแนวนอน การให้คะแนน

ตัวเลือกวันที่

ตัวเลือกวันที่แนวนอน

กล่องรายการ

กล่องรายการแนวนอน

Rich Text

Rich Text แนวนอน

ตัวจับเวลา

จับเวลาแนวนอน

ขนาดส่วนประกอบ สถานะและชนิด

ขนาดปุ่ม

ขนาดปุ่ม

สถานะปุ่ม

สถานะปุ่ม

  • หากคุณต้องการปุ่มที่มีเส้นโครงร่าง ให้ตั้งค่าการลากเส้นไปที่กึ่งกลางใน Figma เนื่องจาก Power Apps จะแปลงการลากเส้นที่กึ่งกลางเท่านั้น

ขนาดป้ายชื่อ

ขนาดป้ายชื่อ

หมายเหตุ

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

ขนาดการป้อนข้อความ

ขนาดการป้อนข้อความ

สถานะการป้อนข้อความ

สถานะการป้อนข้อความ

ชนิดการป้อนข้อความ

ชนิดการป้อนข้อความ

ขนาดกล่องคำสั่งผสม

ขนาดกล่องคำสั่งผสม

สถานะกล่องคำสั่งผสม

สถานะกล่องคำสั่งผสม

ขนาดดรอปดาวน์

สถานะดรอปดาวน์

ขนาดกล่องกาเครื่องหมาย

ขนาดกล่องกาเครื่องหมาย

สถานะกล่องกาเครื่องหมาย

สถานะกล่องกาเครื่องหมาย

ขนาดปุ่มตัวเลือก

ขนาดปุ่มตัวเลือก

สถานะปุ่มตัวเลือก

สถานะปุ่มตัวเลือก

ชนิดปุ่มตัวเลือก

ชนิดปุ่มตัวเลือก

  • ทำให้ปุ่มตัวเลือกและข้อความทั้งหมดเป็นสีเดียวกัน เมื่อแปลงเป็นแอป Power Apps จะใช้สีของปุ่มตัวเลือกแรกสำหรับปุ่มที่เหลือทั้งหมด โดยจะไม่รู้จักสีอื่นๆ ที่คุณอาจเคยใช้

ขนาดการสลับ

ขนาดการสลับ

สถานะการสลับ

สถานะการสลับ

ชนิดการสลับ

ชนิดการสลับ

ขนาดตัวเลือกวันที่

ขนาดตัวเลือกวันที่

สถานะตัวเลือกวันที่

สถานะตัวเลือกวันที่

ชนิดตัวเลือกวันที่

ชนิดตัวเลือกวันที่

ขนาดแถบเลื่อน

ขนาดแถบเลื่อน

สถานะแถบเลื่อน

สถานะแถบเลื่อน

ชนิดแถบเลื่อน

ชนิดแถบเลื่อน

ขนาดการให้คะแนน

ขนาดการให้คะแนน

ขนาดการให้คะแนน

ขนาดการให้คะแนน

ชนิดของการให้คะแนน

ชนิดของการให้คะแนน

  • ทำให้ดาวทั้งหมดมีสีเดียวกันขณะที่ออกแบบใน Figma เมื่อแปลงเป็นแอป Power Apps จะใช้สีของดาวดวงแรกสำหรับดาวที่เหลือทั้งหมด โดยจะไม่รู้จักสีอื่นๆ ที่คุณอาจเคยใช้

ขนาดกล่องรายการ

ขนาดกล่องรายการ

สถานะกล่องรายการ

สถานะกล่องรายการ

ชนิดกล่องรายการ

ชนิดกล่องรายการ

ขนาด Rich Text

ขนาด Rich Text

สถานะ Rich Text

สถานะ Rich Text

ขนาดตัวจับเวลา

ขนาดตัวจับเวลา

สถานะตัวจับเวลา

สถานะตัวจับเวลา

เนื้อหาที่จะละเว้น

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

เนื้อหาที่จะละเว้น

รูปภาพและรูปสี่เหลี่ยมผืนผ้า

รูปภาพและรูปสี่เหลี่ยมผืนผ้าจะแสดงผลตามที่เป็นเมื่อการออกแบบถูกแปลงลงในแอป

รูปภาพ

รูปภาพ

รูปสี่เหลี่ยมผืนผ้า

รูปสี่เหลี่ยมผืนผ้า

  • ใช้เฉพาะรูปสี่เหลี่ยมผืนผ้ามุมเหลี่ยมเนื่องจาก Power Apps แปลงได้เฉพาะรูปสี่เหลี่ยมผืนผ้ามุมฉากเท่านั้น ใน Figma หมายความว่าต้องตั้งค่ารัศมีมุมเป็นศูนย์

ดูเพิ่มเติม