设计图转Compose代码，Relay帮你轻松搞定

作者：黄林晴

前言

相信很多人看到本次分享分题目，第一反应都和我一样：Relay是什么？有什么用？和Compose有什么关系？不要着急，看完这篇文章，这些你都会了解。

Relay是什么

官方一点说：Relay 可以在设计人员和开发者之间即时移交 Android 界面组件。

设计人员：使用 Relay for Figma 插件为界面组件添加注解并进行打包，包括布局、样式、动态内容和交互行为的相关信息，以便于开发者使用。

开发者：使用 Relay for Android Studio 插件导入界面软件包，并生成完美的 Jetpack Compose 代码。

说了这么多，晦涩难懂，简单的说就是借助Relay可以直接根据UI图生成Compose代码，我们来看如何使用。

环境配置

基本配置

• 创建一个Figma账号

  Figma是一个专业的原型图或UI设计工具，设计师通常用此用来为开发者提供UI图。

• 最新版的Android Studio

• 安装Relay for Android Studio 插件

前两步没有什么好说的，下载好Android Studio之后我们来安装Relay插件。

安装好Relay插件之后，我们需要将Android Studio 关联到Figma，这要借助基本配置中的第一步。

Android Studio关联Figma

1. 在Figma 帐号中，点击页面顶部的个人资料图标，然后选择 Settings，如下图所示。

2. 选择 Personal access tokens ，生成Token，如下图所示。

生成Token后我们将token复制下来。

3. 设置Token

在Android Studio中选择 Tool->Relay Setting，将上一步骤生成的Token填入。

这样我们就将Android开发者的环境配置好了，除此之外，我们还要安装Relay for Figma插件。

安装Relay for Figma插件

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

我们可以直接点击Relay for Figma | Figma Community页面中的Try it out。