Relay And Jetpack Compose : Simplifying Android UI

What’s Relay?

Relay is a tool that helps app development teams using Figma and Compose build great UI fast. It helps to improve communication between designers and developers by providing a shared understanding of the UI design. This is a simple process of converting the design into code.

• Designers can use Relay to add annotations to their Figma designs. These annotations can include information about the layout, styling, dynamic content, and interaction behavior of the design.
• Developers can then use the Relay for Android Studio plugin to import these annotated designs into Android Studio. Relay will then generate Jetpack Compose code that is based on the annotations.
• This code can then be used to build the Android app.

How to use Relay?

Here are the steps on how to use Relay:

1. Install the Relay for Figma and Relay for Android Studio plugins.
2. Annotate your Figma designs with design intent information.
3. Import your annotated designs into Android Studio.
4. Edit the generated Jetpack Compose code as needed.

Let’s understand each steps in details.

Installing the Relay plugins

To install the Relay plugins, you will need to have the following:

• Figma 2021.2 or later
• Android Studio 4.2 or later
• Java 11 or later
• Jetpack Compose version 1.2 or later.

Once you have the necessary software, you can install the Relay plugins by following these steps:

Install Relay for Figma

Go to the Relay for Figma plugin page on Figma’s website.

On the top right of the page, click ‘Try it out

You can view the plugin running in the Figma canvas:

Install Relay for Android Studio

Open Android Studio and from the main menu, for macOS, select Android Studio > Preferences and for or Windows and Linux, select File > Settings. Select Plugins.

Select the Marketplace tab, search for “Relay for Android Studio”, and select the plugin.

Click ‘Install’ and after the installation, click ‘Restart IDE’.

Install Relay gradle plugin

 Add the Relay Gradle plugin in the app/build.gradle 

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

also, add this into your settings.gradle file

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

Annotating your Figma designs

Create a Figma file, select all the layers and click on the ‘create component’

Open the Relay for Figma plugin, select the component and click ‘create UI Package’

Annotating your Figma designs is the process of adding additional information to your designs to help developers understand how they should be implemented. This information can include things like the layout, styling, dynamic content, and interaction behavior of your designs.

Once you have installed the Relay plugins, you can start annotating your Figma designs with design intent information. To do this, you will need to select the element in your design that you want to annotate, and then click on the Relay button in the toolbar. This will open a dialog box where you can enter the design intent information.

The design intent information that you can annotate your designs with includes the following:

• Layout: You can annotate the layout of your designs by specifying the position, size, and alignment of elements.
• Styling: You can annotate the styling of your designs by specifying the colors, fonts, and sizes of elements.
• Dynamic content: You can annotate the dynamic content of your designs by specifying the data sources and the way that data is displayed.
• Interaction behavior: You can annotate the interaction behavior of your designs by specifying the events that trigger actions and the way that actions are performed.

Now annotate your Figma design to add the information about the component and click on ‘share with developer’, after that add your version details and save it.

Import your designs into Android Studio

Once you have annotated your Figma designs, you can import them into Android Studio. After that Relay will generate the corresponding Jetpack Compose code.

To do this, you will need to open Android Studio and select the File menu. In the File menu, select ‘Import UI Packages’. Add Figma access token which you can get from Figma -> account setting -> generate personal token.

Add Figma file URL, click Next and after that click create.

You will see these files will be added in your project.

Build your project and you will see this section in your project.

Open Component1.kt and you will see the exact design as figma in the preview section. Looks interesting. Isn’t it?

Editing the generated Jetpack Compose code

The generated Jetpack Compose code is based on the design intent information that you specified in your Figma designs. You can edit this code as needed to complete your Android app.

Now add this code to your MainActivity.

import com.example.blogapptheme.component1.Component1

Also add this component in the preview method:

Now run the project by clicking ▶. You will see the exact design as Figma on your mobile screen.

Voila! You have successfully converted the Figma file into android studio jetpack compose code.

Conclusion

Relay is a powerful tool that accelerates the process of Android app development. It can help to improve communication, reduce code duplication, and increase code quality. If you are looking for a way to improve the efficiency and quality of your Android app development process, then Relay is a great option to consider.

Thanks for reading this article! If you have any query related to Android, I’m always happy to help you. You can reach me on Twitter and LinkedIn.