处理设计变体

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

起点

包含树状变体的新闻卡片

我们首先从一个包含 News Card 组件的 Figma 文件开始,该文件具有以下三个变体:

  • 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

    插件上的“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 按钮。在打开的对话框中,点击 Copy Link

    文件标签页上的“Copy Link”选项
  2. 在 Android Studio 中切换到 HelloNews 项目。从 Android Studio 菜单栏中依次前往 File > New > Import UI Packages...

    “File”菜单中的“Import UI Packages...”选项
  3. 粘贴 Figma 文件的网址,然后点击 Next

    “Import UI Packages”对话框
    密钥链系统对话框
    的说明
    1. 文件提取完毕后(可能需要一些时间),点击 Finish
    组件预览
  4. 点击 “Make Project”按钮 以构建您的项目。这可能需要一分钟左右。

    工具栏中的“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 转换为代码。我们来详细了解一下相关代码。

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

    Figma 中的变体和相应的 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 组件添加内容参数。