[MUSIC PLAYING]
KRIS GIESING: Hi, I'm Kris, a software engineer
on the Material Design team.
We'd like to share a vision for how
to bring beautiful design to Android apps
seamlessly and with less toil.
Building on the promise of modern Android development,
we have an opportunity to reimagine
how designers and developers build
digital products together.
Today, delivering a great mobile UI
is a slow, detail-oriented process.
It requires a ton of back and forth
between designers and developers.
And like most of you, our teams get
frustrated with the time it takes
to answer simple questions.
What typeface is this?
What's the margin?
How does this thing stretch?
We're just copying values from emails, chat, and bug tickets,
it doesn't feel productive.
And we still sometimes have last minute
scrambles because our assumptions were wrong.
We call this, the handoff problem, and developers tell us
it's one of the biggest frustrations in building
digital products.
Some teams have been able to get around this
through brute force and late nights.
But as customer expectations and the number of screens increase,
it's getting a lot harder, even for Material and Google.
Android gives us the chance to reach billions of users.
We're meeting them on phones, TVs, cars, watches,
and tablets.
That's a huge surface area for your products and services,
and the challenge of delivering on all those screens
makes our handoff problems untenable.
Today, we're excited to share a glimpse of how
Material and Android are working to solve the handoff
problem for designers and Android developers
in the tools they use today.
To achieve this, Material Design is teaming up
with Figma, the leading UI and design tool.
Figma is super excited about enabling new design
to code workflows.
And we're working together to ensure
that design tools and developer tools connect.
We've prototyped a new workflow that
aims to make handoff a thing of the past.
Our goal is to help teams build UI components together,
starting in Figma and packaging for Android Studio.
Let's take a look.
In our workflow, designers build UI components in Figma
that are ready for production.
This plug-in based workflow adds to Figma's already robust
component model with annotations for interactions and data.
This workflow creates what we call, a UI package.
Developers can bring UI packages into Android Studio
as composables at high fidelity, allowing
us to immediately integrate components into the code base.
Figma frames are converted to compose layouts,
visual appearance properties, like color, typography,
and shape, are preserved, and responsive design intent,
like flexible rows and columns, comes right across.
Developers can use compose previews
to see exactly what the designer saw, giving us confidence
that the structure is right.
Have you ever struggled with that first implementation
because the imagery and typefaces were marooned
in a design file someplace?
We solve that problem by bringing all sample images
and Google fonts along to ensure you
have the right assets in place.
This workflow translates ideas, not just pictures.
So, when a UI package arrives, it
feels alive and can be controlled
the way developers expect.
Designers and developers decide how data
is wired up to UI elements.
Text, images, and icons are marked as dynamic,
and Android Studio helps developers see just which
data needs to be provided.
Interactions work the same way.
Designers indicate which gestures
to support on a per element basis, clearly marking calls
to action in UI components that generate developer
friendly APIs.
And styles in the design become theme references in code,
giving us visual consistency with the rest
of our application.
We want to give you the flexibility
to build any UI you can imagine without reinventing the wheel.
So, when designers use material components,
like fabs and buttons in Figma, we
make sure you get real Material Design implementations in code.
This is a new way of exchanging UI, as an updatable package.
When designers make changes, developers
can easily bring them in.
UI packages are managed like code.
So, teams can use familiar workflows
for tracking and review.
Cosmetic changes don't even require new code.
Just update, validate, and go.
Our output code is structured to be modular and extensible.
Rather than requiring designer updates for everything,
developers can override and remix elements
to meet their needs.
For example, we can add a specialized overlay
or replace an entire section with a dynamic waveform
rendering.
Developers decide how much or how
little customization to apply.
If there's one certainty in software development,
it's that requirements will change.
UI packages provide the flexibility for teams
to meet changing demands quickly with minimal rework.
The future of Android is bright with billions
of users engaging with your products
on an ever-growing surface area of devices.
We believe that this new workflow
can break designers and developers out
of their silos to deliver on that opportunity faster
and with less frustration.
We can't wait for you to start turning handoff
problems into high fives.
Over the next few months, we'd like
to work directly with a small group of teams
as we prepare for a beta launch at I/O next year.
If you're interested in joining this early access program,
we'd love to hear from you at Material.io/blog/designtocode.
Thanks for watching.
[MUSIC PLAYING]