The Android Developer’s Guide To Relay
What is Relay?
Relay is a tool that streamlines the process of creating and implementing Android UI components. Designers can use the Relay for Figma plugin to annotate and package UI elements, including information about layout, styling, dynamic content, and interaction behavior. These packages can then be imported into Android Studio by developers, who use the Relay for Android Studio plugin to generate pixel-perfect Jetpack Compose code. This code is automatically styled and laid out according to the designer’s specifications, which speeds up the process of binding data. With Relay, there is no need for detailed design specifications or back-and-forth communication between designers and developers. Additionally, as the product evolves, UI packages can be updated and extended incrementally throughout the codebase.
Relay supports some features of Figma, such as Text,Image nodes. However, it may not support all of Figma’s features, so be mindful of this and for any unsupported content, you can access it through the website https://developer.android.com/jetpack/compose/tooling/relay/limitations-and-troubleshooting
Let’s make an example.
Download a Figma file
Please download HelloFigma.fig and open it.
Add Relay Plugin to Figma
When you open Figma, you will see a project like this.
Create UI Package
Select the project you have made and mark it as a component, then open the Relay plugin that we added. It will automatically show you the “Create UI package” button.
After you press the “Create UI Package” button, a page like the following will open. Also currently, we will not be discussing the parameters, but I have another series of articles where I would like to explain them.
For now, after entering only the description, let’s click on the “File” -> “Save to version history” button.
Install Relay to Android Studio
We have created our project now let’s open android studio and add the relay plugin. Also, if our project is selected in the material design system, there will be no build issues. Download Relay plugin and restart IDE.
After reopening the IDE, we have to add a feature to our build.gradle file. With this feature, we will be able to get the relay outputs through the composable function.
Import Figma Folder To AS
By going to File-New-> Import UI Packages, we can import the designs we created in Figma into Android Studio.
The window will appear as such.
After clicking the relevant button, a screen like the one below will appear. At this step, Figma may ask for a personal access token, if so please create a PAT. Then, instead of the project URL we see on the screen, we paste the link that appears when we share the project in Figma.
If everything is on the right track, we will be greeted by a page like this. Press the create button in the relevant window.
After that, generated files will appear in your project files. If it does not open, right-click on the app in the project view and then click the reload from disk button. Our design will appear as a UI Package, as shown in the image. From now on, we need the output as a compose, so we will press the make project button. In this way, the design files in the generated file will be converted into a single composable function.
Results
If everything goes well, the composable function should be added to your files. Sometimes, the steps of clean project and rebuild project may be necessary in these steps.
This is what the kotlin file looks like.
Conclusion
Some values may be specifically inputted, or the structure may appear simple in general, but I believe this plugin can save developers a significant amount of time.
See you later..
