Top Shortcuts for Figma

Figma has shortcuts that can increase designer productivity, which helps to develop efficient and outstanding results. Figma is compatible with all operating systems and, most importantly, is a web-based design editor. Figma (https://www.figma.com/) has the capability to prototype, review, and collaborate on on-screen designs, and is able to design from the browser to any application. There are essential shortcuts to use to make the design efficient and attractive. The shortcuts are derived from the following:

Listing all keyboard Figma shortcuts (Ctrl + SHIFT + ?)

A keyboard shortcut identifies all the available resources and helpful information to handle Figma functionality. The keyboard shortcut for all that information can be accessed by pressing the following buttons: (Ctrl + SHIFT + ?).

The diagram below shows at the bottom:

After clicking the keyboard shortcuts helpful categories are split out at the bottom.
NB: All shortcut keys can also be accessed by clicking the (?) on the bottom right of the Figma file.

Creating objects and shapes

To create shapes in Figma there are specific keyboard shortcuts which include:

• R - Used to make shapes such as a rectangle.

• L - used to make a line.

• O - used to make an oval or ellipse.

• T - used to create a text.

• F - used to make a frame.

Scrolling and navigation on the Figma page

To navigate across the elements of the Figma page, click the H button which will allow you to drag and view the content clearly.

Configure and set the opacity of an element

To set the opacity of any object on Figma, use keyboard keys from 0 to 9 to adjust the object opacity. Press 1 for 10% opacity, 3 for 30 % opacity, 4 for 40% opacity and 0 for 100% opacity.

The below image shows how setting opacity can be implemented:

How to zoom in and out

It is paramount to zoom in and out in all design tools and in Figma, there are keyboard shortcuts that help in editing and zoom effects as shown below:

• Hold SHIFT + 1 (compatible with Windows and MacOS) which will fit within the viewport in Figma.

• SHIFT + 2 is used to zoom in to objects that are selected on the Figma file.

• SHIFT + 0 is used to zoom to level 100%.

• Use of + and - keys on the keyboard will zoom in and out while holding the CTRL and COMMAND buttons while scrolling with the computer mouse to zoom.

• Hold the Z button on the keyboard which brings the zoom tools by dragging the canvas to zoom in. Also holding the ALT + Z helps to zoom out.
  The zoom feature can be accessed by clicking on the top right of the Figma file as displayed below:

Resize and nudge with arrow keys

Arrow keys can be used to nudge and resize objects. Nudging is moving objects in any direction. To nudge, select the element, press the UP, DOWN, LEFT, and RIGHT arrow keys by nudging it to 1px on the Figma canvas. Also, hold the SHIFT key as you press the arrow keys to move the Figma object to 10px each time.

Adding auto-layout and grouping the objects

Auto-layout is added to the object by clicking SHIFT + A on the keyboard while selecting the object and the options will be highlighted. The image below shows how the auto-layout is created:

The above feature helps to create resizable Figma components. To group the objects, click the COMMAND + G on MacOS and CTRL + G for the Windows operating system.

Figma color picker

Clicking the I button on the keyboard helps Figma users to call for a color picker with one click. Once you have picked the color, click out of the Figma file for the color to apply.

Search rapidly on Figma

To get the search menu, click the COMMAND + / and CTRL + /. The search menu helps to get a plugin, search a file, and get other content.

Hide and show layout grids

The Figma grids help position elements with precision. To toggle the visibility of grid layouts, click the CTRL + SHIFT + 4 button which shows and hides grids which is the best toggle button in the sidebar.

The diagram below shows how the options are displayed:

Duplicate objects in Figma

To duplicate objects selected on Figma, click the CTRL + D for Windows and COMMAND + D on MacOS. The duplicate element will be positioned on top of the original precisely.

Aligning elements in the center

To align elements in Figma, click the keyboard shortcut keys ALT + H (horizontal position) and ALT + V (vertical position) button.

Summary of Figma keywords.

This summary highlights the shortcuts used in Figma, as follows:

Tools

• Line tool -> L

• Add comment -> C

• Slice tool -> S

• Text -> T

• Pen -> P

• Move -> V

• Rectangle -> R

• Color -> V

View

• Outlines -> CTRL + Y

• Pixel grid -> CTRL + ‘

• Open asset panel -> Alt + 2

• Open layers panel -> Alt + 1

• Open prototype panel -> Alt + 9

• Open design panel -> Alt + 8

• Open inspect panel -> Alt + 0

Zoom

• Zoom out -> -

• Zoom in -> +

Text

• Underline -> CTRL + U

• Create link -> CTRL + K

• Center text -> ALT + CTRL + T

• Align text left -> Alt + CTRL + L

• Align text right -> ALT + CTRL + R

• Italicize -> CTRL + I

• Bold -> CTRL + B

• Adjust font-weight -> ALT + CTRL

Creating shapes

• Pen -> P

• Remove stroke -> /

• Flatten selection -> CTRL + E

• Remove fill -> ALT + /

• Join selection -> CTRL + J

• Paint bucket -> B

Element election

• Deep select - > CTRL + Click

• Select None -> Esc

• Select all -> CTRL + A

• Group selection -> CTRL + G

• Frame selection -> ALT + CTRL + G

• Select layer menu -> Right click + CTRL

Edit Figma elements

• Duplicate -> CTRL + D

• Paste properties -> ALT + CTRL + V

• Copy properties -> ALT + CTRL + C

• Paste -> CTRL + V

• Cut -> CTRL + X

• Rename selection -> CTRL + R

Arrange elements

• Send back -> CTRL + [

• Bring forward -> CTRL + ]

• Align top -> ALT + W

• Align left -> ALT + A

• Align right -> ALT + D

• Align bottom -> ALT + S

• Align centers -> ALT + H and ALT + V

• Bring to front -> ALT + CTRL + [

Components

• Detach intense -> ALT + CTRL + B

• Team library -> ALT + CTRL + O

• Show assets -> ALT + 2

• Show components menu -> ALT + I

• Create component -> ALT + CTRL + K