Figma Quick Tips


Web Development

Updated Apr 4th, 2022

color variables are where it’s add to quickly test different looks

lock layer: ctrl + shift + l

pen tool (p): click and drag for bezier handles. Join from where you started then click done or hit enter to get out of pen mode.

duplicate item: alt + shift + drag (shift keeps it on the same axis)

Boolean groups: (union, subtract, intersect, exclude)

Editing boolean operation: double click, double click again, adjust anchor points.

Group: Ctrl + G

Ungroup: Ctrl + Shift + G

Convert to Frame: Ctrl + Alt + G

Set corner radius in vector panel

change cap from square to round

the scale tool: keeps proportions of strokes and rounded corners accurately. this can be found in the move tool sub-menu

click enter to begin “vector edit mode.” exit with done button, escape key, or double click outside.

Bend tool (Looks like handcuffs or bent barbell) used to add or manipulate bezier handles

paint bucket tool (B) to add or remove fills

stroke panel to customize: cap, join, dash, miter angle, etc.

constrain to 45 degree axis: shift

click and hold for bezier handles

small balck path to close path and hit enter.

alt with bend tool

delete or backspace to delete selected anchor. Shift and delete to delete heel while retaining path

select and hit alt to see the distance from neighboring elements

icons: google free figma icons
figma.com/resources/assets
Copy and Paste from template

Tips

Copy other designs to practice

start with a template form figmaresources.com

copy to figma > view only > click on name and duplicate to your drafts

Sources

Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2022) here