با Framer X آشنا شوید: سازنده رابط کاربری React

در این پست، Framer X، ابزار طراحی جدید را بررسی خواهیم کرد و سعی خواهیم کرد که منفعت‌ها و قابلیت‌های آن را درک کنیم.

پیش نیاز: در این پست فرض می‌شود که شما دانش قبلی در زمینه React دارید.

1. Framer X‌ چیست؟
2. چرا از Framer X استفاده کنیم؟
3. Frameها
4. Stackها
5. کامپوننت‌ها
6. کامپوننت‌های کد
7. نتیجه‌گیری

Framer X‌ چیست؟

Framer X آخرین نسخه از Framer Studio، ابزار نمونه سازی است.

وقتی که در ابتدا Framer Studio منتشر شد، به طراحان این قابلیت را داد تا یک سری طراحی‌های نمونه اولیه برنامه بسازند که بسیار واقعی به نظر می‌رسید، و در آن زمان می‌توانستند تعاملات بسیار پیشرفته‌تری را نسبت به باقی برنامه‌های طراحی در آن زمان، پویانمایی کنند.

Framer X، جدیدترین نسخه Framer، استفاده داخلی کامپوننت‌های React را معرفی می‌کند تا طراحان را قادر سازد که به نمونه‌سازی بهتری نزدیک شوند.

Framer X همچنین تمام امکاناتی که برای کشیدن هر چیزی از آیکون‌های سفراشی گرفته تا طراحی‌های پیچیده لازم دارید را به همراه دارد. شما می‌توانید طراحی‌های خود را با استفاده از ویرایش‌گر مسیر (path) پیشرفته دقیق‌تر کنید، هر چیزی را از بوم خود خروجی بگیرید و...

چرا از Framer X استفاده کنیم؟

در اکثر ابزار طراحی، طراحی‌ها اکثرا بصری هستند؛ تصویری از یک دکمه، اسلایدر یا دکمه toggle. تفاوت بزرگی که Framer X ایجاد می‌کند، این است که حال طراحی‌ها می‌توانند بیشتر تعاملی باشند. تعاملاتی مانند اسکرول کردن، کلیک کردن، حرکت دادن و مدیریت ورودی‌ها، حال با تشکر از کامپوننت‌های React ممکن هستند.

Framer X بر پایه framer.js، یک کتابخانه اوپن سورس که کار تبدیل کردن کد React به طراحی تعاملی را انجام می‌دهد، ساخته شده است. کامپوننت‌های React که می‌توانند از پس این تعاملات بر بیایند، می‌توانند از بیخ کدنویسی شده، یا از فروشگاه طراحی داخلی آن دانلود شوند.

طراحی‌های Framer (Propها و همه چیز) به راحتی می‌توانند به کامپوننت‌های React ترجمه شوند.

Framer X امکانات پیشرفته‌ای را به همراه دارد. بیایید برخی از موارد ضروری را برجسته‌سازی کنیم.

Frameها

ابزار Frame برای ساخت طرح‌های responsive در طراحی‌ها استفاده می‌شود. Frameها طرح‌های از پیش تعیین شده‌ای برای دستگاه‌های معروف دارند که شما می‌توانید انتخاب کنید، تا طراحی خود را شروع کنید. Frameها وقتی که شما آن‌ها را تغییر اندازه می‌دهید، سازگار می‌شوند. آن‌ها همچنین اگر قرار است که نسبت به محیط خود responsive باشند، می‌توانند برای ساخت عناصر رابط کاربری مانند دکمه‌ها و شکل‌ها استفاده شوند.

Frameها بصری هستند. هر frameای که بر روی دیگری قرار داشته باشد، می‌تواند به طور خودکار به عنوان یک فرزند از لایه اصلی نشان داده شود تا سلسله مراتب لایه‌ها ساخته شود. یک frame می‌تواند با فشردن کلید «F» یا از آیکون «+» در سمت چپ ساخته شود.

Stackها

Stackها در Framer X، یک ابزار طراحی عالی هستند که برای کار با gridها و لیست‌ها پرکاربرد می‌باشند. این ابزار به مانند یک عبارت Flexbox و فناوری CSS Grid کار می‌کند. این ابزار ساخته شده است تا به طور خودکار توزیع کردن‌ها و ترازها را در طراحی‌های شما مدیریت کند. یک Stack می‌تواند با فشردن کلید «S» و سپس ایجاد یک selection دور تمام آیتم‌هایی که باید درون آن قرار بگیرند، ساخته شود.

کامپوننت‌ها

در Framer X، کامپوننت‌ها در واقع آیتم‌های با قابلیت استفاده مجددی هستند که شما می‌توانید به صورت بصری در روابط صفحه برنامه بزرگ‌تر بسازید. دو نوع کامپوننت وجود دارند که شما باید از آن‌ها مطلع باشید:

1. کامپوننت‌های طراحی: این موارد، عناصر طراحی استاتیکی هستند که می‌توانید در طراحی یک رابط کاربری مجددا استفاده کنید.
2. کامپوننت‌های کد: این موارد هم عناصر طراحی هستند که می‌توانید در طراحی یک رابط کاربری مجددا استفاده کیند، اما با استفاده از React ساخته شده‌اند و تعاملی هستند. کامپوننت تعاملی YouTube که در زیر نمایش داده شده است را در نظر بگیرید:

کامپوننت‌های کد

همانطور که پیش‌تر اشاره کردیم، کامپوننت‌های کد در واقع کامپوننت‌های React هستند که شما از بیخ می‌سازید یا از فروشگاه Framer X نصب می‌کنید، که شما را قادر می‌سازد تا کامپوننت‌های طراحی رابط کاربری تعاملی بسازید.

یک پنل ویژگی‌ها (properties) بر روی Framer X برای تغییر ویژگی‌های عنصر طراحی انتخاب شده، مانند رنگ، شعاع حاشیه و... وجود دارد. وقتی که با کد React یک کامپوننت طراحی تعاملی می‌سازید، می‌توانید کنترل‌های سفارشی‌ای مشخص کنید که وقتی بر روی کامپوننت تعاملی مورد نظر کلیک می‌شود، در پنل ویژگی‌ها ظاهر خواهند شد. برای ساخت یک کامپوننت جدید، می‌توانید به پنل Components بروید و بر روی دکمه «New Component» که در پایین قرار دارد، کلیک کنید.

«from Code» را انتخاب کنید و سپس بر روی «Create and Edit» کلیک کنید. سپس خواهید دید که یک فایل .tsx که در واقع یک فایل TypeScript است، برای شما فراهم می‌شود.

فایل .tsx مورد نظر، یک کامپوننت «Hello World» ساده را از طریق ویرایشگر کد شما نمایش خواهد داد. به شدت پیشنهاد می‌شود که VS Code و Prettier را برای قالب‌بندی و تکمیل خودکار TypeScript نصب داشته باشید.

برای باز کردن پوشه محفظه این فایل، به file > open‌ در بالای VS Code بروید و بر روی پوشه با نام «container»‌ کلیک کنید. این پوشه پروژه مربوط به کدی که خواهید نوشت می‌باشد. کامپوننتی که ساختید می‌تواند در یک زیر شاخه‌ای به نام code یافت شود.

پس از ساخت یک کامپوننت کد، رابط کاربری آن در پنل کامپوننت‌ها ظاهر می‌شود و می‌تواند به بوم کشیده شود.

به طور پیشفرض، طول و عرض کامپوننت از طریق propها به کامپوننت کد منتقل شده است.

از آنجایی که کد شما، محتویات کامپوننت کد را تعیین می‌کنند، شما نمی‌توانید به طور مستقیم محتویات کامپوننت کد را بر روی بوم ویرایش کنید. اما اگر نیاز دارید که کامپوننت کد شما چیزی را از یک عنصر دیگر (مانند یک تصویر) در بوم شما نمایش دهد، می‌توانید به ۲ روش به آن دست یابید:

استفاد از props.children:

شما می‌توانید کامپوننت React خود را به گونه‌ای تنظیم کنید که از اِی‌پی‌آی props.children استفاده کند، که وقتی از آن استفاده می‌شود، باعث می‌شود که فرزندان این کامپوننت توسط شما قابل تنظیم باشند.

Framer تشخیص می‌دهد که شما در حال استفاده از ویژگی props.children در متد رندر خود هستید و به طور خودکار یک اتصال دهنده (یک نقطه بنفش در سمت راست، مانند ابزار scroll) به مورد کامپوننت در بوم شما اضافه می‌کند. شما می‌توانید از این اتصال دهنده، به هر frameای بر روی بوم درگ کنید و پس از آن، بوم شما از آن به عنوان فرزند خود برای رندر کردن استفاده خواهد کرد.

وارد کردن کامپوننت‌ها با استفاده از نام آن‌ها از بوم

شما می‌توانید به راحتی هر کامپوننت طراحی نامگذاری شده‌ای را به کد خود وارد کنید و از آنجا از آن استفاده کنید. برای مثال اگر یک کامپوننت به نام Card دارید:

سفارشی‌سازی پنل ویژگی‌ها

همانطور که پیش‌تر اشاره شد، شما می‌توانید تنظیم کنید که چه تنظیماتی بر روی پنل ویژگی‌های Framer X برای تغییر دادن مقدار کامپوننت طراحی تعاملی شما نمایش داده شود. به یاد داشته باشید که شما نمی‌توانید محتویات کامپوننت‌های خود را از Framer X تغییر دهید؛ بلکه فقط از طریق کد می‌توانید این کار را انجام دهید.

ما می‌توانیم از propertyControls استفاده کنیم تا سفارشی‌سازی رابط کاربری را مستقیما در پنل ویژگی‌های خود ممکن کنیم. ما فقط باید یک متد propertyControls استاتیک به کلاس خود، به همراه یک توصیف‌گر اضافه کنیم.

از Framer X، شما می‌توانید مقادیری مانند این موارد را تغییر دهید:

• Boolean
• عدد
• رشته
• رنگ
• تصویر
• فایل
• Enum
• SegmmentedEnum
• FusedNumber

نتیجه‌گیری

Framer X یک ابزار عالی برای از بین بردن فاصله میان طراح و توسعه دهنده است. کامپوننت‌های کد، طراحان و توسعه دهندگان را قادر می‌سازند تا به یک زبان مشترک صحبت کنند. به جای این که یک طراحی بسازند و سپس به یک توسعه دهنده بگویند که آن را به کد ترجمه کند، با تشکر از Framer X بسیاری از کارهای هسته‌ای از پیش انجام شده‌اند.

منبع