See how to make Sketch an effective collaborative tool and find the best workflow possible.

1. Sketch for designers
Why, when and how to use it

2. Over the past few years, Sketch has
established itself as the ideal software for
user interface design.
The purpose of this document is to
understand why to use it, in which cases, and
how to make it an effective collaborative tool
to find the best workflow possible.
INTRODUCTION

3. 1. Advantages
1. Constraints
1. Best practices
SUMMARY

4. ADVANTAGES

5. EASY TO IMPLEMENT
The Sketch interface is simple and the
software is inexpensive. It’s a far cry from
complicated tools like Axure, Photoshop or
Illustrator, and it enables different types of
users to be able to handle files:
→ A PO can do some tests
→ An editor can make text changes directly
in the mockups
→ A dev can find his assets himself
...

6. A COMPONENT-BASED APPROACH
This software is perfect for
a component-based approach:
● Each component can be converted into
a symbol, and its responsive behavior
can be defined (fixed, fluid, etc.)
● Sketch gives you the ability to create a
style guide on a separate page and to
manage all the components directly
from this style guide.
A style guide in my Sketch file

7. THE DESIGN MUTUALIZATION
Sketch enables you to create an element
once and to develop it during the project.
Each piece of the interface can be duplicated
and reused.
● Components can be converted into
symbols which can be configurable
thanks to the override feature
● Shared styles enable us to define a
color or a text style.
Configurable symbols
Color Styles Text Styles

8. SHARED LIBRARIES
Shared libraries centralize all visual elements
of a project and maintain consistency even
when working with several designers.
● For example, Lingo and Zero height
offer the ability to store all components
in an online styleguide on to use it
directly in your files.
● Sketch now also features a shared
library that enables you to know when a
component has changed and to apply
the change everywhere.
The native library of Sketch
Shared Libraries: which one to use?
See the article

9. FILES VERSIONING
More and more frequently, several types of
profiles work on the same files (UX or UI
designers, Creatives, PO, Dev, etc.).
Thanks to softwares such as Abstract, it’s now
possible to do file versioning to ensure that
everyone works on the latest version!
Keep an eye on: Figma which also offers
collaborative work (and XD which should
follow)
Abstract: a versioning tool to always
distribute the latest version of the file

10. RAPID PROTOTYPING
The other advantage of Sketch is the ability to
prototype very quickly using the Craft plugin
that automatically creates an Invision
prototype.
There are also other prototyping plugins :
● Launchpad which converts a Sketch file
to html
● Mirr.io which enables you to prototype
directly in Sketch without using Invision
Quick prototyping in Craft

11. EASILY SWITCH TO DEV
Building interfaces with Sketch is very similar
to the way developers think, which makes
switching to the development phase easier.
Also note:
● Exporting multiplatform assets in a few
clicks
● Simplifying graphical specifications with
softwares such as Inspect (still using
the Craft plugin), Sympli, Zeplin...
Specs are easily accessible by devs

12. PLUGINS GALORE
Not able to do something in Sketch ? Well,
someone has created a plugin for you for
sure!
Here are some:
https://medium.com/ux-power-tools/the-ux-designers-
best-companions-for-sketch-2d6cd3c10534
You can find them all here:
https://www.sketchapp.com/extensions/plugins/
Sketch Toolbox enables you to easily manage,
installing and uninstalling Sketch plugins

13. CONSTRAINTS

14. MAC ONLY
Yes, this is one of the black marks against
Sketch; it only works for designers working on
a Mac…
This could be a problem, especially if some
team members are on Windows or if a client
wants to be able to open source files...

15. TEXT MANAGEMENT
The management of text in Sketch is much
less refined than in softwares such as
Indesign or Illustrator for example.
The Sketch team explains type management
concerns well in this article.
Text management in Sketch may appear too simple
compared to classical layout softs.

16. HIGHT FIDELITY PROTOTYPING
Sketch is not well suited for high fidelity
prototyping (micro-interactions, complex
transitions, etc.).
According to the purpose of the prototype,
you might prefer using Axure or even other
great softwares such as Principle, Flinto or
proto.io.
And for prototypes that are directly exportable
to code, we favor Framer.js
Always ask yourself what is the purpose of your prototype
Article

17. TREE STRUCTURE
It is sometimes more difficult to get a good
view of tree structure in Sketch.
To maintain an overall view, you can use the
Userflow plugin.
Tree structure on axure

18. COLLABORATIVE DESIGN
It isn’t possible for several designers to work
on the same Sketch file and to see
modifications made by other in real time yet.
We expect a lot from the Picnic plugin which
promises this and, for those who are
impatient, you can also use the Figma
software that manages it perfectly.

19. BEST PRACTICES

20. THINK BEFORE STARTING
Sketch is indeed easy to use, but this is not a
good reason to jump into the software right
from the start of the project…
So don’t forget to make:
- Sketches to quickly rough out the
request
- A workflow to define the journey
- Zonings or wireframes to refine the
need
A paper prototype: mandatory before starting!

21. PAGES
Pages enable you to structure the file. There
are several approaches :
- One page per sprint
- One page per key functionality
- One page per journey
- Etc.
From my point of view, I prefer to have only
one “design” page showing all the journeys
(to maintain an overall view), a “Style Guide”
page, and an “Assets” page. Note : The Symbol page can quickly become a real mess and It’s
useless to try to organise it… Instead, you can use this very cool
plugin: Symbol Organiser

22. SYMBOLS
Symbols enable you to mutualize your
design. If conceived well, they can be
responsive and dynamic (overrides of texts,
icons, colors, etc.)
Best practices:
- Name your symbols carefully
- Use “/” in the names to create files
- Make a symbol as smartly as possible, in
anticipation of potential reuse
Best practices for symbols

23. LAYERS
Files are rarely handled only by one person.
The goal is therefore for anyone to be able to
understand the structure.
Models must be:
- Well named
- Well organized
- Grouped
It is also possible to search by layers in order
to select them rapidly.

24. KEYBOARD SHORTCUTS ARE YOUR FRIENDS
To work more quickly, it is helpful to use
keyboard shortcuts.
The main shortcuts you should know
All Sketch keyboard shortcuts

25. AND, AS A BONUS...
Lots of resources (plugins, icons, kits…)
to get off to a good start:
http://sketch.fordesignrs.com/
and
Videos to train yourself:
http://learnsketch.com/tutorials

26. Audrey Hacq - October 2017