If you’re like me, you’re always looking for new ways to make your design process more efficient — ways to work “smarter”, not harder. Lately, I’ve been really into learning Figma shortcuts, and love the way my process feels when I am able to keep my fingers on the keypad.
These 5 shortcuts have been game-changers for me — and (besides the super basics — like command-C) these are the ones that I believe will make the biggest impact to your design process. Let’s dive in!
1. Add auto layout: Shift-A
If you’re not using auto layout already, get ready to level up your design game, create perfect consistency throughout your pages, and impress your developers. While it might seem confusing at first, I promise, it is worth learning. Here are a couple links that help explain Figma’s auto layout:
Figma in 5: Auto Layout (Youtube)
Create dynamic designs with Auto layout (Web article)
2. Text align left: Option-Command-L
Users expect to find content in certain positions. We know that people tend to read / scan pages in Z and F patterns and it is our job to design for ease of use in this area. When it comes to large groups and paragraphs of text, users expect text to be aligned on the left. I find myself aligning text on the left all the time and this shortcut has been amazing. If you want to read more about how people read and why alignment is important, check out this article:
Visual Hierarchy: Organizing content to follow natural eye movement patterns (Web article)
3. Create component: Option-Command-K
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. If you’re working on a large web project, making a UI kit or building a design system, components will be game-changing for you. Components take a good minute to figure out so I’ve included a few resources to help you learn them below:
Guide to Components in Figma (Web article)
Figma Tutorial: Components – The Basics (Youtube)
4. Distribute spacing: Control-Option-H
I am constantly checking to make sure my assets are evenly distributed across the page in accordance with the grid I am using. This gives my eyes a break from guessing what is evenly spaced and what isn’t. For example: if you want to distribute 10 icons across a desktop screen, select them all and this shortcut will take care of it for you. You can learn more about distribution here:
Figma Tutorial: Alignment & Distribution (Youtube)
5. Resize frame only: (select frame)-Command-(drag frame)
This was the biggest game changer to my design flow. When I started using Figma, I hated how my components would move across my frame as I resized it. You can apply this shortcut to any item you want to resize without effecting other items in the grouping. You can read about frames in Figma here:
Frames in Figma (Web article)