安装 Relay

Relay 由三个部分组成,每个部分都必须单独安装

  1. 适用于 Figma 的 Relay 插件
  2. 适用于 Android Studio 的 Relay 插件

  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 button on Figma plugin page
  3. 您可能会遇到一个对话框,询问您是否要使用该插件。在对话框中,选择您的组织。在极少数情况下,您的组织可能会禁用公共插件。如果是这样,请选择外部团队选项。

    External teams option in the dialog

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

    Save option in the plugin information page
  4. 现在,点击运行

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

    Relay for Figma

安装 Relay for Android Studio 插件

Relay for Android Studio 插件使在 Android Studio 中工作的开发人员能够导入使用 Relay for Figma 插件已用设计意图信息进行注释的设计。该插件已发布到 Android Studio 插件市场。要安装,请执行以下操作

  1. 打开 Android Studio。
  2. 从主菜单
    • 对于 macOS,选择Android Studio > 首选项
    • 对于 Windows 和 Linux,选择文件 > 设置
  3. 选择插件
  4. 选择“市场”选项卡,搜索:“Relay for Android Studio”,然后选择 Google 发布的插件

    Relay for Android Studio in the marketplace
  5. 点击安装

  6. 安装完成后,点击重新启动 IDE

  7. 要确认安装成功,请打开首选项设置,然后转到插件。您应该在“已安装”部分看到Relay for Android Studio

安装 Relay Gradle 插件

Relay Gradle 插件确保使用 Relay for Figma 插件用设计意图信息注释的 Figma 中的设计在构建过程中正确转换为代码。

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.12'
}

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

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

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

设置 Figma 访问权限

Relay 需要一个Figma 个人访问令牌,以便它可以下载您的 Figma 设计并将其转换为代码。如果您还没有

  1. 打开 Figma 并登录 Figma。
  2. 转到文件浏览器。
  3. 点击您的帐户图标并选择设置

    Settings under the account icon
  4. 向下滚动到个人访问令牌部分。

  5. 输入令牌描述,例如“Relay”,然后按回车键。将生成一个令牌。点击复制此令牌

    Personal access tokens in the settings
  6. 在 Android Studio 中,从主菜单中选择工具 > Relay 设置

    Relay settings menu option under Tools to setup Figma access token
  7. 如果您之前在 macOS 上设置了 Figma 访问令牌,您可能会看到以下对话框。此对话框让您知道 Android Studio 正在使用您现有的 Figma 访问令牌。输入您的密码,然后点击始终允许

    Keychain system dialog
  8. 将您的 Figma 访问令牌粘贴到Figma 访问令牌输入框中。(如果这不是您第一次设置 Figma 访问令牌,您可能会看到现有 Figma 访问令牌输入框。)

    Figma Access Token input
  9. 点击确定

下载并设置预配置项目

要下载并设置预配置项目,请执行以下操作

  1. 下载 项目 ZIP 文件
  2. 双击该文件以将其解压缩,这将创建一个名为HelloFigma的文件夹。将其移动到您的主文件夹。
  3. 返回 Android Studio。转到文件 > 打开,导航到您的主文件夹,选择HelloFigma,然后点击打开
  4. 打开项目时,Android Studio 可能会询问您是否信任该项目。点击信任项目

运行预配置项目

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

The starting state in the emulator

下一步

现在,我们准备使用 Relay 创建我们的第一个设计。

基本教程