[MUSIC PLAYING]



JOHNATHAN CHUNG: Hello.

Welcome to our talk.

My name is Jonathan Chung.

And I'm a UX lead on the
Material Design team.

NICK BUTCHER: Hello.

My name is Nick Butcher.

And I'm a designer and engineer
on the Design Relations team.

WILL LARCHE: And I'm Will.

I'm an engineer on
Material Design.

JOHNATHAN CHUNG:
Please have a seat.



All right, today.

We're really excited
to talk about how

to build great Material Design
products across platforms.

So to begin, what is
Material Design, given

all the new announcements
that we just made?

How has it evolved from
what we know before?



Material Design is now an
adaptable design system,

backed by open source
code, that helps

teams create high quality
digital experiences.

In other words,
Material helps you

to build beautiful and
usable products really fast.



In 2014, when we first
launched, we had zero customers.

Now we have over 1.5 million
apps using Material Design.

That is incredible.

And based on this huge
number of customers,

we've really listened
and continued

to improve our system.



So today, we launched Material
Theming, our end-to-end product

capability that makes it easy
to make Material Design yours.

Now, I'm sure some of you
are very eager to learn more.

But maybe some of you
are still wondering

if Material Design is
appropriate for you

and for your company.



So I'm going to start off
by walking through the newly

designed Material.io site.

Then, Nick will demo our
suite of Material Tools

that we built to make
collaboration and customization

really easy and effortless.

Then, Will is going to talk
about the Material Components,

a library of open
source code, that can

be used across all platforms.



So let me give you three
reasons on why you should really

consider using Material Design.

First, Materials Design
is also for developers.

You've given us
a lot of feedback

that it hasn't been easy for
you to apply and build apps

using Material Design.

Now, with Material Theming,
and all of the tools

that we've built to support
this new capability,

we're now empowering
desires to create

with an eye towards a code
that you will be developing.

Material Design is a truly
cross-platform framework.

We understand how critical it
is to create a consistent user

experience that works
across platforms.

So using Material Design
will benefit your users

using multiple devices.



We also understand that
building high quality products

takes a long time.

So not only we're encouraging
cross-platform consistency,

but also we're
providing the code

to start developing on
Android, iOS, web, and Flutter.

Now, we're going to
put that to the test.

So imagine building
a screen like this.

And probably, all of you
are experts and pros,

but in my experience,
building a screen

like this, and to do it right,
will likely take some time.

With the power of
material design,

we're now making
it easier than ever

to design and build screens
like this across platforms.



And all that magic starts right
here with this redesigned site.

The new site is now broken into
Design, Develop, and Tools.

And in each of
those sections, you

will find all of
the great resources

that our team has
created for you.

Design guidelines,
tools, research insights,

open source code, you
name it, it's all there.

We're going to spend
some time checking out

the site in greater detail now.



The Design section still
has everything that you

loved about Material Design.

It's all there.

Nothing is gone.

In addition, we're now featuring
some of the most read articles

on the top of the page to
help you find content faster.



We're still very much
focused on helping you

design products
that are beautiful,

without background in design.

So here, you can
see the articles

that we provided for you,
and learn about system icons,

generate your own
custom color palette,

pick a typeface that
works for your brand,

and really harness the
power of shapes in your UI.



The last section talks about
materials studies, which

we showcase all of the
flexibility of Material Design,

regardless if you're
building for retail,

for communication,
or even something

as complex as a travel app.

It's all there.

And we've tested it.

And it's all there
for you to check out.



The Material Design guidance has
also been expanded and enhanced

into Material System, Material
Foundation, and Material

Guidelines.



Starting with the
Material System section,

we're giving you the general
overview of Material Metaphors.

Then, the Foundation
section dives

into the foundational practices.

So it'll mention
structural things,

like color, typography,
iconography, shape,

layout, and more.



Now, the Guidelines section
gives tactical guidance

on how to create a
material product.

And the best thing about this is
that all of these great design

guidelines are closely
linked with engineering.



Now, let's take a look at
some of the other features

on the site that's going
to be helpful for you

when you're building
your product.

We know how having
a detailed spec

makes the engineering
process 10 times faster.

And that's why we're
providing this view called

Spec Viewer in the articles.

In this spec viewer,
we're now exposing

all of the useful
information about this image.



Clicking through the
menu on the right,

you'll have access to all of
the different types of layers

about this image, such as you
can just view the image only,

see the measurements, text,
color, shape, and elevation,

see the different components
that are used in this UI,

or even additional notes
that we might have added.

Let's take a look at
this text annotation.

So in this annotation,
you will not only

see the font name,
size, and color,

but also link to a Google font
site that our team has built.

We really wanted to surface
these kind of useful resources

to you in the context
of your workflow,

so that everything that
you need is right there.



Now, when you navigate
to the Google fonts site,

you will be able
to download and use

any of the fonts that
are used in our mocks.



We also conducted research
on the most effective ways

to deliver the guidelines.

And we found out that
interactive content

increased the level of
understanding for our readers.

So we're starting to
introduce content that

is interactive in our articles.

Here's an example of
material palette generator

that is placed in line
in the color article.

Through interacting
with this tool,

you'll be able to learn about
the improved color system.



So those are some of the
new features that we're

adding to the design section.

But how do you build all this?

That's what you're
here for, right?

The Develop section now
features and has access

to all of the open source for
Android, iOS, web, and Flutter.



So while respecting the
platform conventions,

we wanted to make sure
that our components works

across platforms and
not just on Android.

And you'll be able to
play with these components

in our catalogs.



If you scroll down,
you'll see the section

called Developer Resources.

So similar to the
Design section,

we wanted to provide
the resources that you

can use to build your product.

And let's say you're not as
familiar with any of this,

scroll to the bottom
even more and you'll

find tutorials to
get started on this.



Switching gears to
the Tools section.

So the Tools section has links
to all of the great resources

that we built for you,
starting with Gallery, which

is a part that I love and have
been using to share designs

with my team.

I love this product--

Gallery.

Gallery makes collaboration
so easy and so seamless.

Nick will give you more details
about gallery in a minute.

On the right, you
will have access

to the five full sets
of stylized icons

available in range of
format, sizes, and densities.



In the bottom, you will
see the Material Theme

Editor for Sketch.

What is a Theme Editor?

If you haven't heard
from other talks already,

the Theme Editor
is a plug-in that

lets you express your
brand systematically

through elements like
color, iconography,

typography, and shape.



And through the
Theme Editor, you

will be able to take the
themes that we provided for you

and customize it
to make it yours.

These sets of components
can be used in your designs

right away.

Also what's great
about the Theme Editor

is that all of guidances that
are mentioned in our guidelines

is directly integrated
into the tool.

Now, what if you want to
change something later on?

No problem.

Here's an example of choosing
a color from the Interior Color

Palette and applying it to the
entire library of components.

I find this to be so useful.

And this makes my job so easy.

Now, I'm going to hand it
off to my colleague, Nick,

to talk more in-depth about
using the Theme Editor.

Thank you.

NICK BUTCHER: Thanks, Johnny.



Thank you, Johnny.

So we've seen how the
Material System, Foundation,

and Guidelines makes it easier
to bring your unique brands

into your apps.

I'm going to walk you
through an example of how

you do this to really
demonstrate how easy it

is to do, and especially
show you how the new material

tooling makes this
process from design

through to development
much faster.

So I was part of an
awesome team this year

who designed and built
the Google I/O app.

Maybe some of you have used it.

You may have noticed that
we've put some new componentry

in there, like we're using
the bottom app bar here

with the inset fab.

But we didn't want to use all
of the new Material Theming

capabilities, because
we didn't want

to spoil the show for
the big launch today.

So what we're going to
do today is walk you

through some possibilities
of how Material Theming could

be applied to bring the brand
of Google I/O much deeper

into this application.

So Google I/O, it's a
developer conference.

We like to think of it as a
developer festival almost.

There's a lot of kind of
playfulness in this brand.

I especially love
the playfulness

in the kind of the motion style.

It's also expressed
through the color palette,

which you, hopefully, see
everywhere around you.

And it also picks up on
metaphors from the software

engineering world, things
like layering and stacks.

And we use that to inspire
the illustration style,

as a kind of mark of the brand.

So how can we apply these
elements into the app design?

So here I am in Sketch.

This is my design file,
generated by the Theme Editor

that Johnny just showed you.

We can see that Theme Editor
has generated a bunch of stuff

for us.

It's created a bunch of
components, a typography,

scale, color palettes,
elevation settings, and icons,

and so on and so forth.

If I switch over into
the Components View here,

you can see that
there's basically

a one-to-one from all the
components in the material

guidelines, generated for
me in this sticker sheet

here, ready to
use in my designs.

There's everything in
here from the app bars

to backdrops to fabs to cards.

You name it, it's in here.

The better thing
about these components

is that they're aware of
the Material Theming system.

Let me show you
what I mean by that.

If I switch back to
the theme and open up

the Theme Editor from
the Sketch Plug-ins menu,

we can see that this
theme is currently

set up using the I/O,
kind of indigo primary,

and kind of teal accent color.

If I go into the Color
Settings and just

by clicking on the Primary
Color section here,

and I were to change this
primary color, either

by dragging it around or
inputting a hex code directly,

it's going to have
a number of effects.

Let me walk you through them.

The first thing is you notice
this kind of tonal palette.

It's generated these 10
different tones of color just

from that one color I chose.

This is pretty cool.

I'm going to geek out
on this little bit.

It's not just being naive here.

It's not just taking
the hue I selected

and altering the
brightness and giving

kind of a palette that way,
the algorithm behind this

is trying to imitate how
designers pick colors,

and it's using that to pick
a nice color palette, which

hopefully will work great
throughout your applications.

So by selecting
that, you can see

that the entire color
palette here in the theme

is being updated.

And if I switch back to the
components, this sticker sheet,

you can see that all
of these elements

are aware of that
change in theme color.

And that change is rippled
out into all the elements.

So you can see app bars pick up
the primary color and a darker

tone for the status
bar and so forth,

which is pretty powerful.

So how do we use this
library we generated?

So switching over into
my app design file,

this is some screens
from the I/O app, which

I designed using those
components in the library

that Theme Editor
generated for me.

If you haven't used
Sketch's Library feature,

it's pretty cool.

It's basically a way
to share components

between different design
files or amongst your team.

It's very powerful.

So you access the Library using
the standard Sketch Insert

menu.

And I scroll down to this
Library, which I generated.

And you can see right here,
all of those components

that we just saw in the
sticker sheet nicely kind of

arranged into this
kind of tree structure.

So we can choose the
component that we

want, the different
variants of the component,

even down to different states
that the component can be in.

So if I want to add
a fab to my design,

I can just grab
one from the menu

and drop it into my design.

And over on the
right Inspector pane,

you can see it offers
overrides, allowing

you to change things, like the
icon, and so on and so forth.

So just by generating
through Theme Editor,

we've got a huge array of
components available to use.

So we understand the
Library it's generated

and how to use it
in your design.

Let's start customizing
some of these parameters.

So I go back into my library,
open up Theme Editor.

And one of the first
parameters I think

might be interesting for
the I/O brand is shape.

I want to take some
inspiration from the I/O logo.

You've got I-- this kind of
prominent slash in between.

I think we could do something
interesting kind of the surface

shape treatment.

So by default, in
the baseline, we

have this kind of rounded
corner surface shape.

I'm going to switch over
to the Angle setting

instead, deselect
three of these corners,

and then crank up the corner
radius on the top left.

So here, I'm trying to take
inspiration from that I/O logo

and embed that deeply into
the components in my product.

So if I hit Save in the
library and switch over

to my design file, Sketch
pops this little purple bar

in the corner, letting me know
that the underlying Library has

been updated.

If I click on this, it's going
to give me a diff almost.

These are all the
components that

are going to be affected
by these changes.

So I can choose whether
to select them or not.

I'm just going to take
all these changes.

So now, any component which
is aware of the shape system

is going to be updated.

So if I zoom in on this bottom
sheet here, for example,

you can see it picked
up on that cut corner.

And likewise, on this
raised button down here,

it's shape aware.

Some of the components in
the system offer different

variants, which can or cannot
pick up on the parameter

system.

So for example,
here's a fab which

is using the standard
circular presentation.

But if I go into
the Symbol settings,

I can go down to
where I selected

and select a
different alternative,

if I want it to be aware
of the parameter or not.

For example, I can pick up
on a diamond or squircle type

shapes, which will pick up on
the different shape parameters.

Or I can choose just to keep
it the circular if I want,

so it won't pick up
on their parameters.

Speaking about variations,
we've introduced a new variance

of text fields,
which have been seen

to be performing really well,
which we'll come back to soon.

So right from my design,
I can go in and select

what was the standard kind
of underlying text field,

and I can switch it out
to a different variant

from those available
in my sticker sheet.

So there we go.

We've got a different
variant of the text field

right there, using this outline,
which is much more obvious.



The next parameter I want
to look at is typography.

So currently, the I/O
app is using Google Sans,

which is Google's
brand's typeface, paired

with Roboto for body copy.

I think we might be able to
take some inspiration from--

it's a developer event.

So I'm going to take some
inspiration from development

environments and try
using a monospaced font

and see how that works
with the Google brand.

If I go into the Typography
settings in the Theme Editor,

you can see it's got this scale
in here, which Theme Editor has

generated for me, giving me
these kind of semantic styles

I can apply
throughout my design.

If I select the Google
Sans I had here and search

for a monospace, I'm going
to use Roboto Mono on here,

one of my favorites, it's
going to swap out everywhere

that that other font was used.

All the different
places where I'm

using a different variant of
Google Sans here, I can go in

and I can manually change it.

And it's going to do
something interesting.

So watch here, you can see
while it's set to Google Sans,

it had a particular font
size and tracking and weight.

And when I switched it out to a
different font, to Roboto Mono,

the font size, tracking, and
weight changed for that style.

So what's going on here
is that Theme Editor

is pretty smart about fonts.

It looks at the
font's characteristics

and optically correct
for them in order

to create a harmonious scale.

So what that means is if
your font you're choosing

has a different x
height or stroke weight

or something like this,
it'll look at that,

and it'll adjust
the sizes it uses

for the different
types in the scale

in order to produce this
harmonious typescale for you.

All just by selecting a font,
it generates a scale for me,

which is pretty amazing.

So I save that out and switch
back to my app designs.

Again, it notifies me that
the Library's been updated.

I can take all those changes.

And everywhere
throughout my design

that I was using the
other font finally before,

you can see has been updated to
my new typeface just like that.

[APPLAUSE]



Go, Theme Editor.



So these changes are
looking pretty good to me.

I want to share them with
the rest of the team.

Using the Material
Plug-in, you can not only

get really tight integration
with Theme Editor,

but you also get really great
integration with Gallery,

our tool for collaborating.

So right from the plug-in, I
can choose to upload to Gallery.

I can set the project
or the subcollection

in which to put it and
upload it straightaway.

So once that's upload
it, it's ready to be

shared with the team.

So I get a unique URL, which
I can share with our team.



So in Gallery, I can get
overview of my design work.

I can update new
iterations, so I can see

how my design work has evolved.

I can comment.

So you can share
this with people

and have a discussion about
different design features.

But I'm going to show you one of
my absolute favorite features,

which is the Inspect Mode.

Now, Inspect Mode makes it
really easy for designers

to hand-off off to
developers and for developers

to get all the information
that we need out of a design.

So when I enable Inspect
Mode, I get this Inspector

on the right.

And then, when I hover or
select any item in the design,

it'll give me spec work.

It'll red line it for me
automatically, essentially.

So it gives me size,
position information.

It gives me the body and the
copy in the selection and all

the typeface information.



It'll also pick up on any
icons you use from them

the Material Themes.

So any Material Icons
will link you out

to the Material Icon site.

So you can grab the
assets that you need

and straight away from there.

Best of all, Gallery
understands the components

that the Theme Editor creates.

So if I select this fab here,
it's not just going to say,

hey, this is a blue circle.

It's going to say, hey, I
recognize that that is a fab.

So you can see it picks
up that it's a fab.

And best of all, it'll
offer per platform links

to reference documentation,
so developers

can go directly to the component
that they need to implement.

And they'll be
given any parameter

changes that you've changed
on the component as well.

I can't emphasize this enough.

No longer is design handing
over a picture and saying,

hey, I really hope you
can implement this.

The tight coupling
between the components

offered between Theme Editor
and Material Design components

mean they're the same
components, which

means that you're saying
use this component

with these parameter
changes to it.

So no longer is it kind
of a guessing game.



So these changes
look good to me.

I'm going to open up the
Comment feature for @Will.

Let him know that
these changes have

been uploaded into
gallery, and they're

ready for implementation.

So over to you, Will.

WILL LARCHE: Thanks, Nick.

Isn't he great?

[APPLAUSE]



So I'm an engineer.

And Nick has just shared
with me this Gallery project.

I've gotten the link.

And I click on it.

And I get to come in here.

And it'll send me to
the Material Components

documentation.

Now, what is Material
Components or MDC?

Material Components are
an open source framework

for implementing
Material Design.

There is an MDC for Android,
for iOS, web, and Flutter.

It's the same code
Google uses in its apps.

Each has dozens of
components, and they can all

do the cool things that Nick
was talking about earlier.

And since they're open
source, there's no mystery.

They're not magic boxes.

Everything is available to
you to look at or customize.

And we invite you to
please contribute code.



So let's look at these new text
fields in Material Components.

How do I get them?

Well, adding MDC to your
code base is pretty easy.

If you are an Android, you'll
access the Design Support

Library through Maven, using the
standard support Library setup.

On web, you'll just
install a node module.

On Flutter, you're done.

Material Components come
built-in to Flutter.

And on iOS, you
can use CocoaPods.

You add it to your pod file.

Let's look a little
bit closer at iOS

and how we implement
the new text fields.

So every text field in MDC
iOS has two parts, an input

and a controller.

We're going to add MDC text
field and an outline controller

to our app.

We can lay it out using
its intrinsic content size

and maybe set the UI
text field delegate.

And the placeholder will
float across the border.



If you're already using MDC,
upgrading is pretty easy

to get these new designs.

If you're using
CocoaPods, you just

run pod update
MaterialComponents.

Then, you go in and change
the controller class

from the old class to one of the
new fancy ones, like outlined.

And you're done.

By the way, these text fields
are much better and much more

performant than the
previous designs.

We did a huge amount
of research in order

to come up with these optimized
designs, a lot of research.

And it turns out
that in long forms,

your users are much more
likely to see and interact

with these text fields
than the previous design.

If you want to learn more about
the new text fields or material

research, you can watch the talk
"Measuring Material," Thursday

at 12:30.

So doing this on
iOS is a breeze.

But what about Android?

Well, you set the outline box
style on the text input layout

element in your layout.

On web, you just
replace an element

with class MDC line ripple,
with an element with class MDC

notched outline, with an
SVG with a path of class

MDC notched outline path,
and an element of MDC

notched outline idle.

And don't forget the modifier
class MDC text field outline.

It couldn't be simpler.

And on Flutter, you change
the border to outline.

Now, I'm a little biased
because I work on MDC Flutter.

But I think Flutter
is the perfect way

to implement material
design across platforms.

You do it once, and then you
get both iOS and Android.

And MDC is baked right in.

It is the default UI
framework for Flutter.

And whenever you create a new
project, it's already linked.

I love it.

So now you know that
the material text fields

can be added to your code.

But there's a lot more.

You can find almost all of the
Material Guidelines components

in Material Components.

So that's app bars, buttons,
cards, chips, dialogs,

navigation, tabs, ink ripples.

There are dozens of them now.

And they're all available to you
today at Material.io/develop.

And since design is never done,
more are added all the time.

So today, we've shown
you the design resources

available to you
today on Material.io,

how Theme Editor, Gallery,
and the Material Tools Suite

help you customize your
designs for your brand,

and how Material
Components make it

easy to implement those
designs across four platforms

with precision and ease.



So if you are here at
I/O, what else can you do?

You can go to our
design dome, where

you can get design
reviews and demos

and listen to some Box Talks.

And you can also go see the talk
"Code Beautiful UI with Flutter

and Material Design."

We have 30 code labs
for Material Components

in the Code Lab.

And on Wednesday
at 2:30, there's

a session, "Ask
Flutter and Material,"

where you can come to
us to ask questions

about how to implement material
design in your Flutter apps.

Thank you.

[MUSIC PLAYING]