Android Studio 工作流程

导入 UI 包

在 Figma 中创建 UI 包后，您可以将其导入到您的 Android Studio 项目中。构建项目时，Relay 会生成 Jetpack Compose 代码。

要将 UI 包导入到 Android Studio 项目中

  1. 选择**文件 > 新建 > 导入 UI 包…**

    Import UI Packages… option under the File menu

  2. 输入包含 UI 包的 Figma 文件的 URL。

    Import UI Packages dialog

  3. 点击下一步。

  4. 选择您想要导入的UI包。显示的组件取决于您粘贴的是组件、页面还是文件链接。如果UI包已导入，则标记为“已更新”。否则，显示为“新建”。

    Preview of the components

  5. 点击完成将选定的包及其依赖项导入到ui-packages文件夹中。

UI包导入屏幕

导入屏幕包含以下信息

UI Package import screen
  • 组件及其变体的预览图像。
  • 标题和描述。
  • 变体及其属性的列表。
  • 内容参数及其类型的列表。
  • 交互处理程序及其类型的列表。

UI包工具窗口

UI Package Sidebar

Android Studio插件添加了一个名为UI包的工具窗口。当您选择UI包文件夹中的文件（例如app/src/main/ui-packages/mycomponent/）时，它就会打开。该工具窗口显示UI包及其内容的摘要。

构建您的Android项目

当您构建包含UI包的Android Studio项目时，Relay Gradle插件会从UI包生成代码并进行编译。字体资源也会下载并复制到您的项目中。

如果您只想构建导入的UI包而不是整个项目，可以运行这些特定的Gradle任务

  • generateDebugRelayCode或generateReleaseRelayCode生成从UI包派生的代码的调试或发布版本。
  • generateRelayRuntimeCode创建生成的代码使用的运行时库。

在构建过程中

  1. 从UI包生成代码并存储在单独的文件夹中。
  2. 图像和字体复制到一个通用的生成资源文件夹中。

文件夹的位置在了解UI包和生成代码中进行了说明。

更新UI包

当设计的新版本准备就绪时，设计师应创建Figma文件的新的命名版本。

在Android Studio中，确保“项目”工具窗口处于Android视图。

  1. 在模块中的ui-packages文件夹下，右键单击要更新的UI包文件夹，然后选择更新UI包。在以下示例中，我们选择了五个UI包进行更新。

    Update 5 UI Packages option in the context menu

  2. 您也可以右键单击ui-packages文件夹以更新所有UI包。

    Update All UI Packages option in the context menu