นักออกแบบมักจะสร้างต้นแบบการเปลี่ยนภาพใน Figma ด้วย Smart Animate และ Spring หรือ Bezier Ease นักพัฒนาจำเป็นต้องสร้างการเคลื่อนไหวนั้นขึ้นมาใหม่ใน React Figma จะไม่ส่งออกทรานซิชั่นเหล่านี้เป็นโค้ดแอนิเมชั่นที่ใช้งานได้ ดังนั้นงานจึงเป็นการแปล
เริ่มต้นด้วยการบันทึกสิ่งที่ต้นแบบทำ: สิ่งใดที่ทำให้เกิดการเปลี่ยนแปลง (แตะ โฮเวอร์ หลังจากหน่วงเวลา) เลเยอร์ใดที่เคลื่อนไหว และคุณสมบัติใดที่เปลี่ยนแปลง และเวลา (ระยะเวลาที่มีเส้นโค้งการค่อยๆ เปลี่ยน หรือสปริง) โหมดตรวจสอบและแผงต้นแบบจะแสดงค่าเหล่านี้
สำหรับกรณีทั่วไป เช่น การซีดจางหรือการเปลี่ยนสี การเปลี่ยน CSS ก็เพียงพอแล้ว สำหรับสปริง ท่าทาง การเปลี่ยนเค้าโครงที่ใช้ร่วมกัน และการเข้าหรือออกจากภาพเคลื่อนไหว ไลบรารีเช่น Motion (เดิมชื่อ Framer Motion) เป็นตัวเลือกทั่วไปใน React ใช้ค่าสปริงเดียวกันกับที่ผู้ออกแบบเลือก
บันทึกค่าเหล่านั้นเป็นโทเค็นการเคลื่อนไหว เพื่อให้การเปลี่ยนครั้งถัดไปใช้เวลาเท่ากัน Figma Animation to Spring Converter ฟรีของเราจะเปลี่ยน Figma การค่อยๆ เปลี่ยนให้เป็นการตั้งค่าสปริง เครื่องมือเข้ารหัส AI สามารถเร่งความเร็วนี้ได้ โดยเฉพาะเมื่อเชื่อมต่อกับเซิร์ฟเวอร์ MCP ของ Figma เพื่อให้สามารถอ่านบริบทการออกแบบได้
สำหรับส่วนประกอบที่มีหลายสถานะ เช่น ปุ่มที่มีการโหลด สำเร็จ และข้อผิดพลาด หรือโฟลว์การเริ่มต้นใช้งานแบบเคลื่อนไหว การสร้างใหม่ด้วยมือจะมีราคาแพง ExodeUI ซึ่งเราสร้างขึ้นช่วยให้คุณออกแบบส่วนประกอบนั้นได้เพียงครั้งเดียวและเล่นใน React ด้วยแพ็คเกจ exodeui npm โดยควบคุมส่วนประกอบนั้นด้วยอินพุตและเหตุการณ์จากโค้ดของคุณ