انیمیشن، بخش فراموش‌شده دیزاین سیستم‌ها

توی بیشتر دیزاین سیستم‌ها، برای Color، Typography، Spacing و Radius قواعد مشخصی داریم. می‌دونیم هر Token کجا استفاده می‌شه و تغییر اون چه تأثیری روی Componentها می‌ذاره. اما وقتی نوبت به انیمیشن می‌رسه، معمولاً همه‌چیز به چند توصیه کلی مثل «حرکت‌ها نرم و طبیعی باشن» محدود می‌شه.نتیجه اینه که ممکنه یک Modal در ۲۰۰ میلی‌ثانیه باز بشه، یک Dropdown در ۳۵۰ میلی‌ثانیه ظاهر بشه و یک Tooltip با Easing کاملاً متفاوتی حرکت کنه؛ بدون اینکه دلیل مشخصی پشت این تفاوت‌ها وجود داشته باشه.

در حالی که Motion هم مثل رنگ و فاصله‌گذاری، بخشی از زبان مشترک یک محصوله.

فیگما چه چیزی رو تغییر داده؟

فیگما در رویداد Config 2026 که ۲۴ ژوئن برگزار شد، از قابلیت جدید Figma Motion رونمایی کرد؛ ابزاری که امکان ساخت انیمیشن رو مستقیماً داخل Canvas فراهم می‌کنه.با این قابلیت، طراح‌ها می‌تونن از Timeline، Keyframe و Animation Preset استفاده کنن، ویژگی‌هایی مثل Position، Scale، Rotation و Opacity رو تغییر بدن و بدون خروج از محیط طراحی، حرکت‌ها رو بررسی و اصلاح کنن.اما نکته مهم‌تر برای تیم‌های Design System، فقط اضافه شدن ابزار ساخت انیمیشن نیست؛ Motion حالا می‌تونه همراه Componentها و Variables مدیریت بشه.

وقتی انیمیشن هم بخشی از Component می‌شه

فرض کنیم یک Dialog در Design System داریم که هنگام باز شدن باید با یک حرکت مشخص وارد صفحه بشه.در روش‌های پراکنده، ممکنه هر تیم محصول این حرکت رو جداگانه پیاده‌سازی کنه. حتی اگر ظاهر Dialog در همه محصولات یکسان باشه، Duration و Easing اون می‌تونه متفاوت باشه.فیگما با قابلیت Animated Components امکان تعریف انیمیشن روی Component و استفاده مجدد از اون رو فراهم کرده. یعنی Motion می‌تونه همراه Component در طراحی‌های مختلف منتقل بشه؛ مشابه کاری که امروز با ویژگی‌های بصری Componentها انجام می‌دیم.از طرف دیگه، Motion Variables اجازه می‌دن بعضی ویژگی‌های حرکت، مثل Easing، به‌صورت متغیر تعریف بشن و با تغییر Mode، انیمیشن‌های وابسته هم به‌روزرسانی بشن.این یعنی Motion می‌تونه به‌جای مجموعه‌ای از تصمیم‌های پراکنده، به بخشی از قواعد قابل‌مدیریت سیستم تبدیل بشه.

فاصله طراحی تا توسعه کمتر می‌شه؟

یکی از مشکلات رایج Motion در فرایند Handoff اینه که توسعه‌دهنده معمولاً نتیجه حرکت رو می‌بینه، اما برای پیاده‌سازی دقیق اون باید Duration، Easing و Keyframeها رو دوباره استخراج کنه.در Figma Motion، این اطلاعات از طریق Dev Mode قابل‌بررسی هستن. همچنین امکان دریافت خروجی‌هایی مثل CSS، JSON و کد سازگار با React فراهم شده.فیگما از سازگاری Motion با MCP هم خبر داده تا Agentهای برنامه‌نویسی بتونن به اطلاعات انیمیشن دسترسی داشته باشن.البته این قابلیت‌ها به معنی حذف کامل Handoff نیستن. کد خروجی همچنان باید با معماری پروژه، عملکرد محصول و نیازهای دسترس‌پذیری بررسی بشه.اما یک تفاوت مهم ایجاد می‌شه: توسعه‌دهنده یا Agent دیگه مجبور نیست تمام جزئیات حرکت رو فقط از روی ظاهر اون حدس بزنه.

دیزاین سیستم ما به چه قواعدی برای Motion نیاز داره؟

برای استفاده سیستماتیک از انیمیشن، صرفاً داشتن یک Timeline کافی نیست. باید مشخص کنیم حرکت‌ها چه نقشی در تجربه کاربر دارن.برای مثال، می‌تونیم چند دسته قاعده تعریف کنیم:Duration: مدت‌زمان حرکت برای تعاملات سریع، نمایش محتوا یا جابه‌جایی بین وضعیت‌ها.Easing: نحوه شتاب گرفتن و متوقف شدن حرکت، متناسب با نوع تعامل.Delay و Stagger: زمان‌بندی نمایش متوالی المان‌ها، بدون ایجاد تأخیر غیرضروری در انجام کار.Reduced Motion: رفتار جایگزین برای کاربرانی که کاهش حرکت رو در تنظیمات سیستم‌عامل انتخاب کردن.اما یک نکته مهم وجود داره: قرار نیست همه انیمیشن‌ها یکسان باشن.همون‌طور که برای تمام Componentها از یک Radius استفاده نمی‌کنیم، برای تمام حرکت‌ها هم نباید Duration و Easing یکسانی در نظر بگیریم.هدف Motion Tokenها اینه که تفاوت‌ها براساس نقش و رفتار Component تعریف بشن، نه سلیقه فردی.

جمع‌بندی

معرفی Figma Motion فقط خبر اضافه شدن یک ابزار انیمیشن به فیگما نیست. بخش مهم‌تر ماجرا اینه که حرکت‌ها می‌تونن به Componentها، Variables و فرایند توسعه نزدیک‌تر بشن.این تغییر برای تیم‌های Design System یک فرصت ایجاد می‌کنه تا قواعد Motion رو هم مثل Color و Spacing تعریف، مستند و مدیریت کنن.به‌خصوص حالا که Agentهای هوش مصنوعی در پیاده‌سازی رابط کاربری نقش بیشتری دارن، مشخص بودن این قواعد اهمیت بیشتری پیدا می‌کنه.چون اگر برای Motion تصمیم مشخصی نداشته باشیم، Agent هم احتمالاً مجبور می‌شه Duration، Easing و رفتار حرکت‌ها رو خودش انتخاب کنه.انیمیشن وقتی بخشی از Design System باشه، دیگه صرفاً سلیقه یک طراح نیست؛ به یک قرارداد مشترک بین طراحی و توسعه تبدیل می‌شه.شما توی دیزاین سیستم‌تون برای Motion هم Token و قواعد مشخص دارین یا هنوز انیمیشن‌ها به‌صورت موردی طراحی و پیاده‌سازی می‌شن؟