นำเข้าเฟรม Figma ไปยัง WordPress ด้วย Page Builder Sandwich

Page Builder Sandwich Pro แปลง เฟรม Figma ให้เป็นหน้า WordPress ที่สามารถแก้ไขได้ ไซต์จะสื่อสารกับ Figma ด้วย บัญชี Figma ของคุณเอง โดยใช้โทเค็นการเข้าถึงส่วนบุคคลที่คุณสร้างขึ้น ไม่มีการส่งผ่านการออกแบบหรือโทเค็นไปยัง Zinn Digital®

เชื่อมต่อ Figma (ครั้งเดียว ในฐานะผู้ดูแลระบบ)

1. ใน Figma ให้เปิด Settings → Security → Personal access tokens และสร้างโทเค็นที่มีขอบเขต File content: read
2. ใน wp-admin ไปที่ Page Builder Sandwich → Import from other builders and Figma → Import from Figma วางโทเค็นแล้วกด Connect Figma

โทเค็นจะได้รับการตรวจสอบกับ Figma จัดเก็บแบบ เข้ารหัส และจะไม่แสดงให้เห็นอีก (ยกเว้นอักขระสี่ตัวสุดท้าย) Disconnect จะลบโทเค็นออก บนบรรทัดคำสั่ง: echo <token> | wp pbs importers figma-token set (โทเค็นจะถูกอ่านจากอินพุตมาตรฐาน ดังนั้นจึงไม่ถูกบันทึกไว้ในประวัติเชลล์ของคุณ)

นำเข้าเฟรม

1. ใน Figma ให้คลิก หนึ่งเฟรม คลิกขวาแล้วเลือก Copy/Paste as → Copy link to selection
2. วางลิงก์ลงใน Figma frame link แล้วกด Import the frame หน้าฉบับร่างใหม่จะถูกสร้างขึ้นตามชื่อของเฟรม

วิธีการแปลงการออกแบบ

• Auto layout จะเปลี่ยนเป็นแถวและคอลัมน์แบบ flex (และตารางสำหรับ grid auto layout) พร้อมระยะห่าง ช่องว่างภายใน และการจัดแนวแบบเดียวกัน เฟรมที่มีการจัดวางอย่างอิสระจะถูกซ้อนตามลำดับการอ่าน และรายงานจะแจ้งให้ทราบเมื่อมีเลเยอร์ซ้อนทับกัน
• เฟรมของหน้าที่สร้างขึ้นจากแถบแบบเต็มความกว้างจะกลายเป็นหนึ่งส่วนแบบเต็มความกว้างต่อหนึ่งแถบ
• ข้อความ จะคงฟอนต์ ขนาด น้ำหนัก ความสูงของบรรทัด ระยะห่างระหว่างตัวอักษร ตัวพิมพ์ใหญ่-เล็ก การจัดแนว และสีไว้ ข้อความขนาดใหญ่จะกลายเป็นหัวเรื่อง โดยยังคงข้อความตัวหนา ตัวเอียง และลิงก์ไว้ตามเดิม
• การเติมสี เส้นขอบ รัศมีมุม และเงาตกกระทบ จะถูกนำมาใช้ทั้งหมด รวมถึงการไล่ระดับสี
• รูปภาพ จะถูกคัดลอกลงในคลังสื่อของคุณ และ เวกเตอร์อาร์ต (ไอคอน ภาพประกอบ) จะถูกเรนเดอร์โดย Figma และคัดลอกเป็นรูปภาพ (สูงสุด 200 ภาพต่อการนำเข้าหนึ่งครั้ง) การนำเข้าเฟรมเดิมอีกครั้งจะใช้สำเนาที่มีอยู่ซ้ำ
• เฟรมขนาดเล็กที่มีการเติมสี มุมโค้งมน และป้ายกำกับสั้นๆ หนึ่งรายการ (หรือเลเยอร์ที่ชื่อ "button") จะกลายเป็นบล็อก Button

บนโทรศัพท์ แถวของรายการที่มีความกว้างคงที่จะซ้อนกันเป็นคอลัมน์เดียว เนื่องจากเฟรม Figma ถูกวาดขึ้นที่ความกว้างเดียว

จากบรรทัดคำสั่ง: wp pbs importers figma <frame link>