Several weeks ago, I stumbled upon a presentation entitled “Become a Figma Ninja.” While the presentation did nothing to improve my martial arts skills, it did provide incredibly beneficial keyboard shortcuts to improve your Figma efficiency. So, if you are interested in upping your Figma game, this post is for you.  

An Introduction to Figma

Figma is a product design tool for creating mobile and web applications. Before Figma, the product design procedure was far more complicated. Products were originally designed using Photoshop, despite Photoshop not being a product design tool. Following Photoshop, Sketch was created. While it was good for product design, Sketch required several other applications to make it viable:

• InVision was used to make prototypes of your Sketch files and designs
• Zeplin allowed you to give your developers your Sketch files to inspect
• Abstract gave you version control of your designs in case you needed to access previous iterations

Using four different applications to design a single product was both inefficient and cumbersome. In response, the creators of Figma created one product that did it all.  

Figma Keyboard Shortcuts

While Figma was a great solution to the multi-app headache, designers are nonetheless still searching for ways to continue improving efficiency. The Figma Ninja shortcuts do just that. Below are some of the best keyboard shortcuts for Figma design: 

• Spacebar (With a Mouse): If you press the spacebar while using your mouse, your cursor turns into a small hand, and you can drag your Figma file around your screen. This allows you to keep your hand on your mouse rather than alternating between your mouse and trackpad. 
• Shift + 1: If you’ve ever collaborated on a Figma project, you’ve probably experienced getting lost in Figma space. When you open Figma files from another designer, you are occasionally given a blank page, and you must embark on a mission to find the small design files located somewhere offscreen. You can save yourself the headache by pressing Shift + 1 to center your screen on the hidden design files. 
• Shift + 2: If you select an artboard or an element and then press Shift + 2, it zooms into that selected item. This shortcut is much more efficient than manually zooming and moving. 
• Z to Zoom: If you press z on your keyboard, the cursor becomes a magnifying glass. If you hold down your cursor to select a rectangle on your screen, it will automatically zoom to the selected rectangle. 
• Command + Select: This is a shortcut I use pretty frequently. I nest many of my elements in groups or frames, making it hard to select individual objects within the group. If you hold Command and then select a specific object, it will allow you to select only that object within the nested element. 
• Alt/Option: If you press Alt on Mac or Option on Windows, it will show you the spacing around each individual element. While this is a feature available with the Inspect tool for developers, designers do not have an easy way to see spacing without this shortcut. 
• Shift + c: Figma allows designers and developers to leave comments on design elements. While this is an extremely useful feature, a plethora of comments can hinder the design process. Typing Shift + c allows you to hide and unhide the comments so that you can reference the comments only as needed while designing. 
• Shift + g: Typing Shift + g allows designers to turn the grids on and off. While this feature isn’t available to developers in Inspect mode, it is a beneficial shortcut for designers. 

While there are many more shortcuts to explore, these are some of the most important in your journey to becoming a Figma ninja.