安装中继

Relay 由三个部分组成,每个部分都需要单独安装:

  1. Relay for Figma 插件
  2. Relay for Android Studio 插件
  3. Relay Gradle 插件

前提条件

  • 您需要登录 Figma 账号
  • 您已安装 Android Studio 2022.2.1 Flamingo 或更高版本。
  • 您已安装 Java 运行时
  • 您使用的是 Jetpack Compose 1.2 或更高版本。
  • 您使用的是 Gradle 插件 8.0 或更高版本。

安装 Relay for Figma 插件

借助 Relay for Figma 插件,使用 Figma 的任何用户都可以为其设计添加注解,并分享给使用 Android Studio 和 Jetpack Compose 的开发者。

Relay for Figma 插件已发布到 Figma 的社区插件市场。如需安装该插件,请执行以下操作:

  1. 前往 Figma 网站上的 Relay for Figma 插件页面
  2. 点击页面右上角的 Try it out

    Figma 插件页面上的“Try it out”按钮
  3. 您可能会看到一个对话框,询问您是否要使用该插件。在对话框中,选择您的组织。在极少数情况下,您的组织可能会停用公共插件。对于这种情况,请选择 External teams 选项。

    对话框中的“External teams”选项

    这会打开一个 Figma 文件,其中显示了插件信息页面。点击 ... 并选择 Save,以确保您可以轻松地重复使用该插件。

    插件信息页面中的“Save”选项
  4. 现在,点击 Run

    您可以查看在 Figma 画布中运行的插件:

    Relay for Figma

安装 Relay for Android Studio 插件

借助 Relay for Android Studio 插件,在 Android Studio 中工作的开发者可以使用 Relay for Figma 插件导入已添加设计 intent 信息注解的设计。该插件已发布到 Android Studio 插件市场。请按以下步骤安装:

  1. 打开 Android Studio。
  2. 从主菜单中执行以下操作:
    • 对于 macOS,依次选择 Android Studio > Preferences
    • 如果您使用的是 Windows 和 Linux,请依次选择 File > Settings
  3. 选择 Plugins
  4. 选择“Marketplace”标签页,搜索“Relay for Android Studio”并选择 Google 发布的插件:

    市场中的 Relay for Android Studio
  5. 点击 Install

  6. 安装完成后,点击 Restart IDE

  7. 如需确认安装成功,请打开 PreferencesSettings,然后点击 Plugins。您应在“Installed”部分看到 Relay for Android Studio

安装 Relay Gradle 插件

Relay Gradle 插件可以确保在 Figma 中使用 Relay for Figma 插件添加设计 intent 信息注解的设计在构建期间能够正确转换为代码。

Relay Gradle 插件发布到 Google Maven,这是一个包含许多 Gradle 插件的服务器。默认情况下,Android Studio 会调用一些 Gradle 操作,其中包括下载并安装项目引用的任何依赖项。

如需确保 Android Studio(以及 Gradle 本身)下载并安装 Relay Gradle 插件,您需要在项目中(具体而言是在模块目录的 build.gradle 文件中)将该插件指定为依赖项。这通常发生在 app/build.gradle 中。

app/build.gradle 文件顶部有一个部分列出了所有正在使用的插件。在此列表中添加 Relay Gradle 插件,Gradle 会下载并安装该插件。例如:

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.relay' version '0.3.11'
}

此外,请确保您的 settings.gradle 文件包含以下部分:

pluginManagement {
    repositories {
        gradlePluginPortal()
        google()
        mavenCentral()
    }
}

您也可以使用预配置项目,其中包括上述配置。

设置 Figma 访问权限

Relay 需要 Figma 个人访问令牌,以便下载您的 Figma 设计并将其转换为代码。如果您还没有该停牌,请执行以下操作:

  1. 打开 Figma 并登录 Figma。
  2. 转到文件浏览器。
  3. 点击账号图标,然后选择 Settings

    账号图标下的“Settings”选项
  4. 向下滚动到 Personal access tokens 部分。

  5. 输入令牌说明(例如“Relay”),然后按回车键。这会生成令牌。点击 Copy this token

    “settings”中的“Personal access tokens”部分
  6. 在 Android Studio 中,从主菜单中,依次选择 Tools > Relay Settings

    “Tools”下用于设置 Figma 访问令牌的“Relay settings”菜单选项
  7. 如果您之前已在 macOS 上设置了 Figma 访问令牌,则可能会看到以下对话框。通过此对话框,您可以了解 Android Studio 正在使用您现有的 Figma 访问令牌。输入密码,然后点击始终允许

    密钥链系统对话框
  8. 将您的 Figma 访问令牌粘贴到 Figma Access Token 输入框中。(如果这不是您第一次设置 Figma 访问令牌,您可能会看到 Existing Figma Access Token 输入框。)

    Figma Access Token 输入框
  9. 点击 OK

下载和设置预配置项目

如需下载和设置预配置项目,请执行以下操作:

  1. 下载项目 ZIP 文件
  2. 双击该文件以解压缩,这样将创建一个名为 HelloFigma 的文件夹。将其移至主文件夹。
  3. 返回 Android Studio。依次选择 File > Open,找到您的主文件夹,选择 HelloFigma,然后点击 Open
  4. 当您打开该项目时,Android Studio 会询问您是否信任该项目。点击 Trust Project

运行预配置项目

在模拟器或设备上运行应用。您应该会在空白屏幕中看到“Hello, Android!”。

模拟器中的启动状态

后续步骤

接下来,我们可以开始使用 Relay 来创建第一个设计了。

基本教程