از مفهوم تا کد: چگونه Rive اجرای طراحی من را افزایش داد

برای هر کسی که علاقه مند به جریان کار کارآمد طراحی تا توسعه است

ممکن است متوجه شده باشید که صفحه فرود Contenda اخیراً دستخوش تحولات زیادی شده است. به عنوان تنها طراح که وظایف متعددی را انجام می دهد، یافتن راهی کارآمد برای ترجمه ایده های صفحه فرود به شکلی ملموس یک چالش قابل توجه بود. از آنجایی که دانش ظاهری من در طول زمان کمی زنگ زده می شود، به راه حلی نیاز داشتم که به من اجازه دهد تا طرح هایم را به طور موثر پیاده سازی کنم. اینجا جایی بود که Rive وارد بازی شد و این امکان را برای من فراهم کرد که به طراحی هایم پی ببرم. این پست یک نگاه داخلی به شما می دهد که چگونه با استفاده از Rive طراحی مجدد صفحه فرود Contenda را مرور کردم.

Rive: The Animation Powerhouse

Rive یک تغییر دهنده بازی برای ایجاد انیمیشن های تعاملی است که پلتفرم-آگنوستیک هستند – به این معنی که می توانند بر روی هر دستگاه و هر پلتفرمی اجرا شوند. این یک رابط بصری، شبیه به پلتفرم‌های طراحی مانند Figma ارائه می‌کند که فرآیند انیمیشن را ساده‌تر می‌کند. به علاوه، گزینه‌های صادراتی iframe قابل جاسازی آن به‌طور یکپارچه در پایگاه کد Astro ما ادغام می‌شوند.

Rive in Action: زنده کردن بخش خبرنامه Contenda

تلاش‌های اخیر ما برای بازنگری در خبرنامه، فرصتی عالی برای آزمایش این ابزارها بود. ما تصمیم گرفتیم که خبرنامه خود را به عنوان “آشپزخانه Contenda” معرفی کنیم، و چه راهی بهتر از این که با یک کلوچه بخت آزمایی، این مفهوم را تجسم کنیم؟ نه فقط یک جشن برای چشم ها، بلکه یک دارایی همه کاره برای تصاویر بازاریابی و طراحی صفحه فرود ما. فقط به قبل و بعد زیر نگاهی بیندازید!

برای ایجاد گرافیک کوکی ثروت، به Figma روی آوردم و از گرافیک برداری استفاده کردم. گام بعدی دمیدن زندگی به این تصویر ایستا بود. من SVG را از Figma صادر کردم و آن را به Rive وارد کردم. شباهت چشمگیر بین رابط Rive و Figma، درست تا حفظ گروه‌بندی‌های Figma همانطور که در پانل سمت چپ تصویر زیر نشان داده شده است، روند انیمیشن‌سازی را آسان کرده است. با چند تغییر و حرکت روی بوم Rive، یک گرافیک متحرک آماده کردم. صادرات انیمیشن به‌عنوان کد تعبیه‌شده iframe تک‌خطی، در بالای صفحه قرار داشت!

آخرین مرحله ادغام این انیمیشن در صفحه فرود بود. صفحه فرود ما با Astro.js ساخته شده است، یک چارچوب جاوا اسکریپت فوق العاده همه کاره. (باور کنید یا نه، بلوک کد زیر در واقع از یک فایل Astro سرچشمه گرفته است، نه یک فایل HTML وانیلی!) فرآیند پیاده سازی بسیار ساده بود و تا حد زیادی شامل کار با div های اصلی HTML بود. همانطور که در خط کد مشخص شده زیر نشان داده شده است، انیمیشن به طور یکپارچه با یک خط کد جاسازی iframe از Rive یکپارچه شده است.

خب! حالا شما مالک آن هستید –

نگاهی درونی به نحوه مفهوم سازی، طراحی و اجرای یکی از بخش های صفحه فرود جدید Contenda. حتی به‌عنوان یک طراح انفرادی با زمان محدود، هم‌افزایی Rive با Figma و پایگاه کد موجود ما نه تنها فرآیند را ساده‌تر کرد، بلکه سطح بالایی از عملکرد و کیفیت طراحی را تضمین کرد. Rive آنچه را که در جریان کار طراحی من امکان پذیر است، دوباره تعریف کرده است. دفعه بعد که از وب سایت ما بازدید می کنید، سفر پشت هر جزئیات پر جنب و جوش را به خاطر بسپارید.