7 Super-Handy Figma Tips
In this article I've compiled a handful of quick, and easy tips to help speed up your design workflow when working in Figma.
In this article I've compiled a handful of quick, and easy tips to help speed up your design workflow when working in Figma.
Most of these tips are perfect for when you're working with design systems or large design files, but are also equally suited to just general day, to day usage when working inside Figma.
Some you may use already, but hopefully you may find the odd undiscovered gem in here too.
Let's dive on in...
Use Math in the Inspector. Save your brainpower for more important stuff.
Don’t waste your time trying to resize elements manually to find that correct measurement.
Just use Math in the Inspector and save yourself some time.
Use Selection Colours when you want to change colours in bulk. Fast!
When you’re working with larger Components and want to change various colours, fast, don’t waste your time by clicking into separate elements and changing colours one by one.
Use the Selection Colors panel and adjust those colours in bulk, and in a much faster way.
Keep your Layers tidy with this handy shortcut.
I’ve been guilty in the past of leaving my Layers panel looking like organised chaos, with group after group, element after element open, making things harder to find in the Layers panel.
Use the simple shortcut Alt + L to collapse all Layers from time, to time, and keep your panel looking all neat, and tidy, and your focus on the project at hand.
Use search to find Text Styles faster.
When working with a Design System with well-named Text Styles, it can be time-consuming sometimes to swap out Text Styles to suit part of a design you’re working on.
Always, always, always use the Search function in the Inspector to search through your Text Styles. Typing in Headline 2 or H2 is soooo much faster than scrolling through a long list of Text Styles to find a suitable choice.
Use the List option to navigate Colour Styles quicker.
Like the tip before, when working with a large Design System it always helps to be able to navigate Colour Styles, Text Styles etc… in the fastest way possible.
Switching to the List option (as opposed to the Grid option) in the Inspector I feel always helps you navigate your Colour Styles faster with the label visible as opposed to just the colour swatch shown.
Use these keyboard shortcuts to navigate Layers faster.
I’ve been guilty in the past of just scrolling, and clicking down through countless Groups, and Parent containers in the Layers panel to find the right element.
Save yourself some time, and go Mouse-free.
Use the keyboard shortcuts Enter, and Tab to drill-down quickly through elements in your Layers panel to find what you need… fast!
Oh. And hold Shift with those shortcuts that I just mentioned, to jump back up through your Layer groups, and parent containers.
Swap-out components faster with this handy shortcut.
This last tip I’ve found so, so useful when working on different design iterations, and have found it works best when swapping out Icons in a project.
For example, simply choose an Icon from your Assets panel, and then holding down ALT + CMD, drag across your icon onto your design, where you’ll see a purple border around your existing icon, and then just swap it out in record-time!
Hopefully you’ve been able to find a few handy little tips here that you can put into practice right away, and help improve the speed of your workflow today.
Figma is an awesome tool with so many handy, and time-saving shortcuts that I keep discovering each day, and I’m sure you will to.
By the way, if you want to improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇
Thanks for reading the article,
Marc.