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

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 (library, atomic design elements)

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

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

custom shortcuts

system prefs -> keyboard -> shortcuts -> app shortcuts click + Application: sketch Menu: "Custom string" in sketch press shortcut!

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

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

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

shadows

use 1 or -1 for opposing sides

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

src

https://www.youtube.com/watch?v=WS8e9DGJT2Q