- Table of Content
- shortcuts
- data merge, import excel data
- distort, perspective
- snap to pixel grid
- text on a path, curved text
- image tracer
- hide/show background grid
- new doc with web design size
- zoom between objects super quickly
- setting opacity
- mask images with shapes
- place multiple images like in indesign
- exporting
- install figma in ubuntu
- importing sketch files
How to find stuff
Please use Browser Search or Scroll down.
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 ================================================
data merge, import excel data
create new artboard in figma and write textfields: #title #quantity #price #image copy this artboard several times create a google sheet with heading: title quantity price image ... fill it with data ... (for images just copy link) install google sheets sync plugin: https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync right click -> plugins -> google sheets sync paste linke and sync
src
https://www.youtube.com/watch?v=X_JP_lBka5Q https://www.youtube.com/watch?v=X_JP_lBka5Q https://www.youtube.com/watch?v=MVvyGHKEUao
distort, perspective
plugins -> manage plugins -> skew dat
snap to pixel grid
top right side: percentage dropdown -> uncheck snap to pixel
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/