安装 Relay

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

  1. Figma 插件的中继器
  2. Android Studio 插件的中继器
  3. Relay Gradle 插件

先决条件

  • 您必须登录到 Figma 帐户
  • 您已安装 Android Studio 2022.2.1 Flamingo 或更高版本。
  • 您已安装 Java 运行时环境
  • 您正在使用 Jetpack Compose 1.2 或更高版本。
  • 您正在使用 Gradle 插件 8.0 或更高版本。

安装 Figma 中继器插件

Figma 中继器插件允许在 Figma 中工作的任何人都可以注释他们的设计并与使用 Android Studio 和 Jetpack Compose 的开发人员共享。

Figma 中继器插件发布到 Figma 的社区插件市场。要安装插件

  1. 访问 Figma 网站上的 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

安装 Android Studio 中继器插件

Android Studio 中继器插件使在 Android Studio 中工作的开发人员能够导入使用 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 插件确保在构建期间正确地将 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 创建我们的第一个设计。

基本教程