Recently launched in alpha, Relay is a design-to-code solution aiming to radically transform the way UI designers and UI developers collaborate to create Android UI components by removing the need for UI specs.
Relay makes it possible for designers to create UI components in Figma and export/import them into Android Studio to generate pixel-perfect Compose code. It consists of three plugins: the Relay for Figma plugin, the Relay for Android Studio plugin, and the Relay Gradle plugin.
Designers use the Relay for Figma plugin to annotate and package UI components for developer use, including information about layout, styling, dynamic content and interaction behavior. These UI Packages provide a shared model for UI components, and can be exchanged and updated in a collaboration between designers and developers.
According to Google Material Design senior staff designer Damon Seeley, the solution speeds up the development process by making away with design specifications as the meeting point between designers and developers and reducing the loops around them. This is enabled by UI packages including both styles and themes as well as references to components that exist in code and that can be updated directly in Figma as the product evolves.
Feedback from early access adopters shows a 10x acceleration in a team’s time to their first UI implementation, and further iterations come faster too.
To better handle the evolution of UI packages, Relay explicitly supports component versioning including the possibility of defining parameters to describe dynamic content that will be provided at runtime.
Relay components may have interactive parts which are associated to interaction handlers. Those handlers are translated into parameters to the component's initializer, so developers can supply their implementation when instantiating the component.
// Design to select for NewsCard
enum class View {
HeroItem, ArticleItem, AudioItem
}
/**
* Displays a summary of a news article.
*
* This composable was generated from the UI package 'news_card'.
* Generated code; do not edit directly
*/
@Composable
fun NewsCard(
onNewsCardTapped: () -> Unit = {},
thumbnail: Painter,
headline: String,
author: String,
date: String,
onMenuTapped: () -> Unit = {},
modifier: Modifier = Modifier,
view: View = View.HeroItem
) {
The Relay for Figma plugin can also be used to create design variants, which are variations for different states or sizes. Design variants are translated into component variants when imported into Android Studio.
As mentioned, Relay is still only alpha quality, so it only supports a limited number of layer types and Figma features. It can be installed on Android Studio 2020.3.1 Arctic Fox or higher.