Web Development: Essential Figma Shortcuts for Working Efficiently

Friday, July 31, 2020

Essential Figma Shortcuts for Working Efficiently

These essential Figma shortcuts will increase your productivity and allow you to work more efficiently. They’re my own personal recommendations and I use them all the time. So let’s stop wasting time and jump right in!

Figma Shortcuts

Here’s a complete video version of the Figma shortcuts in this roundup. Don’t forget to subscribe to our Envato Tuts+ YouTube channel for tutorials, free courses, and more!

1. All the Keyboard Shortcuts

To find out all the Figma keyboard shortcuts available to you hit the Help & Resources button in the bottom right corner of the screen (or hit Ctrl+SHIFT+?):

This will bring up a neat overlay with all the keyboard shortcuts split into helpful categories. All the shortcuts are grayed out, but (this is pretty cool) ones you’ve used before will be highlighted for clarity:

2. Quickly Create Shapes and Objects

Let’s continue with the most basic Figma shortcuts.

To make shapes use R (for Rectangle)
L (for Line)
O (for Oval, or Ellipse)
T (for Text)
and F (for Frame)

Once you get in the habit of using these 5 keyboard shortcuts you’ll save so much time creating new objects on the page.

3. Navigate Around the Page

Let’s say you have a bunch of elements on the page, you’re zoomed in, and you want to navigate around them. Hitting H (Hand Tool) will allow you to drag the viewport around until you find what you’re looking for.

But there’s a faster way. You can pan by holding SPACE and dragging with your mouse. Effectively the same as the Hand Tool, without the need to switch between tools.

4. Setting Opacity on an Element

Quickly use keys 0 to 9 to set opacity on a selected object. With your object selected, hit 1 for 10% opacity, 2 for 20% and so on to 0 for 100%.

For finer control, hit two numbers in quick succession; 4 and 3 for 43% for example.

5. Zooming In and Out

Zooming in and out is really important for all design tools, and in Figma there are a number of keyboard shortcuts you can use, depending on your preferred methods of working.

Holding SHIFT+1 (this works for Windows and MacOS) will zoom to fit (so all objects on your canvas are contained within the viewport).
SHIFT+2 zooms in to whatever object is currently selected.
And SHIFT+0 will set the zoom level to 100%.
The + and - keys will zoom in and out, and holding COMMAND (on MacOS) or CTRL (on Windows) allows you to use your mouse wheel to smoothly zoom in and out, centered around wherever the mouse cursor is.
Lastly, holding Z brings up the Zoom tool for you to click or drag on the canvas and zoom in. ALT+Z does the same for zooming out.

More Zoom Settings

For more options and zoom settings click the dropdown in the top right corner of the window:

6. Nudging and Resizing with Arrow Keys

Let’s look at nudging and resizing objects with the arrow keys (I use these shortcuts all the time–they’re super helpful).

Nudging is to move an object in any direction. With an element selected, use the UP, DOWN, LEFT, and RIGHT arrow keys to nudge it 1px on the canvas. Hold down SHIFT and do the same to move your object 10px at a time.

To resize an object by 1px in a given direction hold down CTRL or COMMAND and use the arrow keys. As before, holding down SHIFT at the same time will do the same but by 10px.

7. Quickly Add Auto-Layout and Group

Another favorite shortcut of mine is to add auto-layout. Select the objects you want to use, then hit SHIFT+A.

Auto-layout is a feature which allows you to quickly create resizable components.

To group a selection of elements, hit COMMAND+G on MacOS and CTRL+G on Windows.

8. Color Picker

Another really useful Figma keyboard shortcut allows us to call the color picker at the click of a finger. Select an object then hit I to bring up the color picker. Click elsewhere on the canvas to apply that color to the object.

9. Rapid Search

In Figma you can press COMMAND+/ or CTRL+/ to bring up the search menu, and here you can do a lot of things (fire up a plugin, hide the UI, search for a file, and many, many more).

10. Showing and Hiding Layout Grids

Another shortcut I find myself referring to time and again is toggling visibility of layout grids. These Figma-generated grids allow you to position elements on the canvas with precision. CTRL+SHIFT+4 will show and hide grids, which is much quicker than the two-step process of selecting an object and reaching for the toggle button in the sidebar.

11. Duplicating Objects

Quickly duplicate an object by selecting it, then hitting CTRL+D (COMMAND+D on MacOS).

The duplicated element will be positioned precisely on top of the original, so let’s say you move the duplicate to a new position: to the right. If the next thing you do is duplicate that duplicate, its duplicate will appear appear to the right rather than on top of its predecessor.

The above points work on groups too, not just individual objects.

12. Aligning Centers

Aligning objects along a central axis (horizontally or vertically) is easy in Figma thanks to its alignment panel. But the keyboard shortcuts ALT+H (for horizontal) and ALT+V (for vertical) are much quicker to use!

Those Figma Shortcuts Will Make You More Efficient!

To see all these shortcuts in action don’t forget to check out the video version of this roundup. Let us know which Figma shortcuts save you the most time!