انواع طراحی هندلینگ

در Figma، از واریانت ها برای گروه بندی تغییرات مختلف یک جزء، مانند حالت ها یا اندازه های مختلف، استفاده می شود. رله وقتی یک جزء به کد ترجمه می شود، انواع آن را حفظ می کند. در این بخش، خواهیم دید که چگونه Relay انواع مختلف را در طراحی ها مدیریت می کند.

نقطه شروع

ما با یک فایل Figma شروع می کنیم که شامل یک مؤلفه کارت خبری با سه نوع است:

• hero-item برای مهمترین مقاله خبری است
• مقاله-مورد برای یک مقاله معمولی است
• آیتم صوتی برای مقاله ای است که به جای خواندن به آن گوش می دهید

مثال Figma را کپی کنید

ما از یک فایل Figma موجود به عنوان مثال برای این آموزش استفاده خواهیم کرد. مطمئن شوید که به حساب Figma خود وارد شده اید.

1. HelloNews.fig را در رایانه خود دانلود کنید.

2. در Figma به مرورگر فایل بروید. در امتداد سمت چپ، ماوس را روی پیش نویس ها نگه دارید. یک نماد + ظاهر می شود - روی نماد + و سپس Import کلیک کنید. فایل HelloNews.fig را که به تازگی دانلود کرده اید انتخاب کنید. این می تواند از 10 ثانیه تا یک دقیقه طول بکشد.

   

3. فایل وارد شده را در Figma باز کنید.

یک بسته UI ایجاد کنید

پلاگین Relay for Figma اطلاعات اضافی را به مؤلفه ما اضافه می کند، بنابراین ما می توانیم با توسعه دهندگان خود که از مؤلفه ما در کد خود استفاده می کنند، کار کنیم.

1. افزونه Relay for Figma را در فایل خود باز کنید (در نوار منو: Plugins > Relay for Figma ). روی Get Started کلیک کنید.

2. مؤلفه را انتخاب کنید و روی Create UI Package کلیک کنید.

   

3. با انتخاب بسته UI، توضیحاتی را به کادر خلاصه اضافه کنید. به عنوان مثال: "جزء کارت خبر برای نمایش اقلام خبری برای یک لیست".

   

ذخیره نسخه نامگذاری شده

اکنون که یک بسته UI ایجاد کرده اید، جزء خود را آماده کنید تا آن را با تیم توسعه به اشتراک بگذارید.

1. افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.
2. روی اشتراک گذاری با توسعه دهنده کلیک کنید.
3. از صفحه اشتراک‌گذاری با توسعه‌دهنده ، می‌توانید نام نسخه و توضیحات جدیدی را در بخش ذخیره سابقه نسخه وارد کنید.

4. روی ذخیره کلیک کنید.

   عنوان مثال : کارت جدید اولیه

   توضیح مثال : اولین تکرار از آیتم های مقاله خبری

دانلود پروژه اندروید استودیو

برای قسمت اندروید استودیو این آموزش، از یک پروژه از پیش پیکربندی شده اندروید استودیو استفاده خواهیم کرد. این پروژه حاوی برنامه ای است که مقالات خبری را در قالب متن ساده نمایش می دهد.

1. نمونه فایل HelloNews.zip را دانلود کنید.
2. روی فایل دوبار کلیک کنید تا آن را از حالت فشرده خارج کنید، که پوشه ای به نام HelloNews ایجاد می شود. آن را به پوشه اصلی خود منتقل کنید.
3. به اندروید استودیو برگردید. به File > Open بروید، به پوشه اصلی خود بروید، HelloNews را انتخاب کنید و روی Open کلیک کنید.
4. هنگامی که پروژه را باز می کنید، Android Studio از شما می پرسد که آیا به پروژه اعتماد دارید یا خیر. روی Trust Project کلیک کنید.

وارد کردن به اندروید استودیو

بیایید جزء Figma خود را به پروژه وارد کنیم.

1. در Figma، آدرس فایل Figma آموزش کارت خبری را کپی کنید. ما از این URL برای وارد کردن اجزای خود استفاده خواهیم کرد. در گوشه سمت راست بالای Figma بر روی دکمه Share کلیک کنید. در کادر محاوره‌ای که باز می‌شود، روی Copy Link کلیک کنید.

   

2. به پروژه HelloNews در Android Studio بروید. از نوار منوی Android Studio به File > New > Import UI Packages… بروید.

   

3. URL فایل Figma خود را پیست کرده و روی Next کلیک کنید.

   

   

   1. پس از واکشی فایل (که ممکن است کمی طول بکشد)، روی Finish کلیک کنید.

   

4. کلیک کنید برای ساخت پروژه خود این ممکن است یک دقیقه یا بیشتر طول بکشد.

   

پیش نمایش برنامه و مؤلفه

1. در نمای Android، app/java/com/example/hellonews/ui/home/HomeScreen.kt را باز کنید، پیش نمایشی از برنامه را مشاهده خواهید کرد که چندین مقاله خبری را در قالب متن ساده به همراه داستان های چاپی بالای داستان های صوتی نمایش می دهد. .

   

2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt را باز کنید. این کد Jetpack Compose برای مؤلفه Figma ما است. از پیش نمایش، می بینیم که سه نوع از مؤلفه NewsCard از Figma به کد ترجمه شده است. بیایید نگاهی دقیق تر به کد بیندازیم.

   

3. View enum به ما اجازه می دهد تا انتخاب کنیم که کدام نوع را برای این جزء استفاده کنیم. نام enum و مقادیر آن از انواع مولفه Figma ما گرفته شده است. این در پارامتر view در NewsCard composable ما استفاده می شود.

   

4. NewsCard composable از بسته UI ایجاد شد. این شامل پارامتری از نوع View است که نوع کارت خبری را برای نمونه سازی تنظیم می کند.

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

بعدی

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

پارامترهای محتوا

در این بخش، پارامترهای محتوا را به کامپوننت NewsCard اضافه می کنیم.