在 Android Studio 中将设计转换为代码

从 Figma 导入设计

现在，我们将把在 Figma 中创建的 UI 包集成到 Android Studio 项目中。要集成 UI 包，请将我们在上一节中生成的共享 URL 复制到 Android Studio 的导入向导中。

下载预配置的 Android Studio 项目 ZIP 文件（与安装 Relay页面中的项目相同）。
双击该文件以解压缩，这将创建一个名为HelloFigma的文件夹。将其移动到您的主文件夹。
返回 Android Studio。转到文件 > 打开，导航到您的主文件夹，选择HelloFigma，然后点击打开。
打开项目时，Android Studio 可能会询问您是否信任该项目。点击信任项目。
在 Android Studio 中，选择文件 > 新建 > 导入 UI 包…。
在“导入 UI 包”对话框中，粘贴 Figma 文件的 URL 并点击下一步。

注意：如果您没有 Figma URL，请重复获取 URL的说明并返回此对话框。
注意：如果您看到密钥链提示，请输入您的密码并点击允许。

注意：如果您看到有关 Figma 访问令牌的对话框，请继续执行提示或重复设置 Figma 访问令牌的说明。
等待文件下载。下载成功后，将显示组件预览。点击创建。

注意：根据您使用的 Android Studio 版本，上述按钮可能显示完成而不是创建。

请注意，已向您的项目添加了新文件——这些文件应作为项目的一部分提交到源代码管理。在项目的 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
  用于导入 UI 包的 Android Studio 插件的 Relay 版本。
- app/ui-packages/hello_card/config.json
  用于预览的主题。

构建和生成代码

点击构建您的项目。
要查看构建结果，请点击构建选项卡。

注意：有关构建问题，请参阅此页面以获取常见故障排除。
现在已将生成的代码添加到您的项目中。由于这是生成的代码，因此不应将其作为项目的一部分提交到源代码管理。在项目的 Android 视图中，您可以查看
- app/java (generated)/com/example/hellofigma/hellocard
  生成的 Jetpack Compose 代码和字体。
- app/java (generated)/com/google/relay/compose
  在所有 UI 包中使用的共享运行时代码。
打开app/java (generated)/com/example/hellofigma/hellocard/HelloCard.kt。这是 Figma 组件的生成 Jetpack Compose 函数。您还可以预览该组件。

布局、资产和样式信息现在已从 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 应用中！

下一步

进行并传播设计更新

现在您已经拥有了一个端到端的运行示例，让我们看看如何更新原始设计并重新生成代码。