在 Figma 中创建 UI 包

下载预配置的 Figma 文件

让我们从在 Figma 中创建一个组件开始。在本教程中，我们将使用一个现有的 Figma 文件作为示例。该文件包含一个带有图像和标题的自动布局框架。确保您已登录 Figma 帐户。

  1. 将此 Figma 文件下载到您的计算机：HelloFigma.fig.

  2. 在 Figma 的文件浏览器中，将鼠标悬停在 草稿 上。将出现一个 + 图标。点击 +，然后 导入...，选择您刚刚下载的 HelloFigma.fig 文件。

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

创建组件

要将导入的设计与 Relay for Figma 插件一起使用，我们首先需要将其转换为组件。选择 Hello Card 框架，然后从工具栏中点击 创建组件。

Create component icon in the toolbar

创建 UI 包

Relay for Figma 插件将额外的信息添加到组件中，以便您可以与开发人员合作，他们可以在其代码中使用该组件。

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

    Create UI Package button in the plugin

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

    Create UI Package button in the plugin

  3. 选择 UI 包后，在 摘要 中添加描述。例如：“用于显示图像和标题内容的 Hello Card 组件”

    Summary box in the plugin

  4. 点击对话框右下角的 与开发人员共享，进入下一步。

与开发人员共享流程

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

为组件文件创建新的命名版本。使用组件的命名版本可以防止意外更改影响生产组件。

Summary box in the plugin

  1. 输入此组件第一个版本的名称和描述，然后点击 保存。

    Summary box in the plugin

  2. 接下来，创建可共享的组件链接，并通过在 Mac 上输入 CMD-L 或在 Windows 上输入 CTRL-L 将其复制到剪贴板。

    Summary box in the plugin

下一步

现在，您已准备好将您的 UI 组件移交给 Android Studio。

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

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