notes for 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