处理设计变体

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

起点

News card with tree variants

我们将从一个包含具有三个变体的新闻卡片组件的 Figma 文件开始。

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

复制 Figma 示例

在本教程中，我们将使用现有的 Figma 文件作为示例。请确保您已登录您的 Figma 帐户。

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

  2. 在 Figma 中，转到文件浏览器。在左侧，将鼠标悬停在“草稿”上。“+”图标将会出现——单击“+”图标，然后单击“导入”。选择您刚刚下载的HelloNews.fig文件。这可能需要 10 秒到一分钟的时间。

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

创建 UI 包

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

  1. 在您的文件中打开 Relay for Figma 插件（在菜单栏中：插件 > Relay for Figma）。单击开始。

  2. 选择组件并单击创建 UI 包。

    Create UI Package button on the plugin

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

    Summary box on the plugin

保存命名版本

现在您已创建 UI 包，请准备您的组件以与开发团队共享。

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

  4. 单击保存。

    示例标题：初始新闻卡片

    示例说明：新闻文章项目的第一次迭代

下载 Android Studio 项目

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

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

导入到 Android Studio

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

  1. 返回 Figma，复制新闻卡片教程 Figma 文件的 URL。我们将使用此 URL 导入我们的组件。在 Figma 的右上角，单击共享按钮。在打开的对话框中，单击复制链接。

    Copy Link option on the file tab

  2. 切换到 Android Studio 中的 HelloNews 项目。从 Android Studio 菜单栏中转到文件 > 新建 > 导入 UI 包…。

    Import UI Packages… option under the File menu

  3. 粘贴您的 Figma 文件的 URL 并单击下一步。

    Import UI Packages dialog
    Keychain system dialog
    1. 文件完成提取后（这可能需要一些时间），单击完成。
    Preview of the component

  4. 单击生成项目按钮以构建您的项目。这可能需要一分钟左右的时间。

    Build button in the toolbar

预览应用程序和组件

  1. 在 Android 视图中，打开app/java/com/example/hellonews/ui/home/HomeScreen.kt，您将看到应用程序的预览，该预览以纯文本格式显示几篇新闻文章，打印故事位于音频故事上方。

    Preview of the App

  2. 打开app/java (generated)/com/example/hellonews/newscard/NewsCard.kt。这是我们 Figma 组件生成的 Jetpack Compose 代码。从预览中，我们可以看到三个新闻卡片组件的变体已从 Figma 转换为代码。让我们仔细看看代码。

    Preview of the NewsCard component

  3. 该View枚举允许我们选择为此组件使用哪个变体。枚举及其值的名称是从我们 Figma 组件的变体派生的。这在我们新闻卡片组合组件中的view参数中使用。

    Variants in Figma and corresponding View enum

  4. 新闻卡片组合组件是从 UI 包生成的。它包含类型为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
) {...}

下一步

我们还没有准备好使用新闻卡片。该组件不知道如何显示不同的新闻故事，只知道 Figma 中相同的硬编码故事。因此，如果我们现在添加组件，我们只会得到重复的相同新闻故事。我们需要一种方法来指定新闻卡片的哪些部分应该填充动态数据。

内容参数

在本节中，我们将向新闻卡片组件添加内容参数。