Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
254 views3 pages

Figma Notes

Here are the key shortcuts and features in Figma summarized in 3 sentences: Shift + 0-2 zooms the view, Shift + 1 fits to view, and Shift + 2 zooms to selection. Ctrl/Cmd + scroll wheel allows zooming in and out. F creates frames, Ctrl/Cmd + G toggles the layout grid, and Cmd + G groups items. Figma has many useful shortcuts for navigation, formatting, and components.

Uploaded by

g teju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
254 views3 pages

Figma Notes

Here are the key shortcuts and features in Figma summarized in 3 sentences: Shift + 0-2 zooms the view, Shift + 1 fits to view, and Shift + 2 zooms to selection. Ctrl/Cmd + scroll wheel allows zooming in and out. F creates frames, Ctrl/Cmd + G toggles the layout grid, and Cmd + G groups items. Figma has many useful shortcuts for navigation, formatting, and components.

Uploaded by

g teju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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.

You might also like