Figma Motion حالت موشن داخلی Figma Design است که اجازه می‌دهد بدون خروج از فایل طراحی، انیمیشن‌های مبتنی بر Timeline و Keyframe بسازید. این قابلیت در حال حاضر در Open Beta است؛ بنابراین جزئیات آن ممکن است در ادامه تغییر کند.
مزیت اصلی Motion این است که طراحی ثابت، کامپوننت‌ها، متغیرها، کامنت‌ها و Handoff موشن را به همان محیطی می‌آورد که تیم از قبل برای طراحی محصول استفاده می‌کند.
Timeline و Keyframe در Figma Motion
با تغییر Toolbar از Design به Motion، Timeline در پایین صفحه باز می‌شود. Keyframe مقدار یک Property را در یک لحظه مشخص ثبت می‌کند؛ مثلا Position، Rotation یا Opacity. بین دو Keyframe، Figma تغییرات را Interpolate می‌کند تا حرکت شکل بگیرد.
اگر Auto-keyframe را روشن کنید، تغییر Propertyها در موقعیت‌های مختلف Playhead به‌طور خودکار Keyframe می‌سازد. Timeline همچنین Duration، واحد زمان، Loop/Once/Ping-pong و کنترل Preview را در اختیار شما می‌گذارد.
Preset Animation، Easing و Spring
برای شروع سریع می‌توانید از Preset Animationها استفاده کنید یا انیمیشن را از صفر با Keyframe بسازید. Easing Curve و Spring برای کنترل حس شتاب، توقف و Bounce استفاده می‌شوند و Timing/Easing Variableها می‌توانند به یک Motion System منسجم کمک کنند.
Animated Components و Design System
انیمیشن‌های Motion می‌توانند داخل Componentهای قابل‌استفاده مجدد قرار بگیرند. Instanceهای Animated Component روی Timeline دیده می‌شوند و تیم می‌تواند Animation Styleها و Componentهای متحرک را در Library منتشر کند؛ انتشار این قابلیت‌ها بسته به Plan و Seat محدودیت دارد.
Figma Agent برای ساخت اولین نسخه موشن
Figma Agent می‌تواند از یک توضیح متنی، اولین نسخه Motion را بسازد و Keyframeها را روی Timeline قرار دهد. بعد می‌توانید نتیجه را دستی اصلاح کنید یا با Promptهای بعدی Duration، Easing و Choreography را تغییر دهید. قابلیت Agent و بعضی Workflowهای پیشرفته شرایط Plan/Seat جداگانه دارند.
کامنت زمان‌دار، Dev Mode و Export
در Motion می‌توانید کامنت را به یک Timestamp مشخص وصل کنید تا Feedback دقیقا به همان لحظه انیمیشن اشاره کند. Dev Mode هم Timeline را به‌صورت Read-only برای Inspect موشن در اختیار توسعه‌دهنده قرار می‌دهد و Workflowهای فعلی امکان انتقال اطلاعات به CSS، JSON، React یا ابزارهای کدنویسی را فراهم می‌کنند.
Animationها را می‌توان به MP4، WebM، GIF و Animated SVG خروجی گرفت. خروجی بیشتر از 1920×1080 یا بالاتر از 30FPS به Plan پولی نیاز دارد.
Figma Motion برای چه کسانی در دسترس است؟
Motion در Open Beta برای Full Seat در همه Planها ارائه شده و برای ساخت یا ویرایش Motion باید دسترسی Edit به فایل داشته باشید. بعضی قابلیت‌ها مثل انتشار Animated Component، تولید Motion با Agent و High-resolution Video Export به Full Seat روی Plan پولی نیاز دارند.
