- Table of Content
- shortcuts
- text styles
- flowcharts and responsive arrows
- edit/switch global colors
- atomic design library
- creating a template
- sketch prototyping functionality
- dotted lines
- resize fonts and groups
- text on a path
- resize text box frame fast
- custom shortcuts
- disable snapping
- skew text
- create style guides
- slice
- click in groups
- ruler & guides
- create hyperlink in pdf
- create new artboards
- mask image
- columns+grid
- copy vector artwork from illustrator
- exporting
- artboards
- rounded corners only on one side
- shadows
- see margins
- modify type
- group objects
- mask image
- sketch plugins
How to find stuff
Please use Browser Search or Scroll down.
shortcuts
============================================================== crtl option cmd ARROW up/down move to top/back duplicate artboard cmd d find/replace color option cmd f type smaller/bigger option cmd =/- show grid crtl g color picker crtl c fast renaming of groups crtl r or tab resize shapes perfectly cmd left/right cycling through boards fn left/right bring to front/back option cmd up/down copy styling (word format brush) option cmd c lasso selection option drag change font (in textfield) cmd t convert to outlines shift cmd o icons, special characters crtl cmd space toggle pixels crtl p hide top toolbar option cmd t fullscreen crtl cmd f presentation mode, hide menus cmd . rotate shift cmd r toggle fill f toggle border b lock cmd shift l hide cmd shift h ==============================================================
text styles
write something -> right side: text style menu -> click create text style then delete original, it is now embedded in document to change a style, just apply it, make then changes -> text styles -> update
flowcharts and responsive arrows
draw arrow line (curve) and endpoints (3 elements) select the 3 elements, create a symbol go into symbols page right side resizing corner points: check top/left edge of cross to pin it check fix width+height to keep size middle line: check all 4 blue edges, uncheck fix widht/height then just create a symbol inside a symbol and duplicate it for different options! border radius, colors usw
src
https://www.youtube.com/watch?v=Qzu7WHjBI2M https://medium.com/sketch-app-sources/lets-start-a-sketch-library-12a7882faeb0
edit/switch global colors
edit -> find and replace color
atomic design library
create the colors
create lots of square with different colors on the right side: shared style -> create
create the buttons
draw rectangle, give it color bg from shared style "colors" draw text field on top with white font select both, create symbol and name it: ui/button/primary go into symbols page select rectangle (without text), make it symbol again! then create for all the colors! leave the symbols page and find the dropdown to switch colors in right side :D to delete some: shared styles -> organise shared styles
src
https://medium.com/sketch-app-sources/lets-start-a-sketch-library-12a7882faeb0
creating a template
create desired artboards file -> save template
~/Library/Application Support/com.bohemiancoding.sketch3/Templates
just use ln -s to create a link
sketch prototyping functionality
shortcuts
file -> new -> tut! H to add links crtl + f show links cmd + p preview
create new prototyp
file new -> material design pick the black artboards for mobile, tablet usw then design artboards name artboards the just add hotspots and define transition set startpoint with little flag icon define sticky header, hamburger PNG for examples... use little orange arrow for linking to previous slides for scrolling HD and Desktop versions, make sure Size: Pixel Resized or Apple TV hrhr (so it will automatically crop to device size, but is scrollable)
create symbol of the menu
first name the PAGES properly create navbar, turn into a symbol doppelclick auf symbol -> click prototyping (right bar) link pages also link to previous one place the symbol on the page, and check FIXED HEADER (for final presi, use nested symbole to create menu hovers, but it's very hard to adjust menu text after that... so only use with caution)
share the prototyp
sign into sketch cloud, and click upload then just copy the link and send it! (if it doesn't show up as a prototyp then just upload as new project)
src
https://medium.com/sketch-app-sources/prototyping-inside-sketch-49-how-it-works-and-what-you-can-do-7a48c829f282 https://learnux.io/course/sketch/prototyping-in-sketch?autoplay=1 https://webdesign.tutsplus.com/tutorials/native-prototyping-in-sketch--cms-31200 https://www.youtube.com/watch?v=hE0dycKVCbI https://www.youtube.com/watch?v=AKXGFBUwbH8
dotted lines
create line (click on wheel) Thickness: 500, Dash: 1, Gap: 1000 then scale 1%
src
http://deanhuds.tumblr.com/post/144915763551/perfect-dotted-line-in-sketch-20
resize fonts and groups
click on scale tool and enter percentage!
text on a path
create circle and text select text menu -> text -> text on a path then drag text onto path move it so it doesn't get cut off flip icon to move it outside then just rotate circle until it fits
resize text box frame fast
text -> right tool bar -> alignment -> auto
custom shortcuts
system prefs -> keyboard -> shortcuts -> app shortcuts click + Application: sketch Menu: "Custom string" in sketch press shortcut!
disable snapping
cmd , pixel fitting -> uncheck hold cmd when dragging
skew text
convert to outlines: shift cmd o shift cmd t (transform) -> middle point drag or then press transform button (top menu) -> then drag middle points of object
create style guides
craft plugin -> library icon -> document tab -> create styles use it for global color changes: it automatically updates colors!
slice
insert -> slice check export group contents only, to get transparent element
click in groups
check click through box (right side)
ruler & guides
crtl + r -> then click on ruler to add a guide
create hyperlink in pdf
just paste URL as text layer (change color) when exporting pdf it will be clickable
create new artboards
create page -> insert artboards sizes: 1200 x 1350 768 x 1200 600 x 1430 320 x 1820
mask image
draw retangle -> then insert images select both -> right click -> mask
columns+grid
top right -> VIEW icon
copy vector artwork from illustrator
don't export/import, just copy paste into sketch!
exporting
single artboard as png
click on artboard (left edge menu) and drag onto desktop
select artboard / or parts
bottom right -> export -> many choices....
export slices for complete design!
select all SVG objects -> bottom right -> svg select all photos -> bottom right -> jpg + @2x file -> export -> select...
get distance between objects
select object, hold alt key + hover on another object
artboards
right click on top toolbar -> customize drag Artboard Icon into toolbar then select or Insert -> Artboard, then drag
rounded corners only on one side
double click object -> select corner -> click STRAIGHT icon on right menu
shadows
use 1 or -1 for opposing sides
see margins
click on object, hold ALT key
modify type
layer -> convert to outlines
group objects
select objects -> cmd + g
mask image
insert image insert circle select both -> then click mask icon in top toolbar
sketch plugins
gifme
original zip from github does NOT include .sketchplugin file so download from here: https://github.com/kannonboy/sketch-gifme-plugin/releases
diya timeline animations & web html export
create personas slider
put all into groups, check flatten with top most group then animate first 2 artboards, lots of keyframes need to animate all properties at once, cannot go back
path animations, like growing wine
create curvy path, with type (or draw path with pen tool) click on borders wheel dash: 1, gap: 900, dash: 1 gap: 900
morph between complex vector shapes or type
just create 2 artboards, add 2 elements with same name convert to outlines name the artboards
create simple animation
just create 2 artboards with same elements move elements on artboard to different positions to create animation export quickly as mov, create gif with camera icon!
edit timeline
when an animation is create, right edge click on timeline double click on keyframes to change easing uncheck flatten group (right panel) if objects a moved apart animate symbols for on/off buttons repeatedly used
lorem ipsum
https://github.com/freeauto/sketch-lorem-ipsum-2017 install in plugins folder (sketch plugins -> manage...) select text box (not inside box!) -> crtl shift L
design responsive artboards
use group resizing
src
https://www.sitepoint.com/responsive-design-in-sketch-its-finally-here/
auto layout
automatically arrange content
prototyp with craft
install
download here: invisionapp.com/craft applications -> craftmanager -> install
usage
links
select element -> press c -> select other artboard link to a screen gesture: click (tap for mobile)
links on same artboard
create artboard longer than usual size then create a link and link to bottom part of artboard
overlay menus
create on separate artboard (doesn't have to be same size) press c -> link as overlay gesture: click position: top left transition: slide in left background: 20%
close menu
select close button -> press c -> link back/close
upload to invision
click sync button -> sign in click create prototype button click sync button again -> open
get css code from elements
click on </> inspect icon -> select element
src
https://www.invisionapp.com/blog/build-interactive-prototype-sketch/ https://www.switchtosketchapp.com/
export more for creating gifs
plugin: export more then just create artboards plugins -> export more -> artboard to gif
plugins install manager
sketch toolbox
random content plugin
https://github.com/timuric/Content-generator-sketch-plugin open sketch -> plugins -> manage plugins -> click wheel
random numbers
paste this: [0-9][0-9].[0-9][0-9].[0-9][0-9][0-9][0-9] or use craft to insert text/photo elements
Sketch Data Studio
import from csv
Sketch Text Styles to CSS
generate html font styles https://github.com/getflourish/Sketch-Export-Text-Styles
Blade
automatically generate html Sketch Icon Fetcher Font awesome plugin Lorem Ipsum Plugin for Sketch Find and replace for Sketch 3 bitmap to vector?
animatemate
select element move element to start position plugins -> animatemate -> create animation create keyframe at 0 then to last 1 sec, create another keyframe at 25 move element to new position keyframe at 50 keyframe at 75 usw. then export as png squence open in PS (file -> open) check img sequence save as gif
