Mastering Figma Shortcuts (original) (raw)

Last Updated : 14 May, 2024

In this article, we will explore various Figma shortcuts that UI/UX designers use to create designs on Figma. Before diving into the shortcuts, let's first discuss what Figma is, how it helps designers, and what a shortcut is. So, let's get started with the discussion.

Figma Shortcuts

Table of Content

• What is Figma?
• What Does a Shortcut Mean?
• Essential shortcuts
• Tools shortcuts
• Edit Shortcuts
• Text Shortcuts
• Conclusion

What is Figma?

Figma is a free open-source web-based design prototyping platform or tool primarily used by designers, product managers and developers to create user interfaces (UI) and user experience (UX) for websites and applications. Figma is especially famous for its collaborative features, commenting, and version history tracking. It help designers across world to easily collaborate, coordinate, and exchange feedback with other designers in real-time on the project.

What Does a Shortcut Mean?

A shortcut is a method or procedure that helps complete a task faster and more efficiently. This is an important way to bypass some of the common steps in the process, reducing the overall time and effort required.

Let’s take a closer look at these shortcuts and see how they help developers to create user interfaces (UI) and user experiences (UX) for websites and applications more quickly or easily in very less time and reduced effort.

Essential shortcuts

• **Ctrl + Shift + ? (Show keyboard shortcuts): This shortcut brings up a comprehensive list of all the keyboard shortcuts available in Figma.
• **Ctrl + \ (Show / hide UI): This shortcut toggles the visibility of Figma's user interface (UI). The UI includes elements like the toolbar on the left, layers panel, and other design tools.
• **Ctrl + / (Search through all commands): This shortcut helps search through all of Figma's commands and features.
• **V (Move tool): It's like having a virtual hand to move any element around on Figma Canvas.
• ****F (Frame tool):**You can use this tool to create frames for web pages, mobile apps, or any other type of interface you're designing.
• **P (Pen tool): This tool is perfect for creating custom illustrations or complex design elements.
• **Shift + P (Pencil tool): This tool is similar to the Pen Tool, but it creates a smoother, less-defined line. Best for sketching out ideas or creating organic shapes.
• **T (Text tool): This text tool lets you add text elements to your designs. You can change the font, size, color, and alignment.
• **R (Rectangle tool): This tool is used to draw perfect rectangles of any size and color.
• **O (Ellipse tool): This tool helps you create perfect ellipses with just a few clicks.
• **L (Line tool): This tool helps you draw straight lines of any length and angle.
• **Shift + L (Arrow tool): This tool helps you create flowcharts or diagrams by letting you add arrowheads to your lines.
• **C (Add / show comments): Collaboration is key! This tool helps to add comments directly to your design, allowing you to discuss specific areas with your teammates.
• **I (Pick color from elsewhere): This tool helps you pick a color from anywhere on your screen, even from an image you have opened.

Edit Shortcuts

• **Ctrl + C (Copy): This shortcut copies the selected object(s) to the clipboard. After that, you can paste it elsewhere in your Figma file or even into another design software.
• **Ctrl + X (Cut): Similar to copy, but "cut" removes the selected object(s) from their current location and places them on the clipboard.
• **Ctrl + V (Paste): This helps you paste the copied or cut object(s) from your clipboard onto your Figma canvas.
• **Ctrl + Shift + V (Paste over selection): This helps you paste the copied or cut object(s) on top of the currently selected objects, essentially replacing them.
• **Ctrl + D (Duplicate selection in place): This helps you create a copy or duplicate of the selected object(s) right next to the original object.
• **Ctrl + R (Rename selection): This shortcut brings up a renaming field, allowing you to give your element a clear and descriptive name.
• **Ctrl + Shift + E (Export): This shortcut opens the export menu, where you can choose the formats (like PNG or JPG) and quality settings to export your design.
• **Ctrl + Alt + C (Copy properties): This shortcut helps you copy the formatting and styles of an object (like font, color, effects) to the clipboard.
• **Ctrl + Alt + V (Paste properties): This shortcut helps you paste the copied formatting from your clipboard and apply it to the selected object(s).

Text Shortcuts

• **Ctrl + B (Bold): This shortcut makes the text stand out by applying bold formatting.
• **Ctrl + I (Italic): This shortcut adds a touch of elegance by italicizing the text.
• **Ctrl + U (Underline): This shortcut emphasizes important text by underlining it.
• **Ctrl + Shift + V (Paste and Match Style): This shortcut pastes copied text from another source while also matching the formatting of the surrounding text in the Figma file.
• **Ctrl + Alt + L (Text Align Left): This shortcut aligns the text to the left margin for a clean, traditional look.
• **Ctrl + Alt + T (Text Align Center): This shortcut centers the text within its container creating a balanced presentation.
• **Ctrl + Alt + R (Text Align Right): This shortcut aligns the text to the right margin, it’s often used for headings or call-to-action buttons.
• **Ctrl + Alt + J (Text Align Justified): This shortcut justifies the text by creating straight edges on both the left and right margins.
• **Ctrl + Shift + <** or ****Ctrl + Shift + > (Adjust font size): This shortcut adjusts the font size incrementally, making the text larger or smaller.
• **Alt + , or **Alt + . (Adjust letter spacing): These shortcuts controls the space between letters. Use Alt and comma to decrease letter spacing, and Alt and period to increase it.
• **Alt + Shift + <** or ****Alt + Shift + > (Adjust line height ): This shortcut adjusts the line height, controlling how close or far apart the text lines appear.

Conclusion

Figma shortcuts plays a very crucial role in faster design workflow and development of a product or service. Focus on the shortcuts that we discussed in the article and you'll be able to translate your ideas into polished UIs. So, keep practicing, explore new shortcuts, and watch your design speed soar!

We hope that this article helped you improve your knowledge about mastering Figma shortcuts for faster design workflow and you learned about new shortcuts and best practices that will help you create better user interfaces (UI) and user experience (UX) for websites and applications.