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