If you still wonder what tool to choose when it comes to UI design, and you want to work fast and efficiently, then take a look at what Sketch app might offer you.

1. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Rapid Design
How to speed up your work using Sketch App?
Joanna Cymkiewicz
1

2. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● Tool simple to use
● Quick and easy creation of UI
components
● Working on reusable elements
● Collaboration (UI & Devs)
Rapid Design
What’s the most important?
2

3. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● Adobe CC
● Sketch app
● Affinity
● Framer
● InVision
● And many, many more...
Tools
What the market offers
3

4. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Sketch App
Why it’s worth to use it?
4

5. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Sketch is a vector-based design tool with a focus on
screen design. It’s used primarily by screen designers
who create websites, icons, and user interfaces for
desktop and mobile devices.
5
sketchapp.com/press/

6. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
In 2010 Sketch app was released for the first time
and up to this days it’s constantly released with new
updates. It gives a great stability and continuous
development of the tool.
6

7. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz 7
Layer list
To organize pages, artboards,
and layers and keep the
structure
Inspector
To style, define, position, set
attributes and export.
Intuitive
interface
Simple & easy to use
Toolbar
To draw, insert and build

8. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Combination of what’s the best
from Adobe Creative Cloud
products and more...
A perfect
match
All in one
8

9. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
● Editing shapes
● Boolean operations
● Rotate & Transform
● Masking
● Scissors
● Pencil
● Vector tool
● Points & Paths
Vector
editing
9

10. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
● Reduce Image Size
● Replacing Images
● Cropping
● Color Adjustments
Bitmap
editing
10

11. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Text styles allows to keep
consistency across all UI
components used within one
solution (or as a part of external
library, across many solutions).
Text
styles
11

12. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Shape (Layer) Styles allows to save
a set of stylistic elements, that can
be reused across any of the layers
in the document, or any other
document with Libraries. Layer
Styles allows to make sure that the
styles of similar layers are always
kept consistent and up to date.
Shape
styles
12

13. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
In Sketch we can easily add (+),
subtract (-), divide (/), multiply (*),
and in some cases, use percentage
(%) to adjust objects on our
designs.
Math
13

14. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Sketch provides and easy way to
exchange shapes between itself
and Adobe CC. Just copy/paste.
Copy / Paste
14

15. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Sketch app is extended by the functionality that helps to create UI
components in the best way to reuse and share them.
And there is much more
15

16. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Data allows to populate designs
with images and text to visualize
the finished product.
Data
16

17. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Applying constraints to layers
allows determining how they should
behave when resizing the Symbol,
Artboard, or group those layers are
in — responsive design.
Resizing
Constraints
17

18. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
● Easy to build and edit
● Easy to maintain
● Easy to share
● Easy to create and set
instances & states
(Nested) Symbols
18

19. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
● Dynamic content in symbols
Changing content without
editing UI component or
creating many versions of one
element (eg. button with
different labeling or states).
Magic
of overrides
19

20. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
Libraries, give the possibility of
sharing Symbols and styles across
documents and updating them to be
always kept in sync.
Libraries
20

21. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Combination of (nested) symbols, text and shape
styles gathered in a library can be a part of Design
System — a single source of truth which groups all
the elements that will allow the teams to design,
realize and develop a product.
21
Examples of Design Systems - https://designsystemsrepo.com/design-systems

22. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
Sketch app provides a great file
organisation with a high level of
flexibility.
● Pages & Artboards
● Infinite Canvas
● Symbols
● Customizable Grids
● Measuring
● Performance
Convenient
work
clean & clear
22

23. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● Reusable components
● Software specific attributes
● Responsiveness
● Quick prototyping (basic flow)
Best to build
interfaces
Web, mobile and desktop
23

24. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● Full automatisation of
exporting assets directly from
Sketch
● Full integration with Zeplin.io
(Colors & Styles, Components)
Dev phase
Assets, UI specification,
measurements, etc.
24

25. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● Mirror app
(a quick designs preview on
mobile device)
● Plugins
● Resources
● Templates
● CSS code definition
● Predefined Data
Sketch +
What’s more?
25

26. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
#
● Zeplin
● Automate
● Rename it
● Sketch Palettes
● and many more...
Plugins
26

27. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● sketchapp.com/docs
● learnsketch.com/tutorials
● medium.com/sketch-app-sourc
es
● designsystemsrepo.com/desig
n-systems
Knowledge
What’s more?
27

28. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
● sketch.fordesignrs.com
● sketchapp.com/extensions
Goodies
What’s more?
28

29. Rapid design. How to speedup your work using Sketch App?
Joanna Cymkiewicz
:)Thank you
Joanna Cymkiewicz
29