Logo

dev-resources.site

for different kinds of informations.

These Figma Shortcuts Have Improved My Workflow, You Should Try Them Too

Published at
5/15/2024
Categories
ui
productdesign
figma
uiuxdesign
Author
goldenekpendu
Categories
4 categories in total
ui
open
productdesign
open
figma
open
uiuxdesign
open
Author
13 person written this
goldenekpendu
open
These Figma Shortcuts Have Improved My Workflow, You Should Try Them Too

Designing interfaces in Figma can become very time-consuming, especially if it’s a large project and things must be done quickly.

I recently came across these Figma shortcuts that have drastically improved my speed and workflow.

1. Toggle between Layers and the Assets panels

Toggle between Layers and Assets panels in Figma
Toggle between Layers and Assets panels in Figma

Mousing around toggling the Layers and Assets panels could become repetitive and time-consuming, but there’s a faster way to do so — without moving your mouse!

Just use the shortcuts Alt + 2 (or ⌥ + 2 on Mac) to switch to the assets panel, and Alt + 1 ( ⌥ + 1 on Mac) to switch back to the layers panel. Quick and easy!

2. Toggle between the Design and Prototype panels

Toggle between Design and Prototype panels in Figma
Toggle between Design and Prototype panels in Figma

This is almost the same as the previous example, however, you may be using this more often as you prototype your designs.

So, instead of moving your mouse to the top right of your screen to switch panels, use the shortcut Alt + 9 (or ⌥ + 9 on Mac) to switch to Prototype and back to the Design panel with Alt + 8 (or ⌥ + 8 on Mac).

Note : this can also be done using another shortcut Shift + E.

3. Easily search for saved plugins

Quick search shortcut for plugins in Figma
Quick search shortcut for plugins in Figma

Before knowing this shortcut to access saved plugins, I’d go to the plugins side menu, and scroll through the list until I found the one I would use. Also, when reusing the plugin, I’d repeat the same process…again.

However, those days are now officially over with this shortcut. The next time you want to access your saved or recently used plugins, try Ctrl + / (or ⌘ + / on Mac). Type in the name of your desired saved plugins and you should see them right there!

For recently used plugins, use this instead: Alt + Ctrl + P (or ⌘ + ⌥ + P on Mac).

4. Align selections to any side of a frame

Align a selection to any side of a frame in Figma
Align a selection to any side of a frame in Figma

When creating frames, shapes, text and components in Figma (within a frame), there is the need to align these selections to either the left, top, right or bottom of a frame.

The go-to approach is to use the alignment tools in the top right of the Design panel. However, there are faster ways to do so.

If you game on a computer using a keyboard, you may be familiar with these keys: W , A , S , and D.

If you don’t game, that’s alright too. Here’s how these keys help to align to any side of a frame:

  • Alt (or ⌥) + W — Aligns to the top of the frame
  • Alt (or ⌥) + A — Aligns to the left of the frame
  • Alt (or ⌥) + S — Aligns to the bottom of the frame
  • Alt (or ⌥) + D — Aligns to the right of the frame

5. Align horizontally and vertically

Align selections horizontally and vertically in Figma
Align selections horizontally and vertically in Figma

This has been a valuable shortcut when aligning horizontally or vertically. Use the shortcuts Alt + H (or Option + H on Mac) to align horizontally and Alt + V (or Option + V on Mac) to align vertically.

This saves a lot of time when aligning assets in a design, without mousing all over align via the Design panel.

These are a few shortcuts that have been a timesaver for me. I hope you find value in this article and if you do, please share and leave me a comment below.

Thanks for reading. Ciao 😀

productdesign Article's
30 articles in total
Favicon
CAD in Engineering and Product Design
Favicon
Understanding the problem space in product management
Favicon
Developing a Fintech Product for the International Market
Favicon
E-Commerce: Present-Day Entrepreneurship
Favicon
Product Design Portfolio in Next.js
Favicon
Develop Smarter, Data-Driven Products that Elevate Experiences Throughout the Lifecycle
Favicon
🚀 5 Reasons Why Callgent.com is Revolutionizing Business Operations
Favicon
🥙 Callgentive UI - Home-Cooked Software Development
Favicon
These Figma Shortcuts Have Improved My Workflow, You Should Try Them Too
Favicon
Creating Admin Interfaces for an Online Cinema
Favicon
Viju streaming platform design development
Favicon
All you need to know about Product Analytics: Definition, metrics, tools, and examples.
Favicon
Best UI/UX Design Services Near Me in USA | intorque
Favicon
The Future of Intent-Driven Design
Favicon
Sites for Illustrations
Favicon
Struggling with a Limited Budget? Uncover 5 DIY Hacks to Instantly Elevate Your Product!
Favicon
From Paper to Pixels: Navigating the Evolution of Web Design for Impactful Digital Products
Favicon
Guide to Using an Ephemeral Amazon FSx for the Lustre File System to Reduce Costs.
Favicon
Chat App UI Design in Figma Part 2 - Figma Mobile UI Design Tutorial
Favicon
How to Design a Scrolling Virtual Card in Figma - Figma Mobile UI Design
Favicon
FOOD DELIVERY MOBILE APP UI DESIGN PART 1 - FIGMA TUTORIAL DESIGN 2023
Favicon
Fintech Mobile App UI Design (Figma Mobile Design 2022) - Episode 3 Part 1
Favicon
Product Design: Best Free UI UX Design Resources For Beginners
Favicon
6 THINGS TO CONSIDER WHEN STARTING YOUR FIRST PROJECT IN PRODUCT DESIGN
Favicon
Product design interview. My experience
Favicon
Building a Great UX Outside of your App
Favicon
The Importance of a Future-Proofed Multichannel Notification System
Favicon
A little bit about my career
Favicon
Building Product Notifications That Users Love
Favicon
How We Use Internal Hackathons to Create New Product Features

Featured ones: