Figma:

Shift + 0 will always zoom to 100%

Shift + 1 will zoom to fit
Shift + 2 to zoom to selection

Ctrl/cmd + Scroll wheel will allow you zoom in and out.

f for creating a frame

Ctrl + G to toggle Layout Grid

Cmd + G to group items

Cmd + Alt + G = Framing

Shift + A to trigger Auto Layout. Auto Layout is essentially Flex from CSS

Cmd + . to have hide all options. Good for Previewing the design

Use arrows to move an

Cmd + Alt + k - to create a component

Ctrl + c for color drop

Ctrl + / for searching Figma

For example, use the shortcut and search for Collapse Layers and hit
enter. Or use this feature to search for a plugin or other options.

Shift + r to bring up the rulers

Constraint Section will help you align items properly

y object by 1px and use Shift + arrows to move the object by

10px

CMD + Put your cursor on the element and click on it to

select it now matter deep it is inside a group.
Auto Layout

Color Styles and Detach a particular element

Text Styles

Components and Variants - Cmd + Alt + b to detach a

component.

Here is an important question. When do you start making components in

Figma.

And the answer is simple, you’ll do this when you start creating multiple
screens where we will be reusing the components.

Once you create a component and duplicate it, it becomes an instance of

that component and when you change the parent component, all the
instances of that component will change as well.

Child components can be overwritten with their customisations. When this

happens, changing the style of parent component doesn’t affect the child
component.

However, you can reset the child element by right-clicking on it and

then clicking on the reset option.

Always remember, the parent component will have diamond icon filled with
squares while the child components will have an empty diamond icon.

Also you can not change the structure of a non-modified child component.
In order to do that, you have to go to the parent component.

And, you can find all the components inside the assets tab. You can also
place them in one location inside a frame.

Figma is automatic and snaps it into place

Select a shape and hit enter on it to modify it’s proportions using
anchor points. Once you get access to the anchor points, use the shift
key to modify the individual anchor point. Simply put, you’ll entering into a
vector mode. Hit enter again to come out of the vector mode.

Plugins : Looper, Blobs

Community Designs are free with CC by 4.0 but you have to give
attribution to the designer.

Figma Layers with auto layout and the constraints is also similar to the way
we code it.