Have you ever looked over someone’s shoulder while they’re working and thought, “Oof, how do you have the patience to do that without shortcuts?” Or maybe the inverse: “Whoa! How did you do that so fast?” In this post, we’ve rounded up the shortcuts worth memorizing, plus a few that people often overlook.
Note: In this post, we are using macOS modifier keys. If you are on Windows, swap Command with Ctrl and Option with Alt, or show shortcuts within Figma to look it up. If you forget, these shortcuts can also be found by using quick actions (Command + K).
Shortcuts
Hold Command while resizing a Frame to ignore constraints. If you’ve ever been frustrated resizing a frame because things move around or get squished, hold down the Command key. This can trip up beginners, so learn it early! Extra tip: also hold down Option to resize both ends of your frame from the center.
Hold Ctrl while dragging objects into a frame to ignore auto layout. If you want an item to ignore auto layout, but you still want it in the auto layout frame. Kinda like CSS absolute positioning.
Hold Shift while scrubbing number fields to snap to your nudge amount. In the properties panel, number fields (width, padding, etc.) can be scrubbed by dragging your mouse. Hold down shift to increment the value based on your nudge setting.
Hold Shift while using the eyedropper to grab the color variable. If the color value you’re sampling is documented as a variable, you can select the variable instead of the raw color value. The eyedropper tool has even more hidden features.
Shift + Command + R to paste and replace. Replace the object you have selected with whatever is on your clipboard. Admittedly, I learned this one WAY too late. Now, it’s one of my most used shortcuts.
Hold Shift to align objects as a single group. Say you have some objects but you want to keep them in a group when you align them to the parent object (center, left, right, etc.). You could put them in a group, or simply use this shortcut to keep them together while you align.
Opt + Command + G to create a frame around your selection. A vital shortcut that is basically a requirement to be a web designer. Imprint it to your memory! You can also group objects using Command + G, but why use groups when you can use frames?
Shift + A to add auto layout to one or more selected layers. Speaking of frames, auto layout gives frames super powers. If you don’t already use auto layout, get to readin’!
Press Tab to select the next sibling object (Shift + Tab to select the previous one). The magic here is when you are editing text, use this shortcut to quickly select the next text frame and keep on typing without leaving your keyboard.
Shift + Enter to select the parent object (Enter to select child). I use this every time I’m in Figma to select the parent frame of whatever I have selected. Also, using Enter is an easy way to select all objects within a frame. Keep on pressing Enter to select further nested levels.
Shift + Space to show an inline preview of your selected frame. This opens a preview window right on the canvas. It can be used to test prototypes and quick interactions but I use it on static mockups too. Bonus: set your device in prototype settings to see a device frame around the preview.
Quickly press 0 twice to set opacity to 0%. You may already know that pressing 1 sets the opacity to 10% and 0 sets it to 100%. But how do you set it to 0%? Press 0 twice! Set specific opacities this way too (e.g. 2 + 3 = 23%).
Command + Shift + C to copy selection as an image. Save time copying an image directly to your clipboard instead of exporting an image. Handy for quickly pasting images into other applications.
Opt + Command + C to copy an object’s properties. Copy properties like fill, stroke, font, auto layout, etc. and paste them on another object (Opt + Command + V ).
Figma Features
These are not shortcuts, but tools/features that are easy to miss by beginners (and sometimes, experts!).
Scale tool. Scale everything proportionally. Font sizes, stroke thickness, effects, everything.
Lock aspect ratio. Resize an object and keep its aspect ratio without scaling everything.
Split tab view. You can view the same file in two different windows. Helpful for seeing the project zoomed out while you work in another window.
Color contrast checker. Figma has a built-in contrast checker in its color picker. Make sure your designs follow WCAG guidelines!
FigJam connectors in Figma Design. This one’s fun. You can copy the connector lines from FigJam and use them in Figma Design. They work pretty much the same. Use the linked file above to copy connectors and connect them to the edge of frames or shapes, just like FigJam. When you move the anchors they snap to the edge of objects.
What are some shortcuts or tools you can’t live without?
Leave a Reply