Google Launches Relay to Transform and Accelerate Android UI Creation

InfoQ Homepage News Google Launches Relay to Transform and Accelerate Android UI Creation

Nov 16, 2022 2 min read

by

Sergio De Simone

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.

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.

Presented by: Sean Chittenden - Director of Engineering

Save your seat

Writing for InfoQ has opened many doors and increased career opportunities for me. I was able to deeply engage with experts and thought leaders to learn more about the topics I covered. And I can also disseminate my learnings to the wider tech community and understand how the technologies are used in the real world.

I discovered InfoQ's contributor program earlier this year and have enjoyed it since then! In addition to providing me with a platform to share learning with a global community of software developers, InfoQ's peer-to-peer review system has significantly improved my writing. If you’re searching for a place to share your software expertise, start contributing to InfoQ.

I started writing news for the InfoQ .NET queue as a way of keeping up to date with technology, but I got so much more out of it. I met knowledgeable people, got global visibility, and improved my writing skills.

Becoming an editor for InfoQ was one of the best decisions of my career. It has challenged me and helped me grow in so many ways. We'd love to have more people join our team.

InfoQ seeks a full-time Editor-in-Chief to join C4Media's international, always remote team. Join us to cover the most innovative technologies of our time, collaborate with the world's brightest software practitioners, and help more than 1.6 million dev teams adopt new technologies and practices that push the boundaries of what software and teams can deliver!

A round-up of last week's content on InfoQ sent out every Tuesday. Join a community of over 250,000 senior developers. View an example

We protect your privacy.

You need to Register an InfoQ account or Login or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p