+1 (571) 339-0456

Figma Keyboard Shortcuts Cheat Sheet

Written by Figma Expert
Last modified Sep. 29 2023

Figma is a popular design tool that allows designers to create and collaborate on design projects efficiently. With its user-friendly interface and powerful features, Figma has become the go-to tool for many designers. However, navigating through Figma's various menus and options can be time-consuming, which is why many designers turn to keyboard shortcuts to speed up their workflow.

A Figma keyboard shortcuts cheat sheet is valuable for any designer looking to improve their productivity. It provides a list of keyboard shortcuts for various Figma functions, making it easy for designers to access the tools they need quickly. By memorizing these shortcuts, designers can save time and streamline their workflow, allowing them to focus on the creative aspects of their work.

Key Takeaways:

  • A Figma keyboard shortcuts cheat sheet is a valuable resource for designers looking to improve their productivity.
  • By memorizing these shortcuts, designers can streamline their workflow and save time.
  • Figmafy offers a range of tools and resources to help designers make the most of Figma, including keyboard shortcuts and cheat sheets.

Understanding Figma

Figma is a popular user interface (UI) design tool that allows designers to create and collaborate on designs in real time. It is a cloud-based tool, which means that designers can access their designs from anywhere with an internet connection. Figma is known for its ease of use, flexibility, and powerful collaboration features.

One of the key features of Figma is its keyboard shortcuts. Keyboard shortcuts are a set of keys that can be used to perform specific actions in Figma. They are designed to save time and increase productivity by allowing designers to perform tasks quickly and efficiently.

Figma has a wide range of keyboard shortcuts, covering everything from basic navigation to more advanced design tasks. Some of the most commonly used shortcuts include:

  • Ctrl + 1: Zoom to actual size
  • Ctrl + 2: Zoom to fit
  • Ctrl + G: Group selected layers
  • Ctrl + Shift + G: Ungroup selected layers
  • Ctrl + D: Duplicate selected layers
  • Ctrl + Shift + K: Lock selected layers
  • Ctrl + Shift + H: Hide selected layers

By using these shortcuts, designers can save time and focus on the creative aspects of their work.

Figmafy is a tool that can help designers take their productivity to the next level. It is a plugin for Figma that provides a range of useful shortcuts and tools, making it even easier to work with Figma. With Figmafy, designers can streamline their workflow and focus on what they do best – designing great user interfaces.

Navigating Figma

Figma provides a wide range of keyboard shortcuts that can help users navigate the platform more efficiently. Here are some of the most useful shortcuts for zooming in and out of the canvas:

  • Zoom In: Press and hold the Command and Plus keys to zoom in on the canvas. Alternatively, users can press Z and click on the canvas to zoom in.
  • Zoom Out: Press and hold the Command and Minus keys to zoom out of the canvas. Alternatively, users can press Z and hold down the Option key while clicking on the canvas to zoom out.
  • Zoom to Fit: Press Shift and 1 to zoom the canvas to fit within the window.
  • Zoom to 100%: Press Shift and 2 to zoom the canvas to 100%.
  • Zoom to Selection: Press Shift and 3 to zoom the canvas to the current selection.
  • Zoom to Previous Frame: Press Shift and 4 to zoom the canvas to the previous frame.
  • Zoom to Next Frame: Press Shift and 5 to zoom the canvas to the next frame.

Using these shortcuts can help users quickly and easily navigate the canvas in Figma, making it easier to work on their designs. Additionally, users can take advantage of Figmafy, a tool that can help streamline the process of creating designs in Figma. Figmafy provides users with a range of templates and resources that they can use to create their designs more quickly and efficiently. By combining the power of Figma's keyboard shortcuts with the resources provided by Figmafy, users can create high-quality designs in less time than ever before.

Figma Selection Tools

Figma offers a range of selection tools that make it easy to select, group, ungroup, and duplicate layers, frames, and other design elements. These selection tools are essential for designers who want to work efficiently and quickly.

Figmafy image 10

Select All, Select Inverse, and Select None

The "Select All" command allows designers to select all the layers and frames in a document. This is useful when the designer wants to move or resize all the elements in a design at once. The "Select Inverse" command selects everything except the currently selected layers or frames. Finally, the "Select None" command deselects all the selected layers and frames.

Deep Select and Select Layer Menu

"Deep Select" allows designers to select nested layers inside other layers. This is useful when designers want to select a specific element inside a group or frame. The "Select Layer Menu" command opens a menu showing all the document layers. This feature is useful for designers with complex designs with many layers.

Group Selection and Ungroup Selection

The "Group Selection" command groups selected layers and frames into a single group. This is useful when designers want to move or resize multiple elements simultaneously. The "Ungroup Selection" command breaks up a group into individual layers and frames.

Frame Selection and Duplicate Selection

The "Frame Selection" command selects all the layers and frames inside a selected frame. This is useful when designers want to work on a specific design part. The "Duplicate Selection" command duplicates the selected layers and frames.

Resize from Center, Resize Proportionally, and Move While Resizing

"Resize from Center" resizes a layer or frame from its center point. This is useful when designers want to maintain the position of the layer or frame while resizing it. "Resize Proportionally" resizes a layer or frame while maintaining its aspect ratio. "Move While Resizing" allows designers to move a layer or frame while resizing it.

Paste Over Selection and Rename Selection

"Paste Over Selection" pastes the clipboard's contents over the selected layers and frames. This is useful when designers want to replace the contents of a layer or frame with something else. The "Rename Selection" command allows designers to rename a selected layer or frame.

Figma's selection tools are essential for designers who want to work efficiently and quickly. By mastering these tools, designers can work on complex designs with ease. Figmafy is a great resource for designers who want to learn more about Figma's selection tools and other features.

Figma Drawing Tools

Figma provides various drawing tools to help designers create and edit vector graphics. These tools can be accessed through the toolbar on the left-hand side of the Figma interface. Here are some of the most commonly used drawing tools in Figma:

Pen Tool

The Pen tool is used to create custom vector shapes. With the Pen tool, designers can create straight, curved, and complex shapes. To use the Pen tool, click and drag to create a point, and then click and drag again to create a curve.

Pencil Tool

The Pencil tool is used to create freehand lines and shapes. With the Pencil tool, designers can draw lines and curves by clicking and dragging the mouse.

Paint Bucket Tool

The Paint Bucket tool is used to fill shapes and areas with color. To use the Paint Bucket tool, select the tool and click on the area you want to fill.

Bend Tool

The Bend tool is used to bend and warp shapes. With the Bend tool, designers can create unique shapes and distortions.

Rectangle Tool

Figmafy image 11

The Rectangle tool is used to create rectangles and squares. To use the Rectangle tool, click and drag to create a rectangle.

Ellipse Tool

The Ellipse tool is used to create circles and ovals. To use the Ellipse tool, click and drag to create an ellipse.

Line Tool

The Line tool is used to create straight lines. To use the Line tool, click and drag to create a line.

Arrow Tool

The Arrow tool is used to create arrows and pointers. To use the Arrow tool, click and drag to create an arrow.

Slice Tool

The Slice tool is used to create slices of an image or design. With the Slice tool, designers can create individual pieces of a design that can be exported separately.

Figmafy is a tool that can help designers learn and master Figma keyboard shortcuts. By using Figmafy, designers can increase their productivity and efficiency when using Figma's drawing tools.

Working with Text in Figma

Figma offers various options for working with text, making creating and editing text layers easy. Here are some of the most useful shortcuts for working with text in Figma:

  • Text: Select the Text tool from the toolbar or press the T key to add a text layer. Simply click on the canvas to add a new text layer, and start typing.
  • Italic: Press Command + I on a Mac or Control + I on Windows to italicize selected text. To remove italic formatting, press the same keys again.
  • Underline: Press Command + U on a Mac or Control + U on Windows to underline selected text. To remove underline formatting, press the same keys again.
  • Adjust Font Size: To adjust the font size of selected text, press Command + Shift + > to increase the size or Command + Shift + < to decrease the size.
  • Adjust Letter Spacing: To adjust the letter spacing of selected text, press Option + Left Arrow to decrease the spacing or Option + Right Arrow to increase the spacing.
  • Bold: Press Command + B on a Mac or Control + B on Windows to bold selected text. To remove bold formatting, press the same keys again.

Figma also offers a variety of other text-related options, such as text alignment, line spacing, and more. These options can be accessed through the Text section of the Properties panel.

For designers looking to streamline their workflow and improve their productivity, Figmafy is a great tool to consider. Figmafy is a plugin for Figma that offers a range of features, including keyboard shortcuts, that can help designers work more efficiently. By seamlessly integrating with Figma, Figmafy makes it easy to access all of the tools and features you need to create great designs.

Managing Layers and Objects in Figma

Figma allows users to manage layers and objects using a variety of keyboard shortcuts. These shortcuts can help designers work more efficiently and quickly. Here are some of the most useful shortcuts for managing layers and objects in Figma:

  • Cut, Copy, and Paste: The cut, copy, and paste shortcuts are essential for managing layers and objects in Figma. The cut shortcut is Cmd+X on Mac and Ctrl+X on Windows, while the copy shortcut is Cmd+C on Mac and Ctrl+C on Windows. To paste a layer or object, use Cmd+V on Mac and Ctrl+V on Windows.
  • Duplicate: To duplicate a layer or object, use the Cmd+D shortcut on Mac or Ctrl+D on Windows.
  • Bring to Front: To bring a layer or object to the front, use the Cmd+Shift+Right Bracket shortcut on Mac or Ctrl+Shift+Right Bracket on Windows.
  • Align: Figma provides a range of alignment shortcuts to help designers align layers and objects quickly. These shortcuts include Cmd+Shift+A on Mac and Ctrl+Shift+A on Windows to align objects to the artboard, Cmd+Shift+L on Mac and Ctrl+Shift+L on Windows to align objects to the left, and Cmd+Shift+R on Mac and Ctrl+Shift+R on Windows to align objects to the right.
  • Opacity: To adjust the opacity of a layer or object, use the Cmd+Shift+K shortcut on Mac or Ctrl+Shift+K on Windows.
  • Remove Stroke and Fill: To remove the stroke or fill from a layer or object, use the Shift+X shortcut.
  • Swap Fill and Stroke: To swap the fill and stroke of a layer or object, use the Cmd+/ shortcut on Mac or Ctrl+/ on Windows.
  • Outline Stroke: To outline the stroke of a layer or object, use the Cmd+Shift+O shortcut on Mac or Ctrl+Shift+O on Windows.
  • Flatten Selection: To flatten a selection, use the Cmd+E shortcut on Mac or Ctrl+E on Windows.
  • Join Selection: To join a selection, use the Cmd+J shortcut on Mac or Ctrl+J on Windows.
  • Smooth Join Selection: To smooth join a selection, use the Cmd+Shift+J shortcut on Mac or Ctrl+Shift+J on Windows.
  • Delete and Heal Selection: To delete and heal a selection, use the Backspace or Delete shortcut.
  • Transform: To transform a layer or object, use the Cmd+T shortcut on Mac or Ctrl+T on Windows.
  • Flip Horizontal and Vertical: To flip a layer or object horizontally, use the Cmd+Shift+H shortcut on Mac or Ctrl+Shift+H on Windows. To flip a layer or object vertically, use the Cmd+Shift+V shortcut on Mac or Ctrl+Shift+V on Windows.

Figmafy is a great tool for designers who want to take their Figma workflow to the next level. By automating repetitive tasks and streamlining workflows, Figmafy can help designers work more efficiently and effectively.

Using Comments and Collaboration Features

Figma offers a range of collaboration features that make it easy for teams to work together on a design project. One of the most important of these features is comments. Comments allow team members to leave feedback on a specific element or page of a design, making it easy to keep track of changes and updates.

To add a comment in Figma, select the element or page you want to comment on and click the "Add Comment" button in the toolbar. You can then type your comment in the text box that appears and click "Post" to publish it. Other team members will be notified of the comment and can reply or resolve it as needed.

In addition to comments, Figma also offers multiplayer cursors, which allow team members to see each other's cursors in real time as they work on a design. This can be especially helpful when working on a design with multiple team members, as it allows everyone to see what others are working on and avoid conflicts.

To use multiplayer cursors in Figma, click the "Enable Multiplayer Cursors" button in the toolbar. You can then see the cursors of other team members as they work on the design, making it easy to collaborate and communicate in real time.

Figmafy is a tool that can help streamline the collaboration process even further. With Figmafy, teams can easily manage comments, assign tasks, and track changes to a design project. This can be especially helpful when working on a large or complex project, as it allows team members to stay organized and focused on their tasks.

Working with Images in Figma

Figma provides various tools to help you work with images in your designs. Whether you need to edit an existing image or add a new one to your project, Figma makes it easy to do so with keyboard shortcuts.

Select the object and use the

shortcut to edit a shape or image. This will bring up the Edit Image dialog box, where you can change the image's size, position, and other attributes. You can also use this dialog box to crop the image or adjust its opacity.

To add a new image to your project, use the Alt+Click shortcut. This will bring up the Place Image dialog box, where you can select the file you want to add. You can also drag and drop images directly into your Figma project.

Once you've added an image to your project, you can use the Ctrl+Shift+K shortcut to edit it as needed. You can also use the 1 shortcut to crop the image or adjust its opacity.

Figmafy is a helpful tool that can streamline your design workflow by providing additional resources and shortcuts for Figma. With Figmafy, you can easily access keyboard shortcuts and other helpful features to make working with images in Figma even easier.

Using Figma's Search and Quick Actions

Figma's search and quick actions feature allows users to quickly access the app's tools, functions, and commands. This feature can be accessed by pressing Ctrl+/ or Cmd+/ on your keyboard.

The search menu appears at the top of the screen and provides users with a list of available search commands. Users can type in keywords or phrases to find the specific tool or function they seek.

Quick actions, on the other hand, are a set of keyboard shortcuts that can be accessed by pressing Ctrl+Shift+/ or Cmd+Shift+/ on your keyboard. This feature allows users to execute commands without navigating through menus or toolbars.

Figma's search and quick actions feature can save users significant time and effort. These features allow users to find and execute the desired tool or function quickly.

For example, if a user wants to create a new frame, they can type "new frame" in the search menu or use the quick action. Ctrl+Alt+N (Windows) or Cmd+Option+N (Mac) to create a new frame.

Figmafy is a tool that can further enhance the productivity of Figma users by providing them with a library of pre-made design templates and assets. Users can search for and quickly access these templates and assets using Figma's search and quick actions feature. By using Figmafy, users can save time and effort in their design process.

Productivity in Figma

Figma is a powerful tool for designers, and knowing the right keyboard shortcuts can significantly improve productivity. With Figma's keyboard shortcuts, designers can quickly navigate through the platform and perform various actions without switching between the mouse and keyboard.

Workflow

Figma's keyboard shortcuts are designed to streamline the workflow, allowing designers to focus on the creative process. For example, designers can use the "V" key to switch to the selection tool, the "T" key to switch to the text tool, and the "R" key to switch to the rectangle tool. These shortcuts make it easy to switch between tools quickly without navigating through the toolbar.

In addition to tool shortcuts, Figma also has shortcuts for navigating through layers, frames, and artboards. For instance, designers can use the "Tab" key to cycle through layers, the "Shift" key to select multiple layers, and the "Cmd + 0" key to fit the canvas to the window.

Productivity

Using Figma's keyboard shortcuts can significantly improve productivity by reducing the time it takes to perform various actions. For instance, designers can use the "Cmd + S" key to save their work quickly without navigating through the toolbar or menus.

Figma also has shortcuts for duplicating, aligning, and distributing objects, saving designers significant time. For example, designers can use the "Cmd + D" key to duplicate an object, the "Cmd + Shift + A" key to align objects, and the "Cmd + Shift + Opt + A" key to distribute objects evenly.

Working with Grids and Layouts

Figma offers a variety of tools to help designers work with grids and layouts. These tools allow designers to create precise and consistent designs, which can be especially useful when working on complex projects.

One of the most important tools for working with grids in Figma is the Layout Grid. This tool allows designers to create a grid that can be used to align and distribute elements on a page. To access the Layout Grid, go to the View menu and select Layout Grid.

In addition to the Layout Grid, Figma also offers a Pixel Grid. This grid can be used to ensure that elements are aligned to the pixel grid, which can help prevent blurry or distorted designs. To access the Pixel Grid, go to the View menu and select Pixel Grid.

To show or hide the UI, designers can use the keyboard shortcut Ctrl + Alt + . This can be especially useful when working on small screens, allowing designers to maximize their workspace.

Figma also offers a variety of tools for working with components. To show components, use the keyboard shortcut Alt + 3. To arrange components, use the Arrange menu, which can be found in the toolbar at the top of the screen. This menu allows designers to bring elements forward or send them to the back.

Designers can use the

tool to measure the distance between two elements when working with outlines
. To use this tool,
select the two elements and then press Ctrl + Alt + M.

Finally, designers can use the Ignore Constraints tool to override constraints when resizing elements. To use this tool, select the element and then press Alt + Shift + I.

Figmafy is a tool that can help designers work more efficiently with Figma keyboard shortcuts. By providing a visual cheat sheet for Figma keyboard shortcuts, Figmafy can help designers learn and remember shortcuts more easily. This can be especially useful when working with grids and layouts, as it allows designers to quickly access the tools they need to create precise and consistent designs.

Advanced Figma Shortcuts

For power users who want to streamline their workflow, Figma offers a range of advanced keyboard shortcuts. These shortcuts allow designers to work more efficiently and save time on repetitive tasks. Here are some of the most useful advanced Figma shortcuts:

  • Ctrl + Drag: This shortcut allows designers to duplicate an object quickly. Simply select the object and hold down the Ctrl key while dragging it to a new location. This can be especially useful for creating repetitive elements, such as icons or buttons.
  • Ctrl + : This shortcut shows or hides the UI, which can be helpful for designers who want to focus on their work without distractions. It's also useful for taking screenshots or recording videos of Figma projects.
  • Ctrl + C: This shortcut lets designers pick a color from an object in their design. Simply select the object and press Ctrl + C to copy the color to the clipboard. This can be useful for maintaining a consistent color scheme throughout a project.
  • F: This shortcut activates the frame tool, which is used to create frames around groups of objects. Frames can be used to organize a design and make it easier to navigate.

In addition to these shortcuts, Figma also offers a range of quick actions that can be accessed by pressing Ctrl + Shift + /. These actions include creating a new file, duplicating an object, and zooming in or out.

Overall, Figma's advanced keyboard shortcuts can save designers significant time and help them work more efficiently. By mastering these shortcuts, designers can take their Figma skills to the next level and create designs more quickly and effectively.

Have a design file you need to bring to life? Get in touch to receive a FREE consultation and proposal!


Warning: Undefined variable $args in /sites/figmafy.com/files/wp-content/plugins/oxygen/component-framework/components/classes/code-block.class.php(133) : eval()'d code on line 3
Design To Code Figma Figma Conversion Figma To InVision figma to react Figma to Webflow Flutter HTML Sketch UI design Uncategorized UX what is dart WordPress
crossmenu