

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 Figma grids help position elements with precision. The search menu helps to get a plugin, search a file, and get other content. To get the search menu, click the COMMAND + / and CTRL + /. Once you have picked the color, click out of the Figma file for the color to apply. Figma color pickerĬlicking the I button on the keyboard helps Figma users to call for a color picker with one click.
#Figma on move or zoom it moves viewport bug windows
To group the objects, click the COMMAND + G on MacOS and CTRL + G for the Windows operating system. The above feature helps to create resizable Figma components. The image below shows how the auto-layout is created: Adding auto-layout and grouping the objectsĪuto-layout is added to the object by clicking SHIFT + A on the keyboard while selecting the object and the options will be highlighted. Also, hold the SHIFT key as you press the arrow keys to move the Figma object to 10px each time. To nudge, select the element, press the UP, DOWN, LEFT, and RIGHT arrow keys by nudging it to 1px on the Figma canvas. Nudging is moving objects in any direction. The zoom feature can be accessed by clicking on the top right of the Figma file as displayed below:Īrrow keys can be used to nudge and resize objects. Also holding the ALT + Z helps to zoom out. Hold the Z button on the keyboard which brings the zoom tools by dragging the canvas to zoom in. 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. SHIFT + 2 is used to zoom in to objects that are selected on the Figma file. Hold SHIFT + 1 (compatible with Windows and MacOS) which will fit within the viewport in Figma. 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: The below image shows how setting opacity can be implemented: Press 1 for 10% opacity, 3 for 30 % opacity, 4 for 40% opacity and 0 for 100% opacity. To set the opacity of any object on Figma, use keyboard keys from 0 to 9 to adjust the object opacity. Configure and set the opacity of an element To navigate across the elements of the Figma page, click the H button which will allow you to drag and view the content clearly. Scrolling and navigation on the Figma page R - Used to make shapes such as a rectangle.

To create shapes in Figma there are specific keyboard shortcuts which include: NB: All shortcut keys can also be accessed by clicking the (?) on the bottom right of the Figma file. The keyboard shortcut for all that information can be accessed by pressing the following buttons: (Ctrl + SHIFT + ?).Īfter clicking the keyboard shortcuts helpful categories are split out at the bottom. The shortcuts are derived from the following: Listing all keyboard Figma shortcuts (Ctrl + SHIFT + ?)Ī keyboard shortcut identifies all the available resources and helpful information to handle Figma functionality. There are essential shortcuts to use to make the design efficient and attractive.

Figma ( ) has the capability to prototype, review, and collaborate on on-screen designs, and is able to design from the browser to any application. Figma is compatible with all operating systems and, most importantly, is a web-based design editor. Figma has shortcuts that can increase designer productivity, which helps to develop efficient and outstanding results.
