Figma Cheatsheet
Shortcuts to speed up common Figma practices
Hide/Show UI
command /
Type show, then check/uncheck the box for hideshow UI.
Command / is like the master command in Figma. If you run that command and then just start typing whatever you’re after you can find it easily.
Add a comment to a figma file
type c to enter comment mode type C to exit comment mode
Adding comments to UI blocks is crucial for our development process. Project managers should go through each block in the figma file and add a comment to all blocks which are global or have some specific funcitonal requirement.
Hide / Show comments
Shift C
Show / Hide the layers panel
Shift command \
Hide / Show rulers
Shift r
Frame selection
command option g
More resources:
The design system approach
Switch to the Rectangle tool.
The humble rectangle tool is awesome and therefor insanely popular.. I think its trending. Switch to it with ease with the letter r.
Hide those wierd red columns overlayed over the file
They are actually called layout grids and they are used for designing UI’s that fit perfectly into a 12 column layout. Which is a convention for bootstrap style layouts.
Shift G
Hide/Show UI
The screen can become cramped and distracting with all the UI side panels. This is one of my favs to quickly hide all the clutter and increase focus on your design.
command /
Type show, then check/uncheck the box for hideshow UI.
Command / is like the master command in Figma. If you run that command and then just start typing whatever you’re after you can find it easily.
Add a comment to a Figma file
Type c to enter comment mode Type C to exit comment mode
Adding comments to UI blocks is crucial for our development process. Project managers should go through each block in the figma file and add a comment to all blocks which are global or have some specific funcitonal requirement.
Hide / Show comments
Shift C
Show / Hide the layers panel
Shift command \
Hide / Show rulers
Shift r
Frame Selection
command option g
Naming Components
Name your components name/value to create options of components which are easily selectable from the right hand side menu.
for example btns/outlined and btns/filled
More resources:
The design system approach