概览

Card component with image and title

本基础教程将向您展示 Relay 的设计人员和开发人员工作流程，提供完整的端到端初体验。完成 Relay 插件设置后，您可以快速进入在 Android Studio 中看到 UI 界面显示的阶段。我们鼓励您坚持下去！

本教程将在 Figma 中创建一个基本的卡片组件，并将其导入到 Android Studio 中，您可以在其中查看生成的代码。您将学习如何执行以下操作

在 Figma 中

  1. 在 Figma 中设计 UI 组件。
  2. 使用 Figma 插件创建 UI 包。
  3. 保存设计的名为版本。
  4. 与开发人员共享 Figma URL。

在 Android Studio 中

  1. 使用 Figma URL 将 UI 包导入项目。
  2. 通过构建项目生成 Jetpack Compose 代码。
  3. 在项目的 UI 代码中添加对生成的组合项的引用。
  4. 运行项目。

下一步

首先，让我们进行设计并在 Figma 中创建 UI 包。