تجربهٔ آخرین به‌روزرسانی‌های Xd

چند روزی از کنفرانس Adobe MAX و معرفی محصولات جدید ادوبی و امکانات جدید برای محصولات موجود می‌گذره. در این مطلب یک نگاه سریع به چند تا از امکاناتی که به Xd اضافه شده می‌کنیم.

اگه زیاد با Xd آشنایی ندارین خوندن این مطلب مفصل بهنام در مورد امکاناتش رو توصیه می‌کنم، البته برای تقریباً یک سال پیش هست ولی همچنان می‌تونه مفید باشه.

چند وقت پیش بود که Adobe صفحه‌ای رو برای معرفی APIهای Xd به توسعه‌دهنده‌ها معرفی کرد، که خبر از امکان نصب پلاگین در نسخه‌های بعدی داشت. از این به بعد می‌شه براش افزونه نوشت و افزونه‌های موجود رو نصب کرد.

برای نمونه می‌تونید افزونهٔ Google sheets رو نصب کنید و از یه فایل روی گوگل درایو یا یه فایل csv برای پر کردن محتوای طرحتون استفاده کنید. یا افزونه‌های دیگه که برای integration با سایر سرویس‌هایی که ممکنه ازشون استفاده کنید موجود هستند.

مورد مهم بعدی در این آپدیت تغییرات قسمت prototype بوده و اولین چیزی که نظرم رو جلب کرد قابلیت Auto-Animate بود که به شما این امکان رو می‌ده که بدون تنظیمات پیچیده المان‌های بین دو آرت‌بورد رو انیمیت کنید. مثلاً تنظیم کنید که با کلیک روی یک دکمه سایز اون دکمه تغییر کنه و فلان کادر هم جاش عوض بشه. بذارید با رسم شکل ببینیم.

البته هنوز کاستی‌هایی داره ولی به خوبی از این وظیفه بر میاد و بعضی از اون کاستی‌ها رو هم با کمی خلاقیت می‌تونید برطرف کنید.

چند تا از محدودیت‌هایی که بهشون رسیدم موقع استفاده و داخل تصویر هم می‌بینید اینا هستن:

• این انیمیشن روی رنگ‌ها اعمال نمی‌شه، یعنی شما اگر نیاز به انیمیت کردن رنگ پس زمینه یا حاشیه (Border) دارین، باید به یه روش دیگه بهش برسید. (مثلاً استفاده از Opacity)
• این محدودیت برای Background/Object Blur هم برقرار هست و نمی‌شه کاریش کرد.
• در مورد حاشیه‌ها فعلاً فقط ضخامتشون انیمیت می‌شه، و اگه بخواین از انیمیت کردن خط‌چین یا رنگ استفاده کنید، فعلاً ناامیدتون می‌کنه.
• می‌شه گفت تا حد خوبی از انیمیت کردن بین Path ها بر اومده و تبدیل‌های خوبی می‌شه ساخت اما،‌ تو این قسمت هم باز بعضی وقتا گیر می‌افتید. مثلا اون کادر مستطیل که در تصویر تبدیل می‌شه به دو تا مثلث، حتماً باید از حالت rectangle در بیاد و به shape تبدیل بشه. (کافیه یکی از نقطه‌هاش رو یک مقدار جابجا کنید و برگردونید سر جاش)
• سایه‌ها هم انیمیت نمی‌شن :(

اما خبرهای خوب

• سایز نوشته‌ها انیمیت می‌شن حتی اگه فارسی باشن :)
• چرخش‌(Rotate)، شفافیت (Opacity) و گردی (Radius) به خوبی انیمیت می‌شن.
• تغییر Path انیمیت می‌شه.
• وقتی ماسک تعیین می‌کنید برای لایه‌ای، هم خود ماسک و هم اون لایه رو می‌تونید به صورت مجزا انیمیت کنید.
• به gestureهای قسمت prototype، کشیدن (Drag) هم اضافه شده و قسمت جالب اینکه اگه بین دو تا حالت که می‌خواید انیمیت کنید یه حالت میانی بذارید، می‌تونید با استفاده از timed transition انیمیشن پیچیده‌تر که وابسته به اون رویداد باشن هم بسازید. نمونه‌اش همون دایره‌های پایین تصویر.

فایل نمونه رو هم ضمیمه کنم تا اگر دوست داشتید خودتون هم کمی تغییر بدین و داستان دستتون بیاد.

دانلود فایل نمونه

یه اتفاق جالب و دوست‌داشتنی دیگه این که می‌شه از انیمیشن‌ها خروجی گرفت برای After effects که اونجا با امکانات بیشتر و حرفه‌ای تر ویرایشش کرد.

در کل راضی‌کننده بود در این بخش و من یه نمونه انیمیشن که با ترکیب اسکچ و Flinto ساخته‌بودم رو خیلی سریع تونستم توی Xd بسازمش، هر چند خروجی ویدیویی Flinto حرفه‌ای‌تر نشون می‌ده.

اتفاق جالب دیگه این هست که Xd یک قدم خوب برای ساختن Design system و انجام طراحی به صورت Atomic برداشته که بهش Linked Symbols میگه. یعنی شما می‌تونید یک فایل متشکل از Symbol‌های عمومیتون داشته‌باشید و اون‌ها رو در هر فایلی کپی کنید و هر وقت اون فایل اصلی Symbol‌ها رو تغییر دادین، توی تمام فایل‌ها یه علامت آپدیت و پیش‌نمایش از اون Symbol آپدیت شده ببینید و به نسخه آخر آپدیت کنید. یا اینکه هر وقت خواستید دیگه اون رو مستقل کنید تا کاری به نسخهٔ اصلی نداشته باشه. اما به نظرم هنوز به خوبی Sketch این موضوع رو مدیریت نکرده. و کلاً override ها خیلی محدودن، مخصوصاً اگر از کاربرای Sketch هم باشید و عادت داشته باشید همه چیز رو Symbol داشته باشید.

در جمع‌بندی باید بگم به نظر میاد Xd مسیر خوبی رو داره می‌ره و انتظار می‌ره که تو آپدیت‌های بعدی حتماً به قسمت symbol ها و تغییراتشون بیشتر توجه کنه تا از رقبا عقب نمونه. اکثر امکانات فعلیش رو می‌شه روی ابزارهای دیگر هم با کارکرد بهتر داشت.

من بسته به نوع کارم بین ابزارهای موجود انتخاب می‌کنم، معمولاً انتخاب اولم روی مک همچنان Sketch هست البته نیم‌نگاهی هم به Studio دارم?، اما اگر همهٔ اعضای تیم مک نداشته‌باشند یا فقط روی لپ‌تاپ خودم و به صورت فردی بخوام کار رو انجام بدم،با توجه به پروژه بین Xd یا Figma انتخاب می‌کنم.