Преобразование проектов в код в Android Studio

Импортировать дизайн из Figma

Теперь мы собираемся включить пакет пользовательского интерфейса, созданный в Figma, в проект Android Studio. Чтобы включить пакет пользовательского интерфейса, скопируйте общий URL-адрес, который мы создали в предыдущем разделе, в мастер импорта Android Studio.

1. Загрузите предварительно настроенный ZIP-файл проекта Android Studio (это тот же проект, что и на странице установки реле ).

2. Дважды щелкните файл, чтобы разархивировать его, при этом создается папка с именем HelloFigma . Переместите его в свою домашнюю папку..

3. Вернитесь в Android Studio. Перейдите в «Файл» > «Открыть» , перейдите в свою домашнюю папку, выберите «HelloFigma» и нажмите «Открыть» .

4. Когда вы открываете проект, Android Studio может спросить вас, доверяете ли вы этому проекту. Нажмите «Доверить проекту» .

5. В Android Studio выберите «Файл» > «Создать» > «Импортировать пакеты пользовательского интерфейса…» .

   

6. В диалоговом окне «Импорт пакетов пользовательского интерфейса» вставьте URL-адрес вашего файла Figma и нажмите «Далее» .

   

   

7. Подождите, пока файл загрузится. При успешной загрузке отображается предварительный просмотр компонента. Нажмите Создать .

   

   Обратите внимание, что в ваш проект были добавлены новые файлы — они должны быть переданы в систему контроля версий как часть вашего проекта. В представлении Android вашего проекта вы увидите:

   

   • 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, используемая для импорта пакета пользовательского интерфейса.

   • app/ui-packages/hello_card/config.json
     Тема, используемая для предварительного просмотра.

Сборка и генерация кода

1. Нажмите на для создания вашего проекта.

   

2. Чтобы просмотреть результат сборки, перейдите на вкладку «Сборка» .

   

3. Сгенерированный код теперь добавлен в ваш проект. Поскольку это сгенерированный код, его не следует передавать в систему контроля версий как часть вашего проекта. В представлении Android вашего проекта вы можете просмотреть:

   

   • app/java (generated)/com/example/hellofigma/hellocard
     Сгенерированный код и шрифты Jetpack Compose.

   • app/java (generated)/com/google/relay/compose
     Общий код среды выполнения, который используется во всех пакетах пользовательского интерфейса.

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 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. Далее в том же файле в предварительном просмотре компонуемого измените одну строку:

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

4. Убедитесь, что устройство выбрано на панели инструментов.

5. Запустите проект, нажав ▶ на панели инструментов.

   

   Эмулятор загрузится, проект будет собран, и ваше приложение запустится.

   

   Поздравляем! Вы успешно включили свой первый компонент Figma в приложение Jetpack Compose!

Следующий шаг

Создание и распространение обновлений дизайна

Теперь, когда у вас есть сквозной рабочий пример, давайте посмотрим, как обновить исходный дизайн и перегенерировать наш код.