Languageไทย
เสาหลัก 02 · คู่มือการออกแบบการเคลื่อนไหว
Figma Motion: สิ่งที่ทำได้และทำไม่ได้ (และสิ่งที่จะใช้ในการผลิต)
Figma Motion เป็นวิธีที่เร็วที่สุดในการออกแบบการเคลื่อนไหวภายใน Figma ExodeUI ใช้สำหรับเวลาที่การเคลื่อนไหวนั้นต้องทำงานในผลิตภัณฑ์ โดยมีสถานะ ฟิสิกส์ และอินพุตจากผู้ใช้
What is Figma Motion: in ExodeUI?
Figma Motion คือโหมดแอนิเมชันในตัวของ Figma ซึ่งเปิดตัวในโอเพ่นเบต้าเมื่อวันที่ 24 มิถุนายน 2026 โดยจะเพิ่มไทม์ไลน์ให้กับเฟรมการออกแบบเพื่อให้คุณวางตำแหน่งคีย์เฟรม สเกล การหมุน สี และความทึบ จากนั้นส่งออกผลลัพธ์เป็น MP4, WebM, GIF, SVG แบบเคลื่อนไหว, Lottie หรือ dotLottie มันหยุดอยู่ที่ไฟล์ออกแบบ: ภาพเคลื่อนไหวที่ส่งออกไม่ได้รันผลิตภัณฑ์ของคุณด้วยตัวเอง และการเชื่อมโยงสถานะ อินพุต และข้อมูลยังคงต้องสร้างขึ้นในโค้ด ExodeUI เหมาะกว่าเมื่อการเคลื่อนไหวต้องทำงานในแอปจริงบนเว็บ iOS และ Android ซึ่งขับเคลื่อนโดยสถานะ ฟิสิกส์ และอินพุตจากผู้ใช้
สถาปัตยกรรมหลัก
เหตุใดวิศวกรและนักออกแบบจึงเลือก ExodeUI
Design, logic and motion in one file that runs inside your app.
ส่วนประกอบที่รันได้เทียบกับคลิปที่ส่งออก
เอาต์พุต ExodeUI เป็นไฟล์ .exode ที่รันไทม์เล่นในแอปของคุณ Figma Motion ส่งออกวิดีโอ, GIF, SVG หรือ Lottie ซึ่งเล่นภาพเคลื่อนไหวแต่ไม่มีสถานะแอปของคุณ
เครื่องสถานะเชื่อมต่อกับแอปของคุณ
โมเดลไม่ได้ใช้งาน กำลังโหลด สำเร็จ และข้อผิดพลาดตามสถานะที่มีการทริกเกอร์โค้ดของคุณ แทนที่จะเก็บทุกชุดค่าผสมไว้เป็นตัวแปร Figma
ฟิสิกส์ที่ตอบสนองต่ออินพุต
สปริงและโมเมนตัมต่อเนื่องทำงานในผลิตภัณฑ์สด ดังนั้นการลากหรือการเหวี่ยงจะดำเนินต่อไปด้วยความเร็วของผู้ใช้ ไม่ใช่เส้นโค้งคงที่
นำงาน Figma ของคุณมาด้วย
เฟรมจะมาพร้อมกับปลั๊กอิน ExodeUI Figma ดังนั้นคุณจึงออกแบบใน Figma และสร้างส่วนโต้ตอบใน ExodeUI
การประเมินวัตถุประสงค์
ExodeUI เปรียบเทียบกับอย่างไร Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- จัดส่งเป็นส่วนประกอบที่ทำงานอยู่: ไฟล์ .exode เล่นใน React, React Native, SwiftUI, Flutter และอื่นๆ ดังนั้นการเคลื่อนไหวจึงไม่ถูกสร้างขึ้นใหม่ด้วยมือ
- เครื่องสถานะพร้อมอินพุตและเหตุการณ์ที่แอปพลิเคชันของคุณเริ่มทำงานขณะรันไทม์
- สปริงและฟิสิกส์ที่ตอบสนองต่อความเร็วการลากและท่าทางในผลิตภัณฑ์สด
- เซิร์ฟเวอร์ MCP ดังนั้นเครื่องมือเข้ารหัส AI เช่น Claude Code และ Cursor จึงสามารถสร้างและแก้ไขไฟล์การเคลื่อนไหวได้
Figma Motion
- การเคลื่อนไหวอาศัยอยู่ในไฟล์ออกแบบ เว้นแต่คุณจะส่งออกเป็นวิดีโอ GIF, SVG หรือ Lottie มันไม่ทำงานเป็นส่วนประกอบของแอปของคุณด้วยตัวเอง
- Lottie และ dotLottie ที่ส่งออกสามารถเล่นแอนิเมชั่นและมีสถานะโต้ตอบในระดับรูปแบบ แต่จะไม่ได้เชื่อมโยงกับข้อมูลแอปพลิเคชันของคุณ
- Figma Motion อยู่ในช่วงเบต้าแบบเปิด การเผยแพร่ส่วนประกอบที่เป็นภาพเคลื่อนไหว การสร้างตัวแทน และการส่งออกที่มีความละเอียดสูงจำเป็นต้องมีใบอนุญาตเต็มรูปแบบแบบชำระเงิน
- การแปลงร่าง 3 มิติจะประกาศในเร็วๆ นี้ ไม่มีการจัดส่ง
นักพัฒนาแฮนด์ออฟ
ใช้ในรหัสของคุณ
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
นำเข้า { ExodeUICanvas } จาก 'exodeui';
// สปริง สถานะ และเวลาอยู่ในไฟล์ .exode (ออกแบบใน
// บรรณาธิการ) รหัสของคุณส่งผ่านอินพุตและได้ยินเหตุการณ์กลับ
ฟังก์ชั่นการส่งออก FluidCard () {
กลับ (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(ชื่อ) => console.log('เหตุการณ์ ExodeUI:', ชื่อ)}
/>
);
}Figma Motion คืออะไร
Figma Motion เป็นโหมดภายใน Figma ที่วางไทม์ไลน์แอนิเมชั่นไว้ข้างการออกแบบของคุณ Figma เปิดตัวที่ Config 2026 และเริ่มเปิดตัวในวันที่ 24 มิถุนายน 2026 และยังอยู่ในช่วงเบต้าแบบเปิด ดังนั้นฟีเจอร์จึงสามารถเปลี่ยนแปลงได้ คุณสลับเฟรมเป็นโหมดการเคลื่อนไหวและคุณสมบัติของคีย์เฟรม เช่น ตำแหน่ง สเกล การหมุน สี ความกว้างของเส้นโครงร่าง การตัดเส้นทาง และส่วนโค้ง มันมาพร้อมกับการตั้งค่าแอนิเมชั่นล่วงหน้า (จาง หมุน ปรับขนาด ปรับขนาด และอื่นๆ) และสไตล์ที่กำหนดเอง ตัวแปรการเคลื่อนไหวเพื่อการค่อยๆ เปลี่ยนและกำหนดเวลา เส้นโค้งและสปริงเบซิเยร์ และการป้อนคีย์อัตโนมัติที่บันทึกการเปลี่ยนแปลงในขณะที่คุณสครับ การอัปเดตในภายหลังเพิ่มภาพเคลื่อนไหวข้อความและเสียงบนไทม์ไลน์ การเคลื่อนไหวจะพร้อมใช้งานในขณะที่คุณแก้ไขแผน Figma ทั้งหมด รวมถึง Starter; Figma สำหรับแผนของรัฐบาลไม่มีครับ
- เปิดตัวที่ Config 2026 โดยเปิดตัวตั้งแต่วันที่ 24 มิถุนายน 2026 ในรูปแบบเบต้าแบบเปิด
- ไทม์ไลน์ คีย์เฟรม ค่าที่ตั้งล่วงหน้า สไตล์ที่กำหนดเอง ตัวแปรการเคลื่อนไหว และสปริง
- ภาพเคลื่อนไหวข้อความและเสียงบนไทม์ไลน์มาถึงในการอัปเดตวันที่ 30 กันยายน 2026
- การแปลงร่าง 3 มิติจะแสดงเร็วๆ นี้ในหน้า Figma Motion
สิ่งที่ Figma Motion สามารถส่งออกได้
จากเฟรมที่มีภาพเคลื่อนไหว คุณสามารถส่งออก MP4, WebM, GIF หรือ SVG แบบเคลื่อนไหวได้โดยตรงจาก Figma ในวันที่ 30 กันยายน 2026 Figma เพิ่มการส่งออก Lottie และ dotLottie เช่นกัน ส่งออกขนาดใหญ่กว่า 1920 x 1080 หรือสูงกว่า 30 เฟรมต่อวินาที จำเป็นต้องมีแผนการชำระเงิน การส่งออก Lottie ไม่รองรับทุกอย่าง: การไล่ระดับสี วิดีโอ และการไล่ระดับสีเชิงมุมออกมาเป็นภาพนิ่ง และเอฟเฟกต์บางอย่าง เช่น เงาตกกระทบ นอยส์ และกระจกจะถูกทำให้แบนราบลงในรูปลักษณ์ของเฟรมแรก ดังนั้น Figma แนะนำให้ทดสอบไฟล์ในเครื่องเล่นที่คุณวางแผนจะใช้ โหมดการพัฒนาจะแสดงไทม์ไลน์การเคลื่อนไหวทั้งหมดและสามารถคัดลอกค่าภาพเคลื่อนไหวเป็น CSS, JSON หรือ React (รวมถึงmotion.dev) และเซิร์ฟเวอร์ Figma MCP ส่งภาพเคลื่อนไหวไปยังเอเจนต์การเขียนโค้ด การคัดลอกโค้ดและการเผยแพร่ส่วนประกอบที่เป็นภาพเคลื่อนไหวจำเป็นต้องมีที่นั่งเต็มหรือที่นั่งนักพัฒนาแบบชำระเงิน
วิดีโอและรูปภาพ
MP4, WebM, GIF และ SVG แบบเคลื่อนไหว ต่อยอดที่ 1920×1080 และ 30 FPS สำหรับแผนแบบฟรี
Lottie และ dotLottie
เพิ่มเมื่อ 30 กันยายน 2026; ไม่รองรับเชเดอร์ วิดีโอ และการไล่ระดับสีเชิงมุม และเอฟเฟกต์บางอย่างจะแบนลงในเฟรมแรก
รหัสและตัวแทน
โหมดการพัฒนาจะคัดลอกค่าเป็น CSS, JSON หรือ React และเซิร์ฟเวอร์ Figma MCP จะส่งการเคลื่อนไหวไปยังตัวแทนการเขียนโค้ดบนที่นั่งแบบชำระเงิน
โดยที่ Figma Motion หยุดการผลิต
Figma Motion มีความแข็งแกร่งในการออกแบบการเคลื่อนไหวถัดจากอินเทอร์เฟซ และเอาต์พุตโหมดการส่งออกและ Dev ก็ปิดช่องว่างแฮนด์ออฟแบบเก่าได้มาก ขีดจำกัดคือสิ่งที่ส่งออก: วิดีโอ, ไฟล์ GIF หรือ Lottie เป็นเนื้อหาการเล่น และโค้ดจากโหมด Dev เป็นตัวอย่างข้อมูลที่นักพัฒนายังคงเชื่อมต่ออยู่ ไม่มีการทำงานเป็นส่วนประกอบผลิตภัณฑ์ของคุณเพียงอย่างเดียว และไม่ได้เชื่อมโยงกับสถานะและข้อมูลภายในแอปของคุณ หากปุ่มต้องไม่ได้ใช้งาน โฮเวอร์ กด โหลด ปิดใช้งาน และมีข้อผิดพลาด และแอนิเมชั่นต้องตอบสนองต่อข้อมูลและการป้อนข้อมูลของผู้ใช้บนเว็บ iOS และ Android ตรรกะนั้นจะต้องถูกสร้างขึ้นในแต่ละโค้ดเบส ตอนนี้ Figma Motion ครอบคลุมการออกแบบการเคลื่อนไหวและขั้นตอนการแฮนด์ออฟมากกว่าตอนเปิดตัว ขั้นตอนรันไทม์คือจุดที่ส่งต่อไปยังเครื่องมือที่สร้างขึ้นสำหรับมัน
หากการเคลื่อนไหวต้องทำงานในแอป
ExodeUI เป็นเครื่องมือเบราว์เซอร์และเดสก์ท็อปสำหรับ UI และแอนิเมชั่นแบบโต้ตอบสำหรับนักออกแบบ นักพัฒนา และตัวแทน AI คุณสร้างการเคลื่อนไหวหนึ่งครั้งในไฟล์ .exode ที่เปิดอยู่พร้อมกับเครื่องสถานะ ฟิสิกส์ของสปริง อินพุตและเหตุการณ์ จากนั้นจัดส่งพร้อมกับแพ็กเกจรันไทม์สำหรับ React, Vue, Svelte, Angular, Solid, React Native, SwiftUI และ Flutter รหัสของคุณส่งอินพุตและได้ยินเหตุการณ์กลับ ดังนั้นไฟล์เดียวกันจึงทำงานในแอปแทนที่จะสร้างใหม่ตามแต่ละแพลตฟอร์ม เซิร์ฟเวอร์ MCP ช่วยให้ Claude Code, Cursor และเครื่องมือเข้ารหัส AI อื่นๆ สร้างและแก้ไขไฟล์จากข้อความแจ้งภาษาธรรมดา คุณสามารถนำเฟรมเข้ามาจาก Figma ด้วยปลั๊กอิน ExodeUI Figma เราสร้าง ExodeUI ดังนั้นให้ชั่งน้ำหนักชิ้นส่วนนี้ตามนั้น
Topic Cluster Network
สำรวจแนวคิดและเครื่องมือที่เชื่อมต่อกัน
ExodeUI กับ Figma Motion
ความแตกต่างรันไทม์เทียบเคียงกัน
ภาพรวม Figma ถึง Exode
การย้ายการทำงานของการเคลื่อนไหว Figma ไปยัง ExodeUI
สภาพแวดล้อมการพัฒนาการเคลื่อนไหว
สำรวจหมวดหมู่ MDE ทั้งหมด
เครื่องมือแปลง Figma เป็น Exode
เปลี่ยนค่าภาพเคลื่อนไหว Figma ให้เป็นสปริงที่ใช้งานจริง
อภิธานศัพท์: ฟิสิกส์สปริง
อธิบายคณิตศาสตร์สปริง การหน่วงและความแข็ง
มีคำถามใช่ไหม?
คำถามที่พบบ่อย
สร้างส่วนประกอบที่มีชีวิตด้วยการเคลื่อนไหวจริง
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.