[MUSIC PLAYING]
SEAN ARIETTA: Hi.
I'm Sean, an engineer.
DIAN XIANG: I'm Dian, an interaction designer.
SEAN ARIETTA: We're part of the team building
Relay, a new UI toolchain for better
designer-developer collaboration.
Dian and I are going to tell you a bit about the problems
we're solving and how Relay can help you.
Today, delivering pixel-perfect UI
is slow, inaccurate, and complicated.
It requires a ton of back and forth
between designers and developers.
It requires fragmented design artifacts living in files,
emails, tickets, et cetera.
And design intent, such as color, typefaces, and behavior,
is misinterpreted or simply lost in the swirl of collaboration.
We refer to this phenomenon as the handoff problem.
It's one of the biggest frustrations we've
experienced in our own work.
And when we speak to you all, we hear about this challenge
again and again.
Today, we're excited to release an alpha version of Relay
for Android, our first big step towards solving the handoff
problem.
At the heart of Relay is a simple but powerful
idea, a shared model for UI components
that allows constant collaboration between designers
and developers.
We call this a UI package.
Using this model, early users of Relay
are finding they can go from design to implementation
much faster and can update and iterate more quickly.
I'll hand it off to my colleague Dian
to give you a sense for how this works.
DIAN XIANG: Thanks, Sean.
Relay works by translating UI designs from Figma
into Jetpack Compose code.
And this workflow is enabled by plugins for Figma and Android
Studio.
Using the Relay Figma plugin, you
can create UI packages to be used in Android apps.
In Figma, you can mark which elements should be dynamic,
such as text or images, and also specify
which elements support gestures, creating opportunities
to encode behavior and logic.
When ready, you can import UI packages
from Relay using the Android Studio plugin.
UI packages live in your codebase
as updatable, inspectable artifacts.
And they're automatically converted
to composables for use in your project like any other code.
Dynamic elements and interaction handlers
defined in Figma become parameters,
allowing developers to provide real data
and behavior for components.
Properties like color, typography, shape,
and flexible layout are all carried through.
Assets such as images and font files
are placed in the right locations
so you don't have to waste time looking for them.
As Sean mentioned, Relay provides a shared model
for teams to work with.
When UI packages are updated in Figma,
you can then apply these updates in your Android project
at the click of a button whenever you're ready.
Many of our customers are using design systems
to build their apps, and Relay supports that as well.
Component libraries in Figma and their code implementations
make it easier for us to design and build at scale.
That's why we built the Relay workflow to also capture
design system information.
Relay supports color and type styles,
allowing designs with Figma styles
to be translated into Compose themes.
This allows you to use tokens and variables, like surface
or title, instead of raw values, which can be really useful when
changing the theme of your app.
Design systems can also have components,
some with code implementations containing
behavior that can be hard to describe in a Figma file.
In these situations, you can define
a mapping between a Figma component
and their implementation in code.
This allows you to create designs in Figma
that reference custom components written by your developers.
And Relay for Android Studio will
use the custom implementation instead of generating new code.
You can also supply properties for
these implemented components using the Figma plugin.
Visual properties like placeholder or nonvisual
properties like accessibility labels
are piped into the composable as parameter values.
SEAN ARIETTA: Last year at ADS, we shared a glimpse
of what we're building.
And today we're happy to announce the open alpha release
of Relay for anyone to use.
We are committed to a better way of building, where more time is
spent answering product questions than documenting
them, where small details aren't lost in translation,
and where designers and developers have a shared
understanding of a product's experience.
Relay is an early product.
And we'd love for you to use it and tell us how it does
and doesn't meet your needs.
The best way to get started is to head over
to relay.material.io.
If you're interested in working directly with our team,
you'll be able to sign up to join our research
and early access programs there.
We'll also be hosting a live stream for a deeper
dive on how to use Relay.
We're just getting started on this journey
and have some big plans ahead of us.
Relay is currently in alpha product.
And we'll be making regular releases that
include improvements to performance,
translation, and overall workflow based
on your feedback.
The handoff problem is something we all face.
And we are truly excited to work with you to shape this future.
Thank you so much for watching.
[MUSIC PLAYING]