Categories
Figma

7 Super-Handy Figma Tips.

View the original post

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 they’re are also equally suited to just general day, to day usage when working inside of Figma.

Some you may use already, but hopefully you may find the odd undiscovered gem in here too.

Let’s dive on in…


01.

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.

Click Thumbnail to Enlarge

02.

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.

Click Thumbnail to Enlarge

03.

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.

Click Thumbnail to Enlarge

04.

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.

Click Thumbnail to Enlarge

05.

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.

Click Thumbnail to Enlarge

06.

Use these keyboard shortcuts to navigate your 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.

Click Thumbnail to Enlarge

07.

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!

Click Thumbnail to Enlarge

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.

Thanks for reading the article,
Marc Andrew.

UNCODE.initRow(document.getElementById(“script-278917”));

Discover 21 Quick, and Easy Tips to help you improve your designs today!

Subscribe below to download my FREE Cheatsheet of UI & UX Tips, and also receive Regular UI & UX Articles, and Tips straight to your Inbox.

UI and UX cheatsheet cover

UNCODE.initRow(document.getElementById(“script-166742”));

The post 7 Super-Handy Figma Tips. appeared first on Marc Andrew.