Figma Cheatsheet

Shortcuts to speed up common Figma practices

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

more info more info

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.