概述

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 包。