در اندروید استودیو طرح ها را به کد تبدیل کنید

واردات طرح از Figma

اکنون، ما می‌خواهیم بسته UI ایجاد شده در Figma را در پروژه Android Studio اضافه کنیم. برای ادغام بسته UI، URL اشتراک‌گذاری را که در بخش قبل ایجاد کردیم در جادوگر واردات Android Studio کپی کنید.

1. فایل ZIP از پیش پیکربندی شده پروژه Android Studio را دانلود کنید (که همان پروژه در صفحه Install Relay است).

2. روی فایل دوبار کلیک کنید تا آن را از حالت فشرده خارج کنید، که پوشه ای به نام HelloFigma ایجاد می شود. آن را به پوشه اصلی خود منتقل کنید..

3. به اندروید استودیو برگردید. به File > Open بروید، به پوشه اصلی خود بروید، HelloFigma را انتخاب کنید و روی Open کلیک کنید.

4. وقتی پروژه را باز می کنید، Android Studio ممکن است از شما بپرسد که آیا به پروژه اعتماد دارید یا خیر. روی Trust Project کلیک کنید.

5. در Android Studio، File > New > Import UI Packages… را انتخاب کنید.

   

6. در گفتگوی Import UI Packages، URL فایل Figma خود را جای‌گذاری کرده و روی Next کلیک کنید.

   

   

7. صبر کنید تا فایل دانلود شود. هنگامی که با موفقیت دانلود شد، پیش نمایش مؤلفه نمایش داده می شود. روی ایجاد کلیک کنید.

   

   توجه داشته باشید که فایل های جدیدی به پروژه شما اضافه شده است - این فایل ها باید به عنوان بخشی از پروژه شما به کنترل منبع متعهد باشند. در نمای اندروید پروژه خود، خواهید دید:

   

   • app/ui-packages/hello_card/*
     تمام دارایی های منبع مورد نیاز برای توصیف مؤلفه در کد. این فایل ها برای تولید کد در مرحله ساخت استفاده می شوند.

   • app/ui-packages/hello_card/hello_card.json
     فایل JSON که حاوی تعریف کامپوننت (شامل طرح‌بندی و سایر ویژگی‌های آن) است.

   • app/ui-packages/hello_card/fonts/*
     هر فایل فونت مورد نیاز برای پشتیبانی از مؤلفه در Jetpack Compose.

   • app/ui-packages/hello_card/*.png یا *.jpeg
     هر گونه دارایی تصویر مورد نیاز برای پشتیبانی از مؤلفه.

   • app/ui-packages/hello_card/VERSION.txt
     نسخه پلاگین Relay for Android Studio که برای وارد کردن بسته UI استفاده می شود.

   • app/ui-packages/hello_card/config.json
     موضوع مورد استفاده برای پیش نمایش.

ساخت و تولید کد

1. را کلیک کنید برای ساخت پروژه خود

   

2. برای مشاهده نتیجه ساخت، روی تب Build کلیک کنید.

   

3. کد تولید شده اکنون به پروژه شما اضافه می شود. از آنجایی که این کد تولید شده است، نباید به کنترل منبع به عنوان بخشی از پروژه شما متعهد شود. در نمای اندروید پروژه خود، می توانید موارد زیر را مشاهده کنید:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     تولید کد و فونت های Jetpack Compose.

   • app/java (generated)/com/google/relay/compose
     کد زمان اجرا مشترک که در همه بسته‌های UI استفاده می‌شود.

4. app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt را باز کنید. این تابع Jetpack Compose برای مؤلفه Figma است. همچنین می توانید پیش نمایش کامپوننت را مشاهده کنید.

   چیدمان، دارایی ها و اطلاعات استایل اکنون از Figma به کد منتقل می شوند.

   

   در کد، خلاصه اضافه شده در Figma اکنون به یک نظر در بالای قابل ایجاد شده ترجمه می شود.

    /**
    * Hello Card component used to display the image and the title content
    *
    * This composable was generated from the UI package ‘ hello_card’
    * Generated code; do not edit directly
    */
   @Composable
   fun HelloCard(modifier: Modifier = Modifier) {...
   

یکپارچه سازی کامپوننت و اجرای برنامه

حالا بیایید کامپوننت را با اکتیویتی اصلی ادغام کنیم.

1. در app/java/com/example/hellofigma/MainActivity.kt ، به بخش import در بالا اضافه کنید:

   import com.example.hellofigma.hellocard.HelloCard
   

2. در پایین‌تر در همان فایل، کد زیر را در کلاس MainActivity تغییر دهید:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       // Greeting("Android") // Delete this line
                       HelloCard()  // Add this line
                   }
               }
           }
       }
   }
   

3. پایین تر در همان فایل، در پیش نمایش composable، یک خط را تغییر دهید:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard() // Change this line
       }
   }
   

4. مطمئن شوید که یک دستگاه در نوار ابزار انتخاب شده است.

5. پروژه را با کلیک بر روی ▶ در نوار ابزار اجرا کنید.

   

   شبیه ساز راه اندازی می شود، پروژه ساخته می شود و برنامه شما شروع به کار می کند.

   

   تبریک می گویم! شما با موفقیت اولین مؤلفه Figma خود را در برنامه Jetpack Compose گنجانده اید!

مرحله بعدی

ایجاد و انتشار به روز رسانی های طراحی

اکنون که یک نمونه کار سرتاسر دارید، بیایید ببینیم که چگونه طرح اصلی را به روز کنیم و کد خود را بازسازی کنیم.