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:
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.
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.
To navigate across the elements of the Figma page, click the H button which will allow you to drag and view the content clearly.
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:
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:
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.
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.
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.
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.
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:
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.
To align elements in Figma, click the keyboard shortcut keys ALT + H (horizontal position) and ALT + V (vertical position) button.
This summary highlights the shortcuts used in Figma, as follows:
Line tool -> L
Add comment -> C
Slice tool -> S
Text -> T
Pen -> P
Move -> V
Rectangle -> R
Color -> V
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 out -> -
Zoom in -> +
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
Pen -> P
Remove stroke -> /
Flatten selection -> CTRL + E
Remove fill -> ALT + /
Join selection -> CTRL + J
Paint bucket -> B
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
Duplicate -> CTRL + D
Paste properties -> ALT + CTRL + V
Copy properties -> ALT + CTRL + C
Paste -> CTRL + V
Cut -> CTRL + X
Rename selection -> CTRL + R
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 + [
Detach intense -> ALT + CTRL + B
Team library -> ALT + CTRL + O
Show assets -> ALT + 2
Show components menu -> ALT + I
Create component -> ALT + CTRL + K