Bring More To The Design Meeting; Sketch 3 For Android Developers (Big Android BBQ 2015)


[MUSIC PLAYING] MATT WEAR: My name is Matt Wear. I am a freelance
Android developer, just currently doing a bunch
of different projects right now and loving it. So I’ve been doing Android
for about five years, and I’ve never been
into design really. So I’ve just recently
gotten into design, and I’m super excited to
share what I’ve been learning. So I guess we
should jump in here. Is everyone here a
developer, or is anyone a designer, would you say? Awesome. Do you sketch? AUDIENCE: I do. MATT WEAR: You do. Right. Great. So Sketch 3, if you don’t
know, is a design tool from Bohemian Coders
that is kind of sweeping the industry right now. It’s a screen design tool,
so it’s basically just for static screens and
final assets or mockups. It’s not interaction design,
so it doesn’t do motion like Pixate, and it’s very
geared towards screen design. So if you need to
manipulate a photo to airbrush it or
something, it’s not going to be as
good as Photoshop, but it’s going to be 1,000
times better at designing an app than Photoshop is in
my opinion, and a lot cheaper. Why talk about Sketch at all? And I think that this quote
from Roman Nurik really kind of sums it
up of why I think this is an important topic. And that’s, “Designer
as chief curator.” And I think this is the way
we’re seeing teams work more and more, that everyone is kind
of bringing ideas together, and the designer
is the guardrails and makes sure what
is getting put out there is really cohesive
and solves the problem. On a lot of agile
teams– I think most people would say
they’re doing agile– I notice that the designer
is not embedded or included as much as they should be. She’s oftentimes kind
of given the problem, and maybe there’s a
design meeting where everyone comes together
and reviews the mocks, or maybe there’s not. Maybe everyone just
kind of comes together, and the designs
get handed to you after the spec goes
to the designer. And the problem with that
is maybe it’s good upfront, and in the design
meeting, everyone thinks, oh, this looks great. We can do this right away. But then once you actually start
programming it, you realize, this is maybe a
little impossible. And so you have to go back
to the designer and say, oh yeah, this was kind of
messed up here, whatnot. Well, they’ve moved on to
something else, potentially, and the problem is not
in their head anymore. And they’ve just got to
solve it really quick and get it back to you
so they can continue working on their thing,
and usually the problem doesn’t get solved
in the cohesive way that it was solved
the first time. And designer as curator
puts the responsibility to design on everyone. So everyone understands
the design problem. Everyone can actually contribute
mocks and contribute assets, and I’ve kind of seen
that designers that are embedded in
development teams where developers are
also contributing, the end product
is much more rich. Designers, unfortunately,
in the Android world, you probably notice if you have
an Android-specific designer, I think you’re in the
fortunate minority. But most of us, our
designers carry iPhones. They aren’t familiar
with the coolest Android apps and the interactions within
those apps, and it’s up to us to really advocate for Android
and make sure we don’t just have a port from the iOS app
or something that looks more like a website or whatnot. So designer as chief
curator– I think it’s a really important concept. I heard Roman Nurik
say it recently, and I think that’s why we should
care about tools like Sketch, where we can actually
contribute more. Also, if you want to
build an app on your own, it’s very hard
without a designer. And maybe this will empower
you a little bit more. Let’s jump in here. So if you only pay attention
for the next five minutes, I say pay attention–
or if you’ve got five minutes to pay
attention to this talk, pay attention for the
next five minutes, and you might have
enough to actually be dangerous in Sketch. So what we’re going
to do is just kind of get Sketch up and running,
and open an Android template where we can just drag and
drop Android components and actually create something. So the first thing
you’re going to need to do– oh, a magic
move– is install Roboto. Roboto is the font Android uses. I’m sure you’re very
familiar with it. Noto if it’s a
non-Roboto script. But I like to get it from
here, just google.com/fonts. It gives you the option to put
in all the different styles and weights that
you want, and it’ll download a zip, which will be
a bunch of TTF files, which is a font file, and you’ll
just go into the Font Installer for the Mac. Sketch is only for Mac, so if
you have a Windows machine, I’m sorry for more
reasons than just that. You can install your fonts here,
and then you’ll open Sketch. You’ll go to File,
New from Template, and just built in
straight from Sketch, you can select Material
Design Template, and you’ll get this really
cool artboard sheet here. It’s basically just a page,
and it’ll have just everything to spec– typography, the
system icons, the metrics, the key lines, default
themes, components, global elements
like system icons and dialogs, just all
kinds of great things that you can just easily select
from right here, and paste right into your artboard. What I like to do is– and
we’re going to go into all this in a little more
depth– but I like to select Create a New
Page from my Stickersheet, and then Create an Artboard,
which is just basically a screen, and built
in material design has mobile portrait,
mobile landscape, tablets, seven-inch tablets, nine-inch. You just select one of these. You can even build a website
in material or an iOS app, if you really want to
control your counterparts, and just create an artboard. And so you’ll just have
this on your canvas here. You can go back to
your stickersheet. Select something. I’ve selected a screen here. Paste it in. Bam. You’ve got an app. You could export
it, and go to town, make a million dollars
off of your cool app. Probably not, but you can
kind of get the picture here. Super easy just to get started. So if you want to
download Sketch, it’s $99. Search for a promo code first. You can probably save 20%,
and you can get going here. It’s very cool. But in order to build
something really engaging, something that really stands
out on the Android platform or fits cohesively
within the system, you’re going to need
to understand material extremely well. And what parts of
material are you going to need to
understand for Sketch? Not as much of the
motion, although it’s important for
developing a great app. You will need to understand
the colors and the typography and just basically
everything that’s going to be on the
static screen very well. So the first topic that is going
to be really important when you’re going to
start a design is going to be what colors
you’re going to use. So the spec says that you need
to use bold hues juxtaposed with muted environments, deep
shadows, bright highlights. And what that comes
down to is you’ll have a bunch of
different colors, so you’ll open up all
the color palettes. This is indigo here
with a pink accent. And you’ll want to
pick three main colors from the main
palette, and you’ll want to pick one color
from an accent palette. And what I like to do
is just– I’m sorry. All right. I thought there was a question. But what I like
to do is just try to get a feel for what
kind of app I’m making. Is it serious? Is it more playful? If it’s more playful, I’ll
probably use a brighter color. If it’s more serious or the
content really shines out, I’ll probably use
a more muted color. But a bold color on
a muted environment– pick three colors,
and just play around with which colors you pick. Typography is very important
and the color that you pick on your typography. The spec lays this
out very clearly. If it’s a light background,
you want to pick a darker text. If it’s a dark background,
you pick a lighter text. If it’s emphasized,
you don’t want to put any transparency
on the text. If it is just kind of like
a subtitle or something, you might want to put a little
transparency on the text. Imagery– so imagery is
obviously very important. It’s a powerful tool to help you
communicate and differentiate your product. You want to use bold graphics. Intentional imagery
helps to engage a user. Apps that have a bunch
of images in them– you want to use them more. So you want to be very
intentional with what kind of images you choose. And you want to
choose ones that are contextual to your experience. If you have a
travel app, you want to show pictures of your
actual destination city if you’re showing like
a plane ride or whatnot. If you’re showing
user information, try to show a picture
of that actual user instead of just like
a random person. That seems contrived,
but you can always kind of think contextually, what
kind of images can I show here? What can I not? And there’s a lot of
rules around images in material design. You can use multiple
mediums, so if you don’t have a bunch of
actual photography, it’s OK to mix in
artwork and drawings. So if you’ve got
a profile picture, you don’t have to just use
a picture of that person. If you don’t have it,
it’s OK to mix it and show a drawing of the person. But just really contextual to
your experience, immersive. If it’s a big hero image,
have it bleed all the way to the edge and
things like that. So you can really
humanize an app by the imagery that’s in it. And typography– typography
is just such a huge topic, so it’s really hard to go
over everything right now. But just know the fonts
that you want to use, generally, it’s going to be
Roboto, Noto, because you get those for
free, and you don’t have to get licenses for them. They match on the system. They’re optimized
for the system, so they’ll be able to render
them the fastest and whatnot. But just make sure to
use that and kind of look over the typography spec
and learn a little bit about what you’re doing. Here’s the meat. Who’s ready? I can just sense
it in this room. Just like everyone, yes. That’s what I’m talking about. Sketch. Sketch is made by Bohemian
Coders, like I said, Sketch 3. It came out a few years ago. It just won the
Apple Design Award, and it’s just a great
tool for screen design. So we’ll just jump right in. As you can see, when
you open up Sketch, this is what you’ll see. This is a blank
document right here. One of the first things I
notice is it’s not a cockpit. There’s not a million things
like when you open Photoshop. Photoshop I’ve probably tried
to learn about 3,000 times, and I fail every single
time, because I’m just like, I need to copy and paste this,
and I look up a tutorial. I’m like, why do I even
have to look up a tutorial? It’s copy and paste. And then 30 minutes
later, I just like have flipped my table over and
poured gasoline on my computer, and I’ve just given up. So it’s a tough crowd. No. It’s just terrible jokes. The top menu here
is what you’ll see. It’s not a lot of tools,
but here’s the toolbar. We’ll go over all these
tools here in a minute. In the middle, you have
this infinite canvas. It goes out infinitely, so if
you ever lose your document or what you’re working on,
you can hit Command 1, or even better, you can go to the View
menu and hit Center Canvas. Actually, that’s not better. Use the key command. On the left here, you
have your layer list. This will help keep
your document organized as you add shapes and group
them together and ungroup them, whatnot. And on the right, you
have your Inspector, and depending on what type
of layer you have selected, you’ll have different
attributes that you can edit. And I’ve got to say it’s
extremely powerful in Sketch. Even though you don’t have
as many options or abilities in Photoshop, the Inspector to
adjust colors and everything is quite powerful. So you pretty much have
everything you need. I’ve never met a designer
who’s using Sketch in their day-to-day for app
design that can’t do something that they used to be
able to do in Photoshop. They’re usually
doing it much faster, and especially with
some of the integrations I’m going to talk about
later, much more productive. And the developers
can be involved. So just to go over the
toolbar overview here. In the top left, you
have your Insert menu, and these are going to be your
objects that you generally place on the canvas. When you look at any app, and
I don’t know why this eluded me for so long, or any
software really, it’s just a bunch of rectangles. And that’s what
you’ll be using a lot. They’re just styled rectangles. They have images on them
and gradients and whatnot, so you’ll come
here to this menu. You’ll pick a shape, and you’ll
pick a rectangle and draw or an oval, or other shapes. Sometimes you have other
shapes and whatnot. But overall, you
have a vector, which would be you can draw
anything you want and make the line
go any which way. You have a pencil, which if you
have it on a wacom or something you could draw. I’m not talented enough to draw,
but I can make an app kind of. Text– obviously. A bitmap, artboards, which
I showed you earlier, are just basically canned
screens that you can use. A slice to help export
graphics and a symbol, which we’ll talk about here
in a minute in styled text. So here I drew a rectangle. You can kind of see what it
would look like on the canvas. Kind of get you oriented
to Sketch a little bit. Group and ungroup– this
will help you kind of keep everything organized. If you make, say, a
toolbar at the top, and it’s got a rectangle
for the toolbar and icons for all the menu items and
a home screen and whatnot, you might get unorganized. So you might want to select all
those things, and hit Group, and then in your
layer list, you’ll just see one group
that says Toolbar, and you can drill down into it. I think it’d be kind of
like a package in Java. Create Symbol–
extremely powerful tool. I like to think of this as
kind of like creating an object or creating a class in
Java, where you can reuse it everywhere, and when you
need to change something in it, its behavior, you
can change it in one place, and it happens everywhere. And we’ll go into
this a little bit deeper, but just know it’s a way
when you’re exporting graphics that you can keep everything
organized and in sync. Zoom– obviously,
like I said, if you get lost in the infinite
canvas, the infinite abyss of your canvas, you can
just quickly hit Command 1, get everything centered. These are kind of your
standard tools here. You have an edit, where you
can move around your tools, or you can transform it as in
skew it, rotate, and flatten. One kind of thing
to keep in mind with Transform, which is
kind of a hole in Sketch, I feel like, but say you
had a group of a rectangle, and it had text on it. You can’t actually
transform a group. You can only transform
individual shapes. I really wish that
you could put text. I was trying to put like a cover
flow album together one time, where you would have like
an album in the middle, and you would swipe it, and it
would kind of transform out. And I had text on it. I couldn’t actually
transform the text on top of the rectangle
at the same time. I had to do them separately. I thought that was
kind of annoying. So maybe that’s a little hole in
Sketch, but overall it’s great. Here’s a mask and scale. Mask is generally great if you
want a bitmap to fit around a certain shape. So who’s done graphics
programming on Android? Oh, great. So you’ve probably used a mask,
like clipping a shape together, clipping a path to a bitmap. Here are your
Boolean operations. We’re going to go into these
a little more in-depth later, but they are just extremely
powerful for creating icons and whatnot,
especially in material. You’ll notice that icons
are oftentimes very flat. That’s the style. They’re supposed
to face forward. They’re not supposed
to have depth. Most of them are just made
up with a bunch of polygons that you put together and
you intersect in a union. I know that seems
kind of obvious, but to me it was like
magic when I learned that, oh, wow,
this clock is just like four ovals and
four rectangles, and they’re positioned together. So very cool. We’ll go over that in a minute. Move things forward
and backwards, so like this circle here
is on top of the square. If I move the circle
backwards, then the square would be covering the circle. Pretty standard stuff. And interacting with layers–
so you can select a layer, and it’ll show its handles. You can resize by
dragging a handle. You can use the arrow keys. I think this is pretty cool. You can use the arrow
keys and move it. If you hit the left arrow,
it’ll move it to the left by one pixel. If you hit the right key,
it’ll move it to the right by one pixel. If you hit Shift, and
you hold the arrow key, it’ll move it by 10 pixels,
which is pretty nice. But embedded in that
little statement there is something
that’s kind of cool, and you get to design in pixels. You don’t have to do any math. You just design
in MDPI, and when you need to move something
over a little bit, you just move it by a
pixel, and everything gets scaled up when you export. And I’ll show you how to
do that here in a minute, but I think that’s very nice. You can develop in a
different density if you want. You could design in XXHDPI. You just have to do more math. I just like the pixels, and
that’s pretty cool, I think. So keep moving along here. Oh, yeah, and if you
need to actually move an object or a layer by
a specific amount that’s kind of a strange
amount, you don’t have to use your mouse to
drag it by that amount. You can actually put expressions
in your Inspector right here, so I put plus 13 right here, and
it moved it over to the right by 13. And if I needed to move it 13
also down, I could do that. That’s really helpful for
when you have two layers, and you need to move
them at the same amount, and you could put
expressions in there. I think that’s very cool. You can also duplicate
a layer, which becomes very powerful, as
we’ll see when we’re creating an icon here in a minute. You can hide and
show a layer, as you see this little eyeball here. That’s pretty helpful if
you’ve got a very busy design, and you need to focus on
this one little piece here, you’ll hide a bunch of layers. It’s a pretty standard
tool in most design tools, but I just kind of want
to give an overview. And you can lock a layer. This is really important
for background layers is what I find,
because everything is going to be on top
of the background layer, and when you start selecting
around with your mouse, you’ll oftentimes accidentally
select your background layer and move it, and then
it’s in the wrong spot, and you have to Control
Z, and blah blah blah. So very important to
lock the background layer or any layer
that you don’t want moved while you’re
moving stuff around. So just continuing with
interacting with layers here, as you can see, I’ve
grouped these two, this oval and this rectangle
here, and it creates a folder on the layer list. Kind of keeps it organized. And here’s my Inspector. If I select a layer, I
get all kinds of options. I can put an inner shadow, an
outer shadow, a border, a fill, all the various join
types can be edited here, which are kind of a
complex way to say like how it’s drawn together
when you intersect our Boolean objects. And you can edit the
colors by dragging. You can select a color
with an eyedropper. Just the power of their
Inspector is really incredible. For how cheap this tool is and
just that it’s such a new tool, they’ve really got
everything covered. Gaussian Blur– they don’t have
a lot of different filter types you can put on an object. So a filter type would be
like I filled this circle here with red, but I could do
it like a Gaussian Blur, and it would put a
gradient in a certain way. It would kind of look fuzzy. Well, you can also
put a texture on it, and there’s not a lot
of textures in Sketch. So if you needed like
a special texture, you might actually have to
use Photoshop in that way. They only have a very basic one. Boolean operations–
so this is kind of what I was talking about
where when you need to develop something like an icon and
how they’re just polygons that you kind of put together. So you have union, which
will just take two objects and put them together,
and the left will win out, and they’ll be the same color. You have a subtract, which
will take whatever is on top and erase that from
whatever’s on the bottom. There’s an intersect. I think that one’s
pretty obvious if you remember set theory. And there’s a difference,
which it basically does the same thing as a
union but on the right. Actually I might’ve said
that wrong for difference. But here’s something I made
here with Boolean operations. Does anyone know what this is? AUDIENCE: A clock. MATT WEAR: Yes. It’s a clock. I got it right. People knew. That’s awesome. So yeah, like I said,
this is just four circles and four rectangles. What I did was I just
created an oval here. I just filled it with
black, removed the border. And then I made a copy of it,
so I made a copy of that oval. It’s the same size right on
top, and I went in the Inspector and just resized it
about 20 pixels down. So you can’t see it, because
it’s also filled here, but there’s another circle
in the middle that’s black, and then I unioned
them together. I select both ovals, and
I union them together, and it creates the outer rim. Then I’ve made a copy
of the big circle and scaled it down,
moved it up to the right, made another copy, moved
it over to the left. And I just moved my hands to
the right and said to the left. That’s awesome. And I was able to
union those together, and now I have what
looks like a mouse. I made two rectangles on the
bottom, unioned those together, and now I have my two
legs, and then made two rectangles in the middle
that are the same size. I resized the one on top, and
then hit the Rotate button. Selected it and hit
the Rotate button. As you can see,
there’s a little target at the bottom of the hand. That’ll show up right in the
middle actually of the object when you hit Rotate. You can just drag it with
your mouse all the way to the bottom, and just type
in 45 degrees or 15 degrees or whatever angle you
want to rotate that, and then it’ll rotate it
at the new point instead of rotating it in the middle. Pretty cool. And you rotate it. You union it. Change the radius, and you
have an awesome alarm clock that you can export and
put in your menu item for setting an
alarm, and the range of icons you can make, with just
simple polygons is incredible, and there’s lots of great blog
posts about how to do this. It’s a lot of fun. So remember, I told you
earlier about creating symbols. Symbols are really important,
because oftentimes, you’ll have a symbol like,
say, this alarm clock was used on five
different screens in my app. I could make a copy of it,
and then I would have it in five different places. And then we could go
to the design meeting, and the designer as chief
curator would be like, Matt, I’m really impressed. I’m actually a little afraid
I’m going to lose my job here, but you made this
great alarm clock, and it needs to be
edited a little bit. Can you go edit all of them? So if I created a symbol by just
clicking Create Symbol here, it’ll turn this alarm clock
purple in my layer list. And that means I can insert
this symbol anywhere else in my document. So let’s say I did it right. I inserted this symbol
in five different places. If I edit any one
of those symbols, it will update all of them. It’s very powerful. That’s why I say it’s good
object-oriented design in design. Very important. Mask– like I said, if you need
to clip a bitmap to a shape, it’s really handy,
as we’ll see here. Here is our favorite
designer at Google, Matias Duarte in his awesome
shirts that cost $300, I looked up, because
I wanted one. And I’m like, $300
is kind of expensive. So I’ll just stick
with Old Navy. So as you can see
here in my layer list, I’ve got a bitmap in
the back, Matias Duarte. Say that eight times real fast. And I have a little rectangle
in the front, and in my design, I only have the room for the
rectangle for the bitmap. So what I need to do is select
both of these as I have done. You can see them highlighted
in the layer list. And resize that bitmap,
and as you can see, now that I’ve masked it, the
bitmap of Matias Duarte is in the middle here. And that’s actually the
rectangle that I clipped to. And the bitmap is still kind
of visible on the outside with the rectangle, and I
can resize those corners, and you just kind of have
to picture that there’s a little window
you’re looking through to see the bitmap as
you’re moving it around. So just really powerful for if
you needed a profile picture in the shape of a circle. You would just draw an oval,
and put the bitmap behind it, and then mask them, and then you
can move it around and get it right in the face. Although when you
go to develop it, the bitmap never looks right
and the face is half cut off. Then you’ve got to use
the facial recognition, but then it’s slow,
and I’m just kidding. My jokes are great today. Let’s see here. Text– so like I said,
text is a huge subject. But I found two really
helpful things with text. The first was– so I
developed an app recently. It was a children’s cartoon, and
they had a very small budget, so I got to do the design. I got paid to do design for
the first time in my life. I was ecstatic. And I came, and I presented my
design to their head designer, because he didn’t
have time to do it. Then he said, you
know, this is great, but your text is just
all over the place. I had 10 different
text sizes, and they were all different fonts
and weights and styles, and he’s like, here’s
what I would do. And I’m an expert designer,
so you should listen to me. Pick three. Pick three styles, and
just see if you can make the whole design with that. And if you can’t, if you
need a fourth, that’s fine. If you can only do it with
two, that’s even better. But just having that
idea– like every time I went to go make new
text, I had a new style. So just limiting it to three. And then the other one is
to create shared styles. And with shared
styles, you basically have to think about it
like styles in Android. If you know you’re going to
use a header style everywhere, when you create your text,
go over to the Inspector menu here, and create a style. As you can see, I wrote
header style for this style. And then when you’re out
developing something else, you can select the new
text that you’re doing, and then come here in
the Inspector menu. And like I said, I’ve got footer
text here as another style. It’ll actually show you what
it looks like in the Inspector. And I choose header
text style here, and I can reuse my styles. Really powerful. And one minor thing with
text– when you insert text, you can do it as
auto, and that means that when you type
your text, it’ll just keep going all the
way out to the right. If you hit a new line,
it’ll come back this way, and you can type again. Or you can have it fixed length,
and you just drag a rectangle, and as you type,
it’ll automatically do line breaks on the end. So if you know in
your design, I only want this text to take up
200 dips or 200 pixels, then you will just
make it fixed. Exporting– exporting
is my favorite topic. I don’t know why. Maybe because I always had to
ask people to export for me, and they would take a long
time, and I would just have to go surf the internet. I had no other choice. So I guess I had other choices. So exporting is a big topic, so
we’ll just start with slices. And you’ll see this little
knife here in your layer list, and if that’s highlighted,
you can see all of your slices in your layer list. I don’t have any slices right
now, so we don’t see any. But you want to make sure
that’s highlighted if you want to be able to see them. So to insert a slice, you’ll
just come here to your Insert menu, and you’ll select Slice. And that will give
you a little rectangle that you can drag around,
and you just kind of get it perfect on what
you want to slice. And once you drop it,
that’ll create a slice. But what you’ll
notice here is I’ve got this purple background. I don’t want to export
the purple background. I just want the icon,
because it’s awesome. So I need to select this
Export Group Contents Only. But the problem with that is I
haven’t organized my document in my layer list in such a
way where that is actually a layer separate from my
background with which I can only export that
group’s context. So I just need to reorganize my
layers over here on the left. As you can see, I put the
background rectangle outside of my group of icons, and then
I can select this Export Group Contents Only. And as you see,
the preview shows that there’s no purple
background that’s being exported. So like I said, here’s the
actual children’s cartoon that I did– app. And the first episode is free,
and then you scroll down, and the other ones were $1.99. And I designed this whole thing. I presented it. It got accepted. Great. All right. Now I get to develop it, and I
need to export these graphics. So I searched around on
the web to kind of come up with a good strategy
to export designs, mostly so I could
present it here. But also just because I
want to be a good designer, and I came up with this strategy
from reading various blog posts that what a lot of
people like to do is they like to create a
new page called Exports. You see my pages here
in my layer list, so I create a page
called Exports. And then I add an artboard
to it that’s a big artboard. So I put an A4 size,
and I renamed it to Res. So whatever your artboard
name is, when you export, it’ll put them in that folder. So I put Res,
because that’s what’s going to be in Android Studio. And I created symbols for my
Play button and my Disable Play button, because those
are used everywhere. And when I update them, I want
them to update everywhere. And I created a bunch of slices
for all the other graphics, for the logo, for all of my
episodes, for my background. And I select all those just
by hitting Shift and clicking on all my layers, and
then I can go down– you see there’s an Export menu
available on the bottom right now, and all I do is
I just go down here. So this tool, if there’s
anything that’s wrong with it, it’s a little more
geared to iOS. You have this mirror
option here up in the toolbar that I
didn’t discuss about, but that’s to mirror your
design on an iOS device. So I spite that icon every
time I look at, but anyways. And I love iOS actually. I used an iPhone
once, but then I had to go back to
Android right away. So I have an Export menu
here, and what I’m saying is I want to export all
these graphics at 1x size and I want to append– put
a suffix on the end of MDPI for that file. And then I want one
that’s 1.5, which is HDPI so the file needs to be
named HDPI, and a 2x and a 3x with the corresponding density. And then I just hit
Export, and it puts all those files in one folder. So I’ve got four of
each one of my files that I exported, which isn’t
great for Android Studio, because you need them
named a certain way. So I have this
quick shell script here that I just paste
to wherever I put it– in this case, the desktop. I switch directory to the
desktop, and I just go through, and I name all the
XXHDPIs and put them in a drawable.xxhdpi folder,
and the same with all the other densities. And then I just
have one Res folder with all of my density folders. I drop it right in
Android Studio, and bam. I’m ready to develop. I got this idea
from this link here at the bottom of the slide. But there’s actually an
even better way to do this, and everyone who is using
Sketch in their design process should absolutely be using
this, because it’s awesome. And that is– unless you don’t
want to– that is Zeplin. Zeplin is a tool to help
designers and developers collaborate. It’s amazing. So you can download it. It’s a Sketch plug-in, and so
when you go to Export, instead of doing the whole menu like
I did earlier, all you do is come over here to Plug-ins,
and hit Export Selected Artboards. And then you’ll open up Zeplin. It has a web interface if
someone doesn’t have a Mac, but this is the Mac app. And you can see
all the artboards that you’ve exported
for this project. So I’ll jump in here
to the Res artboard. And you can put comments,
so I put a comment here. Make sure to put this
without a margin. So your designer could do that. If you didn’t understand,
you could respond. It’ll give you a notification. You can respond. It’s a great way to collaborate. But you can see all
of your assets here. You can see the colors that
are involved and whatnot. Probably the most powerful
feature I’ve found is you can see the
exported screen, and you can just kind of
hover around with your mouse, and you can see exactly how
many dips each piece is apart from each other. I have grown so weary
of contacting designers to make sure I’ve got the
right spacing and whatnot, and obviously, a lot of times
I just kind of eyeball it. But this is amazing. The designer is an expert
at what they’re doing. They’re getting
paid a lot of money. On your team, they’re
a crucial aspect, and they know how much
they want things spaced. And now you can just
easily come here to Zeplin and kind
of hover around and see how much space
is between everything, how big icons are, and whatnot. And you can just click
on the Assets tab, and it’ll automatically
let you download all of the exported
assets for every DPI and put them straight
into Android Studio. This tool is just so powerful. I highly recommend it. So just kind of an overview
of what we did today. We talked about what Sketch is. We did a quick and dirty
how to get into Sketch and do a material template and
pull things into an artboard and kind of have something
that’s kind of working. And then we went
into a deep dive of all the features of
Sketch and how to navigate it and what to do with those
quick and dirty pieces you pulled in, and then
how to export it and get it into Android Studio so that
you can create a great app or contribute in
a design meeting. So I really appreciate
everyone listening today, and I hope that if you
have any questions, contact me on Twitter. I’m Parallelcross
or there’s my email. And hopefully, you will have
gained a little more interest in Sketch, and
maybe it’ll help you one day in communicating
with your designers, so I appreciate it. [APPLAUSE] Are there any questions? Yes. AUDIENCE: I’ve used Sketch
for about 15 minutes. When you drag around it has
kind of suggestions for where you can anchor certain things. MATT WEAR: Yeah. AUDIENCE: Do you
have any suggestions? Because I feel
like a lot of times it doesn’t anchor to the object
that I want it to anchor to. Can you tell us about that? MATT WEAR: Right. Yeah. So the question was
like when you’re dragging around
something in Sketch– how about I open Sketch
here, and we’ll just do it? So I’ve opened Sketch. So the question was basically,
say, I’ve created a rectangle, and say I’ve created an oval
just by hitting O and X, and I need to organize
these so they’re lined up. And you can see
there’s guidelines as you move stuff around. So you can see how sometimes it
could be hard with the mouse, because a mouse
isn’t super precise. So one thing you can do is
select multiple objects, and you have this
little menu up here– you’ve got to hit Shift–
in the right that’ll help you kind of align things. So these will both align them
to the left, side, the middle, to the right, the tops are
aligned, and stuff like that. And obviously, you can look
at the Inspector too and see, OK, this one is 286
high, and I need it to be 290, so you plus 4. And then you can make
this one 290 also. Now they’re the same size,
but they’re not necessarily lined up, so you want to select
it here and line their tops, and now they’re the same. Pretty cool. And of course, the
questioner said they’ve only played with it for 15 minutes. It’s a very intuitive
tool, and you run into little things
like that all the time, and it’s pretty
easy to figure out. Yes. AUDIENCE: Other than Zeplin,
what other plug-ins do you use? MATT WEAR: I haven’t
gone too deep. So the question was, what
other plug-ins besides Zeplin do I use? I haven’t gone too deep
into other plug-ins, but the plug-ins around
Sketch are numerous. I mean there are so
many that you can use. And it’s built in, so if
you come File here, and New from Template, you can pick
Material Design, iOS, Web, and all that. And you can actually export all
your styles built in to CSS, but there’s tons
of other plug-ins too that you could use. That’s built in, but
there’s other plug-ins. Anyone else? Yes. AUDIENCE: So I’ve
used it a little bit and one of the things
that I’ve struggled with is trying to understand or
figure out how I should lay out artboards and whether I should
do [INAUDIBLE] artboards. MATT WEAR: Yeah. AUDIENCE: What is the
flow you use for that? How do you work around that? MATT WEAR: That’s
a good question. I don’t know if I have
a good one or not, but one thing that
I like to do is it’s like you’re reading a book. What happens first is top left
corner, and then as it happens, it goes bottom, down, right,
and that’s how I organize it. But I don’t know. There’s probably
better strategies. That’s a good question,
but the question was, how do you organize
your artboards? And that’s my strategy. Just like reading a
book, top to left. Say the first screen
is a master detail, and there’s a list
on the first screen. I would put my detail
to the right of it. And then if you
scroll down to that, it might go down
one on that level. But I don’t have a
good strategy honestly. AUDIENCE: The part
where I had trouble is the different states,
like the tree that it becomes if I have to go through
different [INAUDIBLE] in the same screen and figuring
out what the best way is to show that. MATT WEAR: Yeah. That’s a good point. Yes, sir. AUDIENCE: Do you use a different
artboard for each screen? Like if you open the
master [INAUDIBLE] do you use a different
artboard for that? MATT WEAR: Yes. So the question was, do
you use different artboards for different screens? And that’s exactly what I do. So I’ll like insert an artboard. You can actually just click
on the canvas and hit A. And so I’ll put a portrait
here, and let’s say this one’s– and I could rename it
here in the menu as a master. I can either just copy it
here with the Control Paste, and it’ll move one over, or I
could just click on the canvas again, and hit A, and
then pick another one, and it’ll put it there. And I could rename
this one Detail. And then paste wherever
I want there and whatnot. I am not a designer at all, so
this is really a powerful tool to be able to get in
here really quickly. Yes, sir. AUDIENCE: I came in half way. MATT WEAR: Are you a designer? I apologize. He said yes. AUDIENCE: So is
this a good tool– I’m just getting my feet wet in
even learning code or anything like that so [INAUDIBLE]. MATT WEAR: Oh, awesome. That’s great, man. That’s really cool
that you’re doing that. AUDIENCE: It’s all right. It’s really overwhelming. Is this something
that would be easier to use in workflow
than something like Illustrator or Photoshop. MATT WEAR: Yeah. So the question was,
is it easier to use than Photoshop or Illustrator? And I think for screen
design, it’s way easier. But that’s just from
personal experience of trying to learn Illustrator
and trying to learn Photoshop and failing
miserably every time. So I was able to
pick this tool up in an afternoon, where
Photoshop and Illustrator I’ve tried dozens of
times to do simple things, and I fail miserably. So I think it meets the use case
a lot better of like designing a screen than Photoshop. I think if you’re going to like
brush up skin or something, then it might be a lot
harder than Photoshop, or if you’re going to make
a really intricate design, maybe not as good
as Illustrator. Is that all the questions or? When you ask it that way,
it’s kind of like, all right, are you all done yet? Well, I really appreciate you
all listening to the talk, especially since there are other
great talks going on right now. You all have a good day. Thanks. [APPLAUSE] [MUSIC PLAYING]

4 comments

  • Droid Master

    svp aller visiter ma chaine je suis nouveau sur youtube je fais des tuto android ,hack et bien plus encore surtout violer le bouton des j'aime XD

    Reply
  • CopernicoTube

    If we have Sketch for Linux (or Java) that can be so more inclusive for developers in general and Android developers in particular. Or, at least, work with a public open file format.

    Because Linux is a natural work platform for us, and most of us don't use Apple platform not because we can't but because we don't want.

    Today, Is very sad when someone want show some design idea, and share a Sketch file, and I have no solution available to open it.

    Reply
  • Omgdannie2

    This was super useful as a designer, understanding the workflow for the developers.

    Reply
  • Arturo Mejia

    Great job, kudos!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *