How to find stuff

Please use Browser Search or Scroll down.

Figma

System

MacOS, Windows, Linux, online only

shortcuts

================================================ space drag cmd mousewheel zoom in/out cmd +/- zoom in/out crtl 0 100& view shift 9 zoom to fit all artboards/frames shift 2 zoom to fit selection (!) cmd + click directly select element click select grouped element v black arrow (select) k scale box r rectangle tool p pen tool l line tool o oval (circle) tool i color picker a artboard tool / frame tool crtl shift L lock/unlock layer crtl shift H hide/unhide layer shift R show rulers cmd ' pixel grid visible crtl g show layout grid cmd [] move object forward/backwards cmd / open menu, then enter command :D cmd \ hide panels cmd shift k place image cmd R rename layer crl shift e export crtl shift 3 outline mode cmd e flatten shapes c show/hide comments crtl shift ? show shortcut help ================================================

text on a path, curved text

plugins -> manage plugins -> arc

image tracer

plugins -> manage plugins -> Image Tracer

hide/show background grid

cmd \ to get into menu type grid then ENTER

new doc with web design size

a -> now select size!

A4 paper size

just create a frame: 2480 x 3508

zoom between objects super quickly

just use shift 2, deselect and shift 2 again

or

use shift 2 and shift 9

setting opacity

select object, use numbers like in photoshop

or

click in % box and use arrow keys and up/down

mask images with shapes

place an image add circle/path and move it beneath the image select both and click mask icon on top

place multiple images like in indesign

first drag rectangles shift cmd k -> select multiple images then just click on the rectangles to place them

if placing screenshots watch DPI and reduce:

mogrify * -resize 50% *.png

exporting

click on Frame -> then set Export options file -> export oder windowname/export (crtl shift e)

install figma in ubuntu

sudo add-apt-repository ppa:chrdevs/figma sudo apt update sudo apt install figma-linux -y figma-linux

importing sketch files

just drag sketch files into figma... maybe download some UI design files here: https://developer.apple.com/design/resources/

Gravit Designer

System

MacOS, Windows, Linux, works offline

shortcuts

========================================= space drag crtl mousewheel zoom in/out crtl +/- zoom in/out z / z alt zoom in/out crtl alt 0 fit artboard view to screen crtl 0 view whole artboard alt ENTER toggle fullscren / hide panels crtl alt g show grid crtl alt r show ruler crtl , show guidelines v black arrow (select) d white arrow (subselect) p pen tool k knife tool l line tool r rectangle tool e circle (elipse) tool t text tool shift crl e export crtl z undo shift crtl z redo shift crl v paste without formating crtl shift i invert selection crtl UP/DOWN send forward/backward shift crtl UP/DOWN send front/back crtl shift p convert to outlines crtl shift d duplicate in place

more

https://cl.ly/3feac82a0476 =========================================

fix pixelated images in output

just export as 300dpi instead of 72...

see outlines, outline mode

add layer move artwork into layer then click circle icon on layer

super fine movement

just turn of pixel snapping in SNAP options

blindtext, placeholder text

add textbox type: Lorem [SPACE] then it should fill with lorem ipsum

infogaphic

add circle click transform tool move [enter here same value as width] copies 2

src

https://www.youtube.com/watch?v=D-K5wOeEEkM

responsive elements

just use anchor icons!

drawing arrows

draw a line -> borders -> settings icon works for other shapes too (maybe convert to outlines if CLOSE checkbox isnt there) drag a copy with alt + drag cmd + d to replicate last step! to use custom arrow shapes, just create the shape and copy it then use the clipboard icon next to start/end arrow to paste it

src

https://vitorials.net/how-to-draw-an-arrow-in-gravit-designer/

Sketch

System

MacOS only, works offline

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

src

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