处理设计变体

在 Figma 中，变体用于将同一组件的不同变体（例如不同的状态或大小）组合在一起。Relay 会在组件转换为代码时保留其变体。在本部分中，我们将介绍 Relay 如何处理设计中的变体。

起点

我们首先创建一个 Figma 文件，该文件包含一个 News Card 组件，该组件具有以下三个变体：

• hero-item 适用于最重要的新闻报道
• article-item 适用于典型报道
• audio-item 用于您收听而不是阅读的报道

复制 Figma 示例

在本教程中，我们将使用一个现有 Figma 文件进行演示。确保您已登录 Figma 账号。

1. 将 HelloNews.fig 下载到您的计算机。

2. 在 Figma 中，前往文件浏览器。在左侧，将光标悬停在“Drafts”（草稿）上。+ 图标 - 点击 + 图标，然后点击导入。 选择您刚刚下载的 HelloNews.fig 文件。这可能需要 10 秒到 1 分钟的时间。

   

3. 在 Figma 中打开导入的文件。

创建界面软件包

Relay for Figma 插件会向我们的组件添加额外的信息，因此我们可以与将在其代码中使用该组件的开发者合作。

1. 在文件中打开 Relay for Figma 插件（在菜单栏中依次选择 Plugins > Relay for Figma）。点击开始使用。

2. 选择相应组件，然后点击 Create UI Package。

   

3. 选择界面软件包后，向摘要框中添加说明。例如：“用于显示列表的新闻项的新闻卡片组件”。

   

   注意 ：此说明将作为注释传播到生成的代码，并在生成的可组合函数上方显示。

保存已命名的版本

现在，您已经创建了界面软件包，接下来请准备您的组件以与开发团队共享。

1. 打开 Figma Relay 插件（如果尚未打开）。
2. 点击与开发者分享。
3. 在与开发者分享屏幕中，您可以在保存版本记录部分输入新的版本名称和说明。

4. 点击保存。

   标题示例：初始新卡片

   说明示例：新闻报道项目的第一次迭代

下载 Android Studio 项目

对于本教程的 Android Studio 部分，我们将使用预配置的 Android Studio 项目。此项目包含一个以纯文本格式显示新闻报道的应用。

1. 下载示例 HelloNews.zip 文件。
2. 双击该文件进行解压缩，这将创建一个名为“HelloNews”的文件夹。将其移至主文件夹。
3. 返回 Android Studio。依次点击 File > Open，前往主文件夹，选择 HelloNews，然后点击 Open。
4. 当您打开该项目时，Android Studio 会询问您是否信任该项目。点击 Trust Project。

导入 Android Studio

让我们将 Figma 组件导入项目中。

1. 返回 Figma，复制 News Card 教程 Figma 文件的网址。我们将使用此网址导入组件。在 Figma 的右上角，点击 Share 按钮。在打开的对话框中，点击复制链接。

   

2. 在 Android Studio 中切换到 HelloNews 项目。从 Android Studio 菜单栏中依次前往 File > New > Import UI Packages...。

   

3. 粘贴 Figma 文件的网址，然后点击 Next。

   

   注意：如果您没有 Figma 网址，请重复第 1 步，然后返回到此对话框。
   注意：如果您看到钥匙串提示，请输入密码并点击“允许”。

   

   注意 ：如果您看到有关 Figma 访问令牌的对话框，请重复相关说明设置安装中的 Figma 访问令牌
   1. 文件提取完毕后（可能需要一些时间），点击 Finish。

   

4. 点击 以构建您的项目。这可能需要一分钟左右。

   

   注意 ：点击应用底部的 Build 标签页可查看构建结果。

预览应用和组件

1. 在 Android 视图中，打开 app/java/com/example/hellonews/ui/home/HomeScreen.kt，您将看到应用的预览，其中以纯文本格式显示几篇新闻报道，音频报道上方显示了印刷报道。

   

2. 打开 app/java (generated)/com/example/hellonews/newscard/NewsCard.kt。这是为 Figma 组件生成的 Jetpack Compose 代码。在预览版中，我们可以看到 NewsCard 组件的三个变体已从 Figma 转换为代码。我们来详细了解一下代码。

   

3. View 枚举允许我们选择要用于此组件的变体。枚举的名称及其值派生自 Figma 组件的变体。这用于 NewsCard 可组合项的 view 参数。

   

4. NewsCard 可组合项是从界面软件包生成的。它包含一个类型为 View 的参数，该参数用于设置要实例化的新闻卡片的变体。

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * This composable was generated from the UI Package 'news_card'.
   * Generated code; do not edit directly
   */
   @Composable
   fun NewsCard(
       modifier: Modifier = Modifier,
       view: View = View.HeroItem
   ) {...}
   
   

后续步骤

我们尚未准备好使用 NewsCard。该组件不知道如何显示不同的新闻报道，只在 Figma 中显示同一个经过硬编码的新闻报道。因此，如果我们现在添加该组件，则只会得到相同的新闻报道。我们需要一种方法来指定 NewsCard 的哪些部分应该填充动态数据。

内容参数

在本部分中，我们将向 NewsCard 组件添加内容参数。