在 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 中将设计转换为代码