Импортировать дизайн из Figma
Теперь мы собираемся включить пакет пользовательского интерфейса, созданный в Figma, в проект Android Studio. Чтобы включить пакет пользовательского интерфейса, скопируйте общий URL-адрес, который мы создали в предыдущем разделе, в мастер импорта Android Studio.
Загрузите предварительно настроенный ZIP-файл проекта Android Studio (это тот же проект, что и на странице установки реле ).
Дважды щелкните файл, чтобы разархивировать его, в результате чего будет создана папка с именем HelloFigma . Переместите его в свою домашнюю папку..
Вернитесь в Android Studio. Перейдите в «Файл» > «Открыть» , перейдите в свою домашнюю папку, выберите «HelloFigma» и нажмите «Открыть» .
Когда вы открываете проект, Android Studio может спросить вас, доверяете ли вы этому проекту. Нажмите «Доверить проекту» .
В Android Studio выберите «Файл» > «Создать» > «Импортировать пакеты пользовательского интерфейса…» .
В диалоговом окне «Импорт пакетов пользовательского интерфейса» вставьте URL-адрес вашего файла Figma и нажмите «Далее» .
Подождите, пока файл загрузится. При успешной загрузке отображается предварительный просмотр компонента. Нажмите Создать .
Обратите внимание, что в ваш проект были добавлены новые файлы — они должны быть переданы в систему контроля версий как часть вашего проекта. В представлении 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 для Android Studio, используемая для импорта пакета пользовательского интерфейса.app/ui-packages/hello_card/config.json
Тема, используемая для предварительного просмотра.
Сборка и генерация кода
Нажмите на
для создания вашего проекта.
Чтобы просмотреть результат сборки, перейдите на вкладку «Сборка» .
Сгенерированный код теперь добавлен в ваш проект. Поскольку это сгенерированный код, его не следует передавать в систему контроля версий как часть вашего проекта. В представлении Android вашего проекта вы можете просмотреть:
app/java (generated)/com/example/hellofigma/hellocard
Сгенерированный код и шрифты Jetpack Compose.app/java (generated)/com/google/relay/compose
Общий код среды выполнения, который используется во всех пакетах пользовательского интерфейса.
Откройте
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) {...
Интегрируйте компонент и запустите приложение
Теперь давайте интегрируем компонент в основное действие.
В
app/java/com/example/hellofigma/MainActivity.kt
добавьте в раздел импорта вверху:import com.example.hellofigma.hellocard.HelloCard
Далее в том же файле измените следующий код в классе
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 } } } } }
Далее в том же файле в предварительном просмотре компонуемого измените одну строку:
@Preview(showBackground = true) @Composable fun DefaultPreview() { HelloFigmaTheme { HelloCard() // Change this line } }
Убедитесь, что устройство выбрано на панели инструментов.
Запустите проект, нажав ▶ на панели инструментов.
Эмулятор загрузится, проект будет собран, и ваше приложение запустится.
Поздравляем! Вы успешно включили свой первый компонент Figma в приложение Jetpack Compose!
Следующий шаг
Создание и распространение обновлений дизайна
Теперь, когда у вас есть сквозной рабочий пример, давайте посмотрим, как обновить исходный дизайн и перегенерировать наш код.
{% дословно %}Рекомендуется для вас
- Примечание: текст ссылки отображается, когда JavaScript отключен.
- Параметры контента
- Создание и распространение обновлений дизайна
- Обработка вариантов дизайна