جابهجا شدن بین ابزارهای مختلف برای متحرکسازی یک طرح، همیشه یکی از بزرگترین دردسرهای ما طراحان بوده است. حالا با معرفی فیگما موشن (Figma Motion)، این مانع به طور کامل از بین رفته است.
فیگما بالاخره تایملاین انیمیشن را مستقیما به بوم طراحی آورده تا بتوانید ایدههای حرکتی خود را از همان روز اول به صورت زنده پیادهسازی کنید. تجربه من نشان میدهد که این تغییر، فقط یک ویژگی ساده نیست؛ بلکه کل جریان کاری بین طراحان و توسعهدهندگان را اصلاح میکند.
تایملاین فیگما موشن چگونه کار میکند؟
تایملاین جدید فیگما دقیقا در کنار بوم طراحی شما باز میشود و امکان کنترل دقیق روی هر فریم کلیدی (Keyframe) را براتون فراهم میکند. شما میتوانید موقعیت، ابعاد، چرخش و شفافیت هر لایه را به صورت مستقل روی نوار زمان تنظیم کنید.
با فعال کردن قابلیت اتو-کیفریم، تمام تغییراتی که هنگام حرکت دادن نشانگر زمان انجام میدهید، به صورت خودکار ثبت میشود. برای شروع سریعتر، استایلهای آمادهای مثل محو شدن، حرکت کردن و بزرگنمایی در دسترس هستند که میتوانید آنها را روی هم قرار دهید یا پشت سر هم بچینید.
در کنار این موارد، کامنتهای زماندار به اعضای تیم اجازه میدهد دقیقا روی یک ثانیه خاص از انیمیشن نظرشان را ثبت کنند. این یعنی جلسات بازبینی موشن بسیار دقیقتر و سریعتر پیش میرود.
کامپوننتهای متحرک و متغیرهای موشن
کامپوننتها پایه و اساس یک دیزاین سیستم هستند و حالا در فیگما میتوانند انیمیشن را هم در خود ذخیره کنند. وقتی شما یک دکمه یا کارت را متحرک میکنید، این انیمیشن در تمام صفحات و فایلهای همتیمیهای شما اعمال میشود.
همچنین، فیگما ویژگی متغیرهای موشن (Motion Variables) را معرفی کرده است. شما میتوانید یک متغیر برای منحنی حرکت (Easing) تعریف کنید، حالتهای (Modes) مختلفی برای آن بسازید و روی تمام انیمیشنها پیادهسازی کنید. اگر حالت را در سطح یک صفحه تغییر دهید، تمام انیمیشنهای وابسته به آن متغیر به صورت هماهنگ بهروزرسانی میشوند. این سیستم باعث میشود دیگر نیازی نباشد در هر اسپرینت، انیمیشنها را از صفر بسازید.
هوش مصنوعی فیگما ایجنت در خدمت انیمیشن
دستیار هوش مصنوعی فیگما (Figma Agent) با دریافت پرامپتهای متنی شما، فریمهای کلیدی واقعی را روی تایملاین ایجاد میکند. اگر تا به حال کار موشن دیزاین انجام ندادهاید، این ویژگی شیب یادگیری را برای شما به شدت کاهش میدهد.
برای طراحان حرفهایتر، این ایجنت کارهای تکراری را بر عهده میگیرد. شما میتوانید در حین اینکه ایجنت روی چند فریم مختلف کار میکند، روی تنظیم دقیق منحنیهای حرکتی و جزئیات ظریف تمرکز کنید. از آنجایی که این سیستم درون گاردریلهای دیزاین سیستم شما کار میکند، خیالتان از بابت یکپارچگی کار راحت خواهد بود.
هندآف راحتتر با Dev Mode جدید
توسعهدهندگان حالا میتوانند به جای حدس زدن زمانبندیها، مستقیما در Dev Mode تمام مقادیر زمانی و منحنیهای حرکتی را مشاهده کنند. این ویژگی باعث میشود دقیقا همان چیزی که دیزاین کردهاید، کدنویسی شود.
دیگر نیازی به ترجمه بصری نیست؛ برنامهنویس تیم شما میتواند کد انیمیشن را با فرمتهای CSS، JSON یا برای فریمورکهای React و motion.dev با یک کلیک کپی کند. حتی امکان خروجی گرفتن مستقیم با فرمتهای MP4، GIF، SVG یا WEBM از فایل برای تاییدیههای اولیه فراهم شده است.
برای چه کسانی در دسترس است؟
این ویژگی های جدید بصورت آزمایشی برای اکانت های استارتر(یا همون رایگان)، پرو، شرکتی و سازمانی در دسترس است.
توجه کنید که در حالت رایگان محدودیت هایی در خروجی گرفتن خواهید داشت.
استفاده از موشن در دیزاین سیستم و کامپوننت ها و هوش مصنوعی Figma Agent در بخش Motion هم فقط برای اکانت های پولی در دسترس است.
مسیر یادگیری طراحی رابط کاربری و فیگما رو از کجا شروع کنیم؟
برای یادگیری اصولی طراحی محصول و تسلط بر فیگما، نیازی به دورههای تئوری و خستهکننده ندارید؛ بلکه باید درگیر انجام پروژههای واقعی بشید. در آکادمی لرنیوایایکس (Learnuix.com) ما چیزی به اسم دوره مبانی نداریم و از همون ابتدا مستقیم وارد کار عملی میشیم.
اگر هیچ تجربه قبلی در دیزاین ندارید، پیشنهاد من اینه که حتما از دوره UI Design Plus شروع کنید. در این دوره تمام اصول طراحی رابط کاربری و کار با ابزارهایی مثل فیگما رو قدم به قدم یاد میگیرید. اما اگر وبسایت رو بررسی کردید و مطمئن هستید که میخواهید هر دو تخصص رابط و تجربه کاربری رو به شکل عمیق یاد بگیرید، یا قصد دارید برای کار به خارج از کشور مهاجرت کنید، مسیر جامع Product Design Pro X دقیقا همون چیزیه که نیاز دارید تا شما رو به یک طراح محصول در سطح جهانی تبدیل کنه.
