วิธีการใช้ปลั๊กอินเคลื่อนไหวใน Figma สำหรับแอนิเมชั่นของคุณ?

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

Figma มีประโยชน์มากมายเมื่อเทียบกับ Adobe XD หรือ Sketch เป็นอุปกรณ์กำหนดค่าอินเทอร์เฟซแบบโปรแกรมที่ทำงานข้ามขั้นตอนและทำงานในโปรแกรมและระบบปฏิบัติการใดก็ได้ ให้บรรยากาศที่ดีที่สุดแก่ความพยายามอย่างต่อเนื่องและประสานงานกับผู้สร้างและเพื่อนร่วมงานที่แตกต่างกัน

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

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

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

ฉันจะแสดงโมดูล Figma ที่น่าสนใจให้คุณทำทั้งหมดนี้ ชื่อว่า โมชั่น เราจะสรุปประเด็นการโต้ตอบอย่างรวดเร็ว เรียนรู้พื้นฐานของความมีชีวิตชีวา หรือแม้แต่สร้างสิ่งเจ๋งๆ

ปล่อยให้ทุกอย่างหมุนไป ...

สิ่งสำคัญอันดับแรกเราควรแนะนำมัน เปิด Figma และไปที่ชุมชน

พิมพ์ 'การเคลื่อนไหว' ในแถบค้นหาที่จุดสูงสุดของหน้าและปลั๊กอิน snap-on ในผลลัพธ์

ในตอนนี้คุณควรแตะที่ปุ่มติดตั้งและนั่นคือทั้งหมดโดยสังเขป เราควรเพิ่มเอกสาร Figma อีกฉบับ จากเมนูแบบเลื่อนลง ให้เลือก Plugins/Motion

เราเพิ่งเริ่มเคลื่อนไหว เราทุกคนพร้อมสำหรับขั้นตอนต่อไป

เค้าร่าง

• ก่อนใช้เครื่องมืออื่น เราควรหาวิธีใช้งานก่อน เราควรสรุปประเด็นของการโต้ตอบอย่างรวดเร็ว
• ดูเหมือนว่าจะเป็น Figma UI ใช่ไหม ดีมากสำหรับลูกค้าใหม่
• เรามีแท็บอยู่ด้านบน: กิจกรรมของเรา แถบเครื่องมือด้านล่าง กระดานด้านซ้าย และหลักสูตรกิจกรรมที่มีคีย์เฟรม คุณสามารถเพิ่มการเคลื่อนไหวได้มากสำหรับบันทึกใดๆ
• เราควรร่างปุ่มแถบเครื่องมือบางปุ่มอย่างรวดเร็ว เราจะพูดถึงพวกเขาในรายละเอียดปลีกย่อยในภายหลัง
• อัปเดตคีย์เฟรมอัตโนมัติ
• แฮชไม่มีการแฮชใหม่/และการหยุดชะงัก

เล่น/หยุด

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

• ในกระดานตารางเวลา เราจะเห็นคีย์เฟรมทั้งหมดของเลเยอร์ที่เลือก

เพิ่มคีย์เฟรม

แลกเปลี่ยนด้วยความช่วยเหลือ คุณสามารถแลกเปลี่ยนเลเยอร์ใดก็ได้กับ GIF, Sprite, Frames หรือ CSS

สมมติว่าคุณทำงานเป็นกลุ่ม ทุกคนที่เข้าใกล้เอกสารและเรียกใช้ Motion จะเห็นความมีชีวิตชีวาของคุณ

เป็นการดีสำหรับการใช้งานร่วมกันกับกลุ่มและนักออกแบบที่จะดำเนินกิจกรรมของคุณในโค้ด แตะสองครั้งที่คีย์เฟรมใดๆ จะเปิดแผงคีย์เฟรมซึ่งคุณสามารถกำหนดจุดหักเห มูลค่า และความสามารถในการอำนวยความสะดวก

ความมีชีวิตชีวาที่น่าจดจำที่สุดของคุณ

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

ไปที่ Motion แล้วแตะที่ปุ่ม Add keyframe บนคุณสมบัติ X

ความมีชีวิตชีวาของเราจะดำเนินต่อไป 500ms ย้ายจุดจับตารางเวลาสีชมพูไปที่ตำแหน่ง 500ms (0.5s)

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

ไปข้างหน้าและเปลี่ยนคุณสมบัติ Y, ความกว้าง, ความสูง, การกวาดมุม, การหมุน, ความทึบและการเติม

Rudiments

เราควรดำเนินการต่อและกระโดดลงไปในรายละเอียดปลีกย่อยมากขึ้น

จุดปฏิวัติ

สิ่งสำคัญที่สุดคือเราควรเข้าใจว่าจุดหมุนหรือจุดยึดคืออะไร เราควรถือว่าเรามีขอบและรูปสี่เหลี่ยมจัตุรัสอยู่ภายใน รูปทรงสี่เหลี่ยม: ความกว้าง = 100 ระดับ = 100 x = 100 y = 100 รอบ = 0°

ไปที่ Motion และเพิ่มคีย์เฟรมสำหรับคุณสมบัติ X แตะสองครั้งบนคีย์เฟรมใหม่ ในปัจจุบัน เราเห็นแผงคีย์เฟรมสำหรับคุณสมบัติเฉพาะ ที่นี่ คุณสามารถตั้งค่าจุดหมุนหรือจุดยึด การประมาณคุณสมบัติ และความสามารถในการอำนวยความสะดวก

ในบอร์ดคุณสมบัติ Figma เรากำหนด X ว่าเทียบเท่ากับ 100; อย่างไรก็ตามที่นี่เราเห็น 150 ทำไม?

คำอธิบายคือจุดหมุนซึ่งตั้งค่าให้โฟกัสที่แกน X และ Y ตามเส้นเหล่านี้ ตำแหน่งคือ: X + (ความกว้าง/2) = 100 + (100/2) = 150 ในการจัดการคุณสมบัติที่คล้ายกับ Figma คุณควรเลือกมุมซ้ายบนของจุดหมุน แต่อย่าเร่งรีบ!

เราควรย้ายรูปสี่เหลี่ยมจัตุรัสของเรา 100 ไปด้านหนึ่งตามแนว X และหมุนรอบ - 45°

คลิกที่ Play และดูว่ามันเคลื่อนที่และหมุนได้ อย่างไรก็ตาม ลองนึกภาพสถานการณ์ที่เราเปลี่ยนการปฏิวัติเพื่อเน้นที่มุมซ้ายบน

ไม่ได้สร้างความแตกต่างใดๆ กับคีย์เฟรมที่คุณจะเปลี่ยนจุดหมุน เป็นเรื่องปกติสำหรับคีย์เฟรมทั้งหมดของเลเยอร์

เราจะกลิ้งและหมุนตามมุมซ้ายบนของเลเยอร์

Figma แสดงค่า X และ Y ตามที่ระบุโดยมุมซ้ายบนของจุดปฏิวัติของเลเยอร์ อย่างไรก็ตามค่าการหมุน - ตามจุดกึ่งกลาง คุณควรจำสิ่งนี้ไว้เมื่อคุณทำให้มีชีวิตชีวาขึ้น อย่างไรก็ตาม ตามกฎแล้ว คุณจะไม่ต้องแปลงจากปัญหาหลักใน Motion

อำนวยความสะดวก

อำนวยความสะดวกในการควบคุมความเร็วที่เพิ่มขึ้นและการชะลอตัว มีสี่ความสามารถอำนวยความสะดวก:

• โดยตรง
• ง่าย—เข้า—เพิ่มความเร็วที่จุดเริ่มต้น
• ถอยกลับ — ชะลอตัวในที่สุด
• กลับเข้า-ออก — ความเร็วเพิ่มขึ้นในช่วงเริ่มต้น และการชะลอตัวในที่สุด

มีทางเลือกอื่นที่นี่ - ขั้นตอน มันจะเปลี่ยนค่านิยมทันทีโดยไม่มีความคืบหน้าในทางปฏิบัติ เราลองแล้วเป็นไง. เรามีรูปสี่เหลี่ยมจัตุรัสเคลื่อนจากด้านที่ส่งผ่านไปยังครึ่งขวาของขอบ เลือกคีย์เฟรมสิ้นสุดและเปิดแผงคีย์เฟรม เปลี่ยนความสามารถในการอำนวยความสะดวกและเห็นผล

ทำซ้ำ/วาง

การจัดลำดับคีย์เฟรมใหม่ก็ทำได้ง่ายเช่นกัน เลือกคีย์เฟรม กด Ctrl/Cmd+C หรือคลิก คัดลอก จากเมนูดรอปดาวน์เพื่อเลือกคีย์เฟรม หลังจากนั้นคุณสามารถติดมันบนเลเยอร์ใดก็ได้ บางครั้ง การทำแอนิเมชั่นสองสามเลเยอร์ในลักษณะเดียวกันก็มีประโยชน์

แก้ไข/ทำซ้ำ

คุณสามารถแก้ไขและลองดำเนินการใหม่อีกครั้งในกิจกรรม Ctrl/Cmd+Z สำหรับ Undo และ Ctrl/Cmd+Y สำหรับ Redo จะช่วยคุณได้

อัปเดตคีย์เฟรมอัตโนมัติ

หากปุ่มนี้เป็นไดนามิก ค่าคีย์เฟรมจะถูกรีเฟรชตามตำแหน่งเวลาปัจจุบันหลังจากเริ่มใช้การเคลื่อนไหว คุณมีความล่าช้า 1 วินาทีหลังจากที่หน้าต่างโมดูลได้รับการว่าจ้างให้ปิดใช้งานหรือกดปุ่มเล่นและทำให้หน้าต่างพร่ามัว

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

ดู fps

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

Rehash

มีสามความสามารถที่นี่:

• ไม่ต้องซ้อม
• Rehash
• ทำซ้ำและหยุดชะงัก

อันสุดท้ายน่าลุ้น มันจะหยุด 1 วินาทีเมื่อสิ้นสุดการเคลื่อนไหวและหลังจากนั้นจะเกิดขึ้นอีก ครั้งแล้วครั้งเล่า เมื่อคุณตั้งค่าการเล่นซ้ำ คุณจะไม่เห็นผลลัพธ์ของการเคลื่อนไหวของคุณ จะเป็นการดีที่สุดหากคุณเลื่อนไปก่อนรอบกิจกรรมอื่นจะเริ่มต้นขึ้น

คุณสามารถเพิ่มคีย์เฟรมสำหรับช่วงเวลาที่ต้องการได้ ไม่ว่าในกรณีใด Motion จะให้เครื่องมือดังกล่าวแก่คุณ — ทำซ้ำและหน่วงเวลา

ห่อ

บล็อกนี้รวบรวมความรู้ที่เป็นประโยชน์มากมายเกี่ยวกับความมีชีวิตชีวาใน Figma ในวันนี้ ปัจจุบันมีโอกาสและพลังใจในการฝึกฝนและสร้างความกระฉับกระเฉงของคุณ

ต้องการทราบข้อมูลเพิ่มเติม? เยี่ยมชม www.webdew.com หรือติดต่อเราเพื่อใช้บริการของเรา!

บรรณาธิการ: ทามันนา