处理设计变体

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

Figma 插件 Relay 为我们的组件添加了额外的信息，这样我们就可以与使用我们组件的开发人员协作。

  1. 在您的文件中打开 Figma 插件 Relay（在菜单栏中：插件 > 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 代码。从预览中，我们可以看到 NewsCard 组件的三个变体已从 Figma 转换为代码。让我们仔细看看代码。

    Preview of the NewsCard component

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

    Variants in Figma and corresponding View enum

  4. NewsCard 可组合项是根据 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
) {...}

下一步

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

内容参数

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