在 Figma 中创建界面软件包

下载预配置的 Figma 文件

首先,在 Figma 中创建组件。在本教程中,我们将使用一个现有的 Figma 文件作为示例。此文件包含一个带有图片和标题的自动布局框架。确保您已登录 Figma 帐号。

  1. 将此 Figma 文件下载到您的计算机:HelloFigma.fig
  2. 在 Figma 的文件浏览器中,将鼠标悬停在 Drafts 上。系统会显示 + 图标。依次点击 +Import...,然后选择您刚刚下载的 HelloFigma.fig 文件。

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

创建组件

为了将导入的设计与 Relay for Figma 插件搭配使用,我们首先需要将其转换为组件。选择 Hello Card 框架,然后从工具栏中点击 Create Component

工具栏中的“创建组件”图标

创建界面软件包

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

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

    插件中的“创建界面软件包”按钮
  2. 选择相应组件,然后点击 Create UI Package

    插件中的“创建界面软件包”按钮
  3. 选择界面软件包后,向 Summary 添加说明。例如:“用于显示图片和标题内容的 Hello Card 组件”

    插件中的摘要框
  4. 点击对话框右下角的与开发者分享,即可转到下一屏幕。

与开发者分享流程

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

为组件文件创建新的已命名版本。使用组件的已命名版本可防止不必要的更改影响生产组件。

插件中的摘要框

  1. 为此组件的第一个版本输入名称和说明,然后点击保存

    插件中的摘要框
  2. 接下来,创建一个可共享的组件链接,并通过在 Mac 上按 CMD-L 或在 Windows 上按 CTRL-L 将其复制到剪贴板。

    插件中的摘要框

后续步骤

现在,您可以将界面组件移交给 Android Studio 了。

打开 Android Studio 以完成本教程的下一部分。

在 Android Studio 中将设计转换为代码