- [Meng] Hello this is Meng from Design + Code.
Today we will talk about some
of the strong foundations for your Sketch workflow.
This section assumes you are already familiar with Sketch.
We are going to focus on the workflow.
If you wish to learn about the basics,
I suggest heading to the Learn Sketch page.
Also, this video is an overview of the entire workflow.
So if you wish to learn more about any of these topics,
there is a section dedicated for each of them.
As a designer you need a solid process
to make your workflow efficient.
It's even more crucial when you are starting
because you can avoid a lot of
inefficient time wasting bottlenecks.
One of the things that sets Sketch apart
is the sheer amount of plugins and resources.
It's the openness of the Sketch file
which is universally supported
and well integrated into other apps.
Comparing Sketch base features to other design tools
is like comparing the iPhone specs to other phones.
You forget the ecosystem which is what
makes Sketch so special.
Abstract, InVision and Framer are some of the widely popular
third party apps that support Sketch first.
This is a big deal.
Just like the iPhones ecosystem, having access
to these incredible extensions first will make your workflow
10 times more powerful, flexible and up to date.
Most importantly it's driven by an active community
that constantly seek to better the workflow.
As a result you constantly solve pain points
with new plugin releases and refine your workflow
with better techniques.
Probably the most popular and efficient plugin
of all is Sketch Runner.
It's the absolute first thing you need to download.
Runner is an essential multipurpose plugin on steroids
for inserting UI elements and installing new plugins.
It's like the Mac Spotlight, or Alfred within Sketch.
To developers this is the equivalent of Packages in Atom,
and it can do so much more.
One of the most usable things about Runner
is that it lets you install plug ins without leaving Sketch.
To access Runner you just need
to press Command + Apostrophe,
and then you can navigate between tabs
just by pressing the Tab key.
And you can install any plug in you like.
The search is really powerful and descriptive with a useful
shortcut to launch the plug ins site, Option + Enter.
Plug ins are more like iPhone apps, as in, they make your
Sketch experience far more personal and enhanced.
Sometimes the plug in does a better job
than what's found in the native features.
In fact some of these plug ins have
inspired native features, such as,
resizing constraints and plug ins manager.
Since the iOS UI kit is now a library,
getting access to it requires you to click insert,
or symbols from the toolbar.
However, with Runner, this experience
is drastically better, because of the search.
In Runner, you simply tap twice
to get to the insert, and then type,
iPhone 10 status, for example, to get the status bar.
This works for your own libraries or symbols.
When it comes to getting beautiful photos
from On-Splash automatically generated,
Craft and Runner, have got you covered.
Select in shape, and make a search
for the command name of your plug in.
In this example, we're using Craft's On-Splash command,
and this also works with content generator,
or any plug in for that matter.
Some great uses are measures sizes,
and properties,
or Crafts extensions commands.
Of course, you can also use this
to activate hard to reach native commands like,
collapse all groups, uppercase, align, arrange, et cetera.
Once we have Runner set up,
we can immediately start exploring the various
UI kits and plug ins made by the community.
The exciting part, is that there are thousands
of resources out there.
Since we're designing for iOS,
we'll need to download Apple's UI kit,
and Great Symbols Studio, the iOS 11 GUI.
These kits can be saved to your templates collection,
or they can be used as a library.
Also, we have Sketch preloaded iOS UI kit,
for inserting UI elements on the fly.
Libraries can be added from the preferences pane.
Craft is an all in one plug in,
that can generate dynamic content,
duplicate symbols with dynamic content,
inspect, and deliver assets,
and even prototype directly in Sketch.
Next to Runner, Craft is arguably the most
comprehensive plug in.
In big team environments, this is an essential tool,
because it can deal efficiently with a lot of moving parts.
If you're already working with Envision's
full suite of services, you're in luck,
since you can basically sync your prototype,
free hand and libraries with them.
If not, you can still use your content features,
as the will come in handy for any type of use.
When you're in a team with multiple designers,
working in the same Sketch file,
it can be erratic to find a common ground,
and be on top of things.
Should you batch file the files via email,
should you have multiple files with the same design?
Well, extract will solve that problem for you,
it's like the GitHub for designers.
Every Sketch file will be store in one repository,
and shared across a team.
Everyone will use the same active files.
Team members, including designers, developers,
and product managers, can open these files
without worrying about making destructive changes.
If you're an active collaborator,
you can branch from the master file.
In other words, you can create
your own version of that file.
When finished, you can commit changes to the master file,
if a conflict is detected,
you have the choice to compare and choose,
which change is correct.
If not, you can merge those changes to the master file.
Abstract is really robust,
allowing you to follow a long history of changes,
and communicate with your team through comments and commits,
with all the essential UI kits and plug ins installed.
We can finally start combining with the powerful
native features already in Sketch.
Let's dial back a little,
and learn about how to work with Sketch's built in features.
When you have a lot of repeating elements,
such as a list of items,
or a group of content, you'll want to use symbols.
That way, when you modify something in that item,
it will automatically update across all the symbols.
Sometimes, contents in the symbol,
are not just to restricted to images and text.
You may need to change the icon or the background color,
that's where nested symbols come in.
With this powerful workflow,
you can customize all sorts of proof layers.
And when you have multiple symbols,
you'll want to customize the content individually.
With over writes, you can quickly replace
the text and images on the fly.
When working with nested symbols,
you can over write symbols instead of just text and images.
This opens up all kinds of possibilities
in terms of dynamic content, that can be over written.
Working in a team environment
requires a different workflow than working alone.
What happens when there are three or more people,
working on the same design,
what if you have a large style guide,
comprised of hundreds of symbols,
like colors, buttons, contents, dialogues and menus?
With libraries new in Sketch 47,
you can put all your symbols in a separate Sketch file,
that exists in a common folder,
like a drop box, or abstract.
Let's say I have a Sketch file called main,
I also have a library file named style guide.
Well from main, I import style guide,
in order to use all of its symbols.
Libraries can be imported to your main Sketch file,
and used as local symbols.
I can't modify those symbols from main,
but I can open style guide and edit the symbols there.
When I save style guide,
the changes are sent to main.
However, symbols inside libraries can only be modified
from that folder separately.
Whenever a change is made in that Sketch file,
it can be synchronized back to your main Sketch file.
Designing for multiple devices has become a necessity,
we don't design for a single iPhone anymore,
we design for dozens of different iPhones and iPads,
all with their own resolution and pixel density.
We design for landscape, and for web,
which has no set resolution,
you get the picture.
Your art board has to adapt to the screen changing size,
that's where resizing constraints come in.
For example, by setting the constraint to be
against top, left, right or bottom,
you get a box that follows those borders.
If your box has a 10 pixel distance from the left,
it will remain 10 pixels,
no matter how much you resize the constraining group,
or art board.
Additionally, you can set your element to have
a fixed width or height,
like this, when the container gets resized,
the element would keep it's fixed size.
And the auto layout plug in,
truly closes the gap between design and development.
When you work with so many resolutions,
iPhone 10, iPhone Eight, Android, web,
you can save a ton of edits
by setting up constraints similarly to how
you'd use auto layout in x code.
Working with adaptive layouts
has become a major need for designers,
and this is the answer.
With Anima's auto layout,
you can take this to the next level.
While Sketch has its own constraints feature,
it is still fairly basic,
compared to x code auto layout and stack use.
For example, you can stack similar elements,
you can obtain the real pixel values, against the borders,
so that they become dynamic with each other,
reacting to resizing in a way that a dynamic layout would.
The iOS app icon,
it doesn't have a traditional rounded corner,
it has something we call super ellipses.
Typically designers have to edit the basic path,
to get the right corners,
but with this new feature,
you can get the exact same result,
by turning on smooth corners.
One of my favorite features,
is the ability to easily export
multiple screen resolutions,
by using make exportable,
in the bottom right of the screen,
you can export at any scale,
and file formats like JPG, PNG, SVG, PDF, TIFF, and EPS.
PDF in particular is useful for iOS assets,
and SVG is a fantastic format for the web.
For many users, this is what makes Sketch
shine from the other apps.
Click make exportable,
to set up your slices.
By default, you'll set the scale at one x,
but click again, and you'll quickly get two x,
and then three x.
You can also set the scale to a width or height,
for instance,
if you wish to set your assets to export
at the maximum, 800 pixels wide,
set 800 w.
Images exported from Sketch, or any other app,
are not well optimized for consumption.
Apps and websites tend to have a below issue,
that's why plug ins like Image Opt In,
is a necessary step when you export a PNG, or JPG file.
From my experience, you can shave up to 80%
of the original file size,
plus, there's very little compromise in terms of quality,
even less apparent today, because of the retina screens.
You can even shave an additional 50%
by enabling PNGCrush, or JPEGOptim,
keep the quality at 80%.
Because you design for two x and three x screens,
the loss in quality won't be noticeable.
In fact, this site use these aggressive
optimization techniques.
Without this, I would end up having 30 megs per page,
rather than the current five meg,
while this may seem high,
we must not forget, that we have multiple videos,
and high resolution images.
Sometimes, you will work with large Sketch files,
of over 100 megs,
this can cause a strain on your hard drive,
and to the performance.
You may not always need full quality
of the bitmaps found in your document.
In Sketch, you can use the built in file,
reduce file size, which can reduce a sizeable amount.
To get an even better results,
we can use reduce, a Mac app,
which in my own experience, reduces even more,
and keeps the color and integrity better.
Documentations are time consuming,
you have to spend days or weeks on them,
when you need to update, you have to do it manually,
with each update,
you have to inform your whole team about them.
It's like, a major project of its own.
That's time that you could be spending
on perfecting the project, and getting real feedback,
from users.
That's where Envision Inspect Zeplin,
can simply come in.
With their Sketch plug in,
you can just export all your art boards,
and the Mac, or web app, will automatically pick up
all the styling specifications.
When you team opens your design,
the get the latest updates,
find all the sizes, distances, font properties, right there.
Additionally, developers will find the assets embedded,
and can even make comments on specific parts
of your designs.
To compare your Sketch art boards
with real implementation in iOS simulator,
I recommend using Flawless,
you can simply drag and drop your Sketch file,
and it will automatically detect all your art boards.
Then, it'll show an overlay of your design
on top of the simulator, this is also useful,
for testing your size on mobile,
since you can use Safari in the iOS simulator.
When you're done with your design,
you'll want to share it with your coworkers to get feedback.
Sketch integrated cloud sharing,
allows you to automatically upload all your art boards
to their server, and share your design,
via a link, privately or publicly.
Additionally, people can make comments.
This feature works well for any type of user,
who just wants to quickly share something they made.
If you're in a large team, and require more features,
like annotations and collaboration,
you might want to consider more specialized services.
Envision is well integrated into Sketch,
you can sync all your art boards to their system,
with a click of a button.
Freehand can make this process really fun,
and collaborative.
What's looks great on your computer screen,
may not be useful on your iPhone.
Thanks to SketchMirror, you can preview all your designs,
just by connecting via WiFi, or IP address.
If you're on the go a lot, you might find that,
setting a personal hotspot from your phone,
will give better results.
The art board can be swiped left and right from your phone,
swipe up and down to switch between pages,
double tap to zoom in, or adjust to fit the screen.
Mirror also supports scroll during preview,
so you can expand your screen as tall as you want.
For Android users, you might want to use Crystal,
another fantastic tool that works across platforms,
is Skala Preview.
Sketch doesn't have a built in prototyping tool,
but with Craft we can quickly prototype a flow,
by connecting screens.
Then, you can set a click, tap or swipe gesture.
Prototyping animations can be a labor intensive process,
especially with tools that have a deep learning curve.
For those who just don't want to learn code,
Flinto or Principles are perfect.
They yield maximum results,
for little investment of time and efforts,
both apps let you import all your art boards,
and do powerful animation in a matter of minutes.
For those who love code for its limitless possibilities,
you'll love Framer.
It's designer friendly,
because you can create and edit your UI in it,
which directly translates into code.
Often times, you'll need to customize existing icons,
or draw them from scratch.
You'll need in our arsenal,
a nice library of vector icons.
The ones by Pixel Love, and Streamline,
will work well for iOS.
Sketch is entirely vector based,
so you can easily import SVG icons,
and edit them as you see fit.
If you're uncomfortable working with vector paths,
you can at least change the color and size,
to fit your project.
To get an introduction to vectors in Sketch,
I suggest heading to the section, working with vectors.
Design is easy to learn, but hard to master,
while less obvious, the keyboard shortcuts,
are what makes Sketch so efficient,
as a user interface design.
Having to click too many times
is one of the reasons why I wanted to switch from Photoshop.
This is a list of the most essential shortcuts to learn.
The best way to learn Sketch,
is to download other people's work, and analyze them.
The community is growing at a rapid pace,
and new resources are popping out every day.
Sketch app sources, Sketch repos,
Sketch app hub, and Sketch for designers,
are some of the best places for downloading Sketch files.
Together, they have over 5,000
user submitted Sketch designs.
Color palettes are sharable as a file,
there's a link on this section,
where you can download this file.
To install a new plug in,
click on the download zip button on GitHub,
and once unzipped, double click on the dot plug in file.
Having a strong presentation for your app,
in a keynote or on the front page of your site,
gives your product an edge.
You can download the free sample from Angle,
the massive library of over 280 mock ups.
You'll find the iPhone, iPad, Mac, Apple Watch devices,
entirely made in vector, which means,
you can edit at your heart's content.
Additionally, you can download more devices,
and Diverse Device Hands, by Facebook.
Gradients can't be as easily imported,
but you can add them manually.
There's a link on this section,
where you can download the gradient Sketch file.
Envision, has created a number of fantastic
and free UI kits that you can download and start digging.
There is a really comprehensive style guide templates
for creating a website.
Highly suggested for those who like
to have a complete design system in place,
or, you can simply download it
to study a well executed example of that workflow.