处理设计变体

在 Figma 中，变体用于将 相同的组件，例如不同的状态或尺寸。中继保留 组件在转换为代码后的各种变体在本部分中，我们将介绍 Relay 处理设计中的变体的方式。

起点

我们先来看一个包含 News Card 组件的 Figma 文件，其中 变体：

• hero-item，适用于最重要的新闻报道
• article-item 适用于典型报道
• audio-item 表示您聆听而不是阅读的文章

复制 Figma 示例

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

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

2. 在 Figma 中，前往文件浏览器。在左侧，将鼠标悬停在 草稿。系统会显示 + 图标 - 点击 + 图标，然后点击导入。 选择您刚刚下载的 HelloNews.fig 文件。这可能需要 从 10 秒到 1 分钟不等

   

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

创建界面软件包

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

1. 在文件（在菜单栏中：Plugins > Relay）中打开 Relay for Figma 插件 （适用于 Figma）。点击开始使用。

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

   

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

   <ph type="x-smartling-placeholder">

   </ph>

   注意： 此说明将以注释的形式传播到生成的代码 放在生成的可组合函数上方。

保存已命名的版本

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

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

4. 点击 Save。

   标题示例：初始新卡片

   描述示例：新闻报道项目的首次迭代

下载 Android Studio 项目

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

1. 下载示例 HelloNews.zip 文件。
2. 双击以解压该文件，这将创建一个名为 HelloNews。将其移至主文件夹。
3. 返回 Android Studio。转到文件 >打开，导航到您的住宅 文件夹中，选择 HelloNews，然后点击 Open。
4. 当您打开该项目时，Android Studio 会询问您是否信任该项目。点击 Trust Project。

导入 Android Studio

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

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

   

2. 在 Android Studio 中切换到 HelloNews 项目。转到文件 >新建 >导入 UI Packages...。

   

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

   <ph type="x-smartling-placeholder">

   </ph>

   注意 ：如果您没有 Figma 网址，请重复第 1 步，然后返回
   注意： 如果您看到钥匙串提示，请输入密码并点击“允许”。
   <ph type="x-smartling-placeholder">

   </ph>

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

   

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

   <ph type="x-smartling-placeholder">

   </ph>

   注意： 点击应用底部的 Build 标签页即可查看 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 组件添加内容参数。